JQuery 图片轮播
Posted 陈彦斌
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JQuery 图片轮播相关的知识，希望对你有一定的参考价值。
准备工作：
1、准备几张大小相同的图片
完成功能：
1、自动轮播
2、手动轮播
3、点击二侧按钮前后切换图片
JQuery插件地址:
链接：https://pan.baidu.com/s/1zNl2-zulPurl1Tqiu4jo6Q
提取码：2ir4
效果图：
完整代码：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 .outer { 8 width: 590px; 9 height: 470px; 10 margin: 80px auto; 11 position: relative; 12 } 13 14 .img li { 15 position: absolute; 16 list-style: none; 17 top: 0px; 18 left: 0px; 19 } 20 21 .num { 22 position: absolute; 23 bottom: 15px; 24 left: 120px; 25 list-style: none; 26 } 27 28 .num li { 29 display: inline-block; 30 width: 18px; 31 height: 18px; 32 background-color: white; 33 border-radius: 50%; 34 text-align: center; 35 line-height: 18px; 36 margin-left: 10px; 37 } 38 39 .btn { 40 position: absolute; 41 top: 50%; 42 width: 30px; 43 height: 60px; 44 background-color: lightgray; 45 color: white; 46 text-align: center; 47 line-height: 60px; 48 font-size: 30px; 49 opacity: 0.6; 50 margin-top: -30px; 51 display: none; 52 } 53 54 .left_btn { 55 left: 0px; 56 } 57 58 .right_btn { 59 right: 0px; 60 } 61 62 .outer:hover .btn { 63 display: block; 64 } 65 66 .num .active { 67 background-color: red; 68 } 69 </style> 70 </head> 71 <body> 72 <div class="outer"> 73 <ul class="img"> 74 <li><a href="#"><img src="images/0.jpg" alt=""></a></li> 75 <li><a href="#"><img src="images/1.jpg" alt=""></a></li> 76 <li><a href="#"><img src="images/2.jpg" alt=""></a></li> 77 <li><a href="#"><img src="images/3.jpg" alt=""></a></li> 78 <li><a href="#"><img src="images/4.jpg" alt=""></a></li> 79 <li><a href="#"><img src="images/5.jpg" alt=""></a></li> 80 <li><a href="#"><img src="images/6.jpg" alt=""></a></li> 81 <li><a href="#"><img src="images/7.jpg" alt=""></a></li> 82 </ul> 83 <ul class="num"> 84 <!--<li class="active"></li>--> 85 <!--<li></li>--> 86 <!--<li></li>--> 87 <!--<li></li>--> 88 <!--<li></li>--> 89 <!--<li></li>--> 90 <!--<li></li>--> 91 <!--<li></li>--> 92 </ul> 93 <div class="left_btn btn"> <</div> 94 <div class="right_btn btn"> ></div> 95 </div> 96 </body> 97 <script src="jquery-3.3.1.min.js"></script> 98 <script> 99 var i = 0; 100 // 通过JQuery获取img标签下li的个数，然后自动创建num标签下的按钮标签li 101 var $img_num = $(".img li").length; 102 for (var j = 0; j < $img_num; j++) { 103 $(".num").append("<li>"); 104 } 105 $(".num li").eq(0).addClass("active"); 106 107 // 手动轮播，绑定事件 108 $(".num li").mouseover(function () { 109 i = $(this).index(); 110 console.log(i); 111 $(this).addClass("active"); 112 $(this).siblings().removeClass("active"); // 取消其他标签按钮的active 113 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 114 }) 115 116 // 自动轮播 117 var c = setInterval(GO_R,1500) 118 119 function GO_R() { 120 if (i == $img_num-1) 121 { 122 i = -1; 123 } 124 i++; 125 $(".num li").eq(i).addClass("active") 126 $(".num li").eq(i).siblings().removeClass("active") // 取消其他标签按钮的active 127 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 128 } 129 function GO_L(){ 130 if (i == 0) 131 { 132 i = $img_num; 133 } 134 i--; 135 $(".num li").eq(i).addClass("active") 136 $(".num li").eq(i).siblings().removeClass("active") // 取消其他标签按钮的active 137 $(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000); 138 } 139 // 悬浮，清除计时器 140 $(".outer").hover(function () { 141 clearInterval(c) 142 },function () { 143 c = setInterval(GO_R,1500) 144 }) 145 146 // button 加定播 147 // 绑定一 148 $(".right_btn").click(GO_R) 149 // 绑定二 150 // $(".right_btn").bind("click",GO_R) 151 152 $(".left_btn").click(GO_L) 153 154 </script> 155 </html>
以上是关于JQuery 图片轮播的主要内容，如果未能解决你的问题，请参考以下文章