个人中心
gpt4 book ai didi

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

转载 作者：qq735679552 更新时间：2022-09-27 22:32:09 26 4
gpt4 key购买 nike

CFSDN坚持开源创造价值，我们致力于搭建一个资源共享平台，让每一个IT人在这里找到属于你的精彩世界.

这篇CFSDN的博客文章运用jQuery定时器的原理实现banner图片切换由作者收集整理，如果你对这篇文章有兴趣，记得点赞哟.

主要运用了定时器的原理，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. } 
  72. wrap.bind('mouseover',function(){ 
  73. clearInterval(interval); 
  74. }).bind('mouseout',function(){ 
  75. interval=setInterval(interFunc,outTime) 
  76. }) 
  77.  
  78. }) 
  79. </script> 
  80. </head> 
  81. <body> 
  82. <div class="d-ftab"> 
  83. <div class="d-fShow"> 
  84. <ul> 
  85. <li> 
  86. <a href="#"><img alt="" src=" images/1.jpg"/> 
  87. </a> 
  88. </li> 
  89. <li > 
  90. <a href="#"><img alt="" src="images/2.png"> 
  91. </a> 
  92. </li> 
  93. <li> 
  94. <a href="#"><img alt="" src="images/3.jpg"> 
  95. </a> 
  96. </li> 
  97. <li> 
  98. <a href=""><img alt="" src="images/4.jpg"> 
  99. </a> 
  100. </li> 
  101. <li> 
  102. <a href="#"><img alt="" src="images/5.jpg"> 
  103. </a> 
  104. </li> 
  105. </ul> 
  106. </div> 
  107. <div class="d-fs-control"> 
  108. <ul> 
  109. <li>1</li> 
  110. <li>2</li> 
  111. <li>3</li> 
  112. <li>4</li> 
  113. <li class="select">5</li> 
  114. </ul> 
  115. </div> 
  116. </div> 
  117. </body> 
  118. </html> 

效果如下图:

最后此篇关于运用jQuery定时器的原理实现banner图片切换的文章就讲到这里了,如果你想了解更多关于运用jQuery定时器的原理实现banner图片切换的内容请搜索CFSDN的文章或继续浏览相关文章，希望大家以后支持我的博客！ 。

26 4 0
文章推荐： 嵌入式移植docker报错问题(汇总)
文章推荐： 网页运行时提示对象不支持abigimage属性或方法
文章推荐： js中直接声明一个对象的方法
文章推荐： 用简洁的jQuery方法toggleClass实现隔行换色
qq735679552
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com