轮播图

柔情只为你懂 2021-11-23 13:56 641阅读 0赞
  1. **## CSS样式**
  2. *{
  3. margin: 0;
  4. padding: 0;
  5. list-style: none;
  6. }
  7. div{
  8. width: 300px;
  9. height: 300px;
  10. position: relative;
  11. border: 1px solid gray;
  12. margin-left: 250px;
  13. overflow: hidden;
  14. }
  15. ul{
  16. width: 1500px;
  17. height: 300px;
  18. position: absolute;
  19. }
  20. ul>li{
  21. width: 300px;
  22. height: 300px;
  23. float: left;
  24. }
  25. ul>li>img{
  26. width: 100%;
  27. height: 100%;
  28. }
  29. button{
  30. position: absolute;
  31. top: 120px;
  32. border: none;
  33. width: 50px;
  34. height: 80px;
  35. background: rgba(120,120,120,0.6);
  36. display: none;
  37. color: orange;
  38. font-size: 22px;
  39. }
  40. button:nth-of-type(1){
  41. left: 0;
  42. }
  43. button:nth-of-type(2){
  44. right: 0;
  45. }
  46. ol{
  47. position: absolute;
  48. bottom: 10px;
  49. width: 100%;
  50. display: flex;
  51. justify-content: space-around;
  52. }
  53. ol>li{
  54. width: 15px;
  55. height: 15px;
  56. border-radius: 50%;
  57. background: white;
  58. }
  59. ## HTML代码
  60. <div>
  61. <ul>
  62. <li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li>
  63. <li><img src="img/WuTa_2019-02-25_18-33-14.jpg" ></li>
  64. <li><img src="img/WuTa_2019-02-25_18-33-21.jpg" ></li>
  65. <li><img src="img/WuTa_2019-03-16_20-12-13.jpg" ></li>
  66. <li><img src="img/WuTa_2019-02-25_18-27-57.jpg" ></li>
  67. </ul>
  68. <ol>
  69. <li style="background: #FF0000;"></li>
  70. <li></li>
  71. <li></li>
  72. <li></li>
  73. </ol>
  74. <button>prev</button>
  75. <button>next</button>
  76. </div>
  77. ## js代码
  78. var timer
  79. var index = 0
  80. $(function(){
  81. $("button").eq(1).click(function(){
  82. $("ul").stop(true,true)
  83. index++
  84. if(index>3){
  85. index=0
  86. }
  87. if($("ul").position().left<=-1200){
  88. $("ul").css("left","0")
  89. }
  90. $("ul").animate({"left":"-=300px"},500)
  91. yuan()
  92. })
  93. $("button").eq(0).click(function(){
  94. index--
  95. if(index<0){
  96. index = 3
  97. }
  98. $("ul").stop(true,true)
  99. if($("ul").position().left>=0){
  100. $("ul").css("left","-1200px")
  101. }
  102. $("ul").animate({"left":"+=300px"},500)
  103. yuan()
  104. })
  105. })
  106. var bian = function(){
  107. index++
  108. if(index>3){
  109. index=0
  110. }
  111. $("ul").stop(true,true)
  112. if($("ul").position().left<=-1200){
  113. $("ul").css("left","0")
  114. }
  115. $("ul").animate({"left":"-=300px"},500)
  116. yuan()
  117. }
  118. //动画自动轮播
  119. timer = setInterval(bian,2000)
  120. $("div").hover(function(){
  121. clearInterval(timer)
  122. // 圆点点击
  123. $("ol>li").click(function(){
  124. $(this).css("background","red").siblings().css("background","white")
  125. index =$(this).index()
  126. $("ul").stop().animate({'left':index*-300+"px"},500)
  127. })
  128. $("button").fadeIn(300)
  129. },function(){
  130. timer= setInterval(bian,2000)
  131. $("button").fadeOut(300)
  132. })
  133. function yuan(){
  134. $("ol>li").eq(index).css("background","red").siblings().css("background","white")
  135. }

发表评论

表情:
评论列表 (有 0 条评论,641人围观)

还没有评论,来说两句吧...

相关阅读

    相关

    点击左右按钮,切换图片。图片的序号也随之变化。 逻辑思维:每次点击按钮时,只需要改变img的“src”属性就可以切换图片。将图片的"src"放在数组中,就可以知道每一张图的位

    相关

    setInterval setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。 给需要轮播的图片在js里声明一个变量 以数组的类型 在H

    相关

    方案1 初始化插件: slides是一款基于jQuery无缝轮播图插件,支持图内元素动画,可以自定义动画类型 html代码 <div class="fullS