服务器之家

服务器之家 > 正文

运用jQuery定时器的原理实现banner图片切换

时间:2021-04-06 16:15     来源/作者:jQuery教程网

主要运用了定时器的原理,bind,trigger应用等

  1. <!DOCTYPE html> 
  2. <html> 
  3. <head> 
  4. <meta charset="utf-8"
  5. <title>banner切换实现</title> 
  6. <style type="text/css"
  7. /* 
  8. * @description: banner切换样式 
  9. * @author: lanfeng(beryl) 
  10. * @time:2013-02-26 
  11. */ 
  12. /* reset*/ 
  13. *{ margin: 0; padding: 0;} 
  14. body{font:12px/1.5 Tahoma,'B8BF53',arial,Tahoma,helvetica,sans-serif; color:#333333;background-color:#ffffff;position:relative; } 
  15. h1,h2,h3,h4,h5,h6{font-size:100%} 
  16. address,em{font-style:normal;} 
  17. code,kbd,pre,samp{font-family:courier new,courier,monospace;} 
  18. ul,ol{list-style:none outside none;} 
  19. fieldset,img{border:0;} 
  20. img{vertical-align:middle} 
  21. table{border-collapse:collapse;border-spacing:0;font-size:inherit;*font-size:100%;} 
  22. input,button,textarea,select{vertical-align:middle;font:100% Helvetica,Arial,sans-serif; color:inherit} 
  23. .clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden;} 
  24. .clearfix{*zoom:1;} 
  25. .clear{font-size:0;line-height:0;height:0;clear:both;visibility:hidden;overflow:hidden;} 
  26.  
  27. .d-ftab{ width:510px; height: 180px;position: relative; margin: 100px auto;} 
  28. .d-fShow ul li{ float: left; width: 510px; height: 180px;} 
  29. .d-fShow{ width: 510px; height: 180px; overflow: hidden;} 
  30. .d-fShow img{ width: 510px; height: 180px; float: left;} 
  31. .d-fs-control{ position: absolute; width:510px; position: absolute; left: 0; bottom: 0; height: 25px; line-height: 25px; 
  32.  
  33. background: rgba(0,0,0,0.4); 
  34. filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000'
  35.  
  36. EndColorStr='#66000000') ; } 
  37. :root .d-fs-control{filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0,StartColorStr='#66000000' 
  38.  
  39. ,EndColorStr='#66000000')9 ;} 
  40. .d-fs-control ul{ position: absolute; bottom:3px; right: 5px; height: 16px;} 
  41. .d-fs-control ul li{width:16px;height:16px; background:#777675;border-radius: 2px 2px 2px 2px; float:left;margin-left:5px; 
  42.  
  43. color:#dcdcdc;text-align:center;font-weight:700;cursor:pointer;line-height:16px;filter: alpha(opacity=70); opacity: 0.7;} 
  44. .d-fs-control ul li:hover,.d-fs-control ul li.select{background:#ffffff;color:#ff6700;} 
  45.  
  46. </style> 
  47. <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> 
  48. <script type="text/javascript"
  49. $(function(){ 
  50. var wrap =$('.d-ftab'); 
  51. var imgs = wrap.find('.d-fShow ul >li'); 
  52. var len=imgs.length ; 
  53. var tabTime=100; 
  54. var outTime=4000; 
  55. var select='select'
  56. var num =0 ; 
  57. var interval; 
  58. var type = 'click'
  59. var btns=wrap.find('.d-fs-control ul>li'); 
  60. btns.bind(type,function(){ 
  61. var _this=$(this); 
  62. _this.addClass('select').siblings ().removeClass('select'); 
  63. num=_this.prevAll().length; 
  64. imgs.stop().eq(num).fadeTo(tabTime,1) ; 
  65. imgs.not(':eq('+num+')').filter(':visible').fadeOut(tabTime) ; 
  66. return false
  67. }).eq(num).trigger(type); 
  68. var interFunc=function(){ 
  69. num=(num+1)%len; 
  70. btns.eq(num).triggerHandler(type); 
  71. wrap.bind('mouseover',function(){ 
  72. clearInterval(interval); 
  73. }).bind('mouseout',function(){ 
  74. interval=setInterval(interFunc,outTime) 
  75. }) 
  76.  
  77. }) 
  78. </script> 
  79. </head> 
  80. <body> 
  81. <div class="d-ftab"
  82. <div class="d-fShow"
  83. <ul> 
  84. <li> 
  85. <a href="#"><img alt="" src=" images/1.jpg"/> 
  86. </a> 
  87. </li> 
  88. <li > 
  89. <a href="#"><img alt="" src="images/2.png"
  90. </a> 
  91. </li> 
  92. <li> 
  93. <a href="#"><img alt="" src="images/3.jpg"
  94. </a> 
  95. </li> 
  96. <li> 
  97. <a href=""><img alt="" src="images/4.jpg"
  98. </a> 
  99. </li> 
  100. <li> 
  101. <a href="#"><img alt="" src="images/5.jpg"
  102. </a> 
  103. </li> 
  104. </ul> 
  105. </div> 
  106. <div class="d-fs-control"
  107. <ul> 
  108. <li>1</li> 
  109. <li>2</li> 
  110. <li>3</li> 
  111. <li>4</li> 
  112. <li class="select">5</li> 
  113. </ul> 
  114. </div> 
  115. </div> 
  116. </body> 
  117. </html> 

效果如下图:
运用jQuery定时器的原理实现banner图片切换

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部