本文实例为大家分享了jquery插件实现轮播图的具体代码，供大家参考，具体内容如下
轮播图的实现（jquery插件）
需要引入jquery插件，去jquery官网搜索
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; list-style: none; } img { display: block; } .slider { height: 340px; width: 790px; margin: 100px auto; position: relative; overflow: hidden; } .slider li { position: absolute; display: none; } .slider li:first-child { display: block; } .slider li p { position: absolute; width: 100%; padding: 10px 0; text-indent: 2em; background-color: rgba(0, 0, 0, .6); bottom: 0; left: 0; font-size: 18px; transform: translate3d(0, 100%, 0); transition: all .8s; } .slider li.current p { transform: translate3d(0, 0, 0); } .slider li a { color: #fff; } .arrow { display: none; } .slider:hover .arrow { display: block; } .arrow-left, .arrow-right { font-family: "SimSun", "宋体"; width: 30px; height: 60px; background-color: rgba(0, 0, 0, 0.1); position: absolute; top: 50%; margin-top: -30px; cursor: pointer; text-align: center; line-height: 60px; color: #fff; font-weight: 700; font-size: 30px; } .arrow-left:hover, .arrow-right:hover { background-color: rgba(0, 0, 0, .5); } .arrow-left { left: 0; } .arrow-right { right: 0; } </style></head><body> <div class="slider"> <ul> <li> <a href="#" > <img src="image/1.jpg" alt=""> <p>这是第1张图片的文字说明</p> </a> </li> <li> <a href="#" > <img src="image/2.jpg" alt=""> <p>这是第2张图片的文字说明</p> </a> </li> <li> <a href="#" > <img src="image/3.jpg" alt=""> <p>这是第3张图片的文字说明</p> </a> </li> <li> <a href="#" > <img src="image/4.jpg" alt=""> <p>这是第4张图片的文字说明</p> </a> </li> <li> <a href="#" > <img src="image/5.jpg" alt=""> <p>这是第5张图片的文字说明</p> </a> </li> <li> <a href="#" > <img src="image/6.jpg" alt=""> <p>这是第6张图片的文字说明</p> </a> </li> <li> <a href="#" > <img src="image/7.jpg" alt=""> <p>这是第7张图片的文字说明</p> </a> </li> <li> <a href="#" > <img src="image/8.jpg" alt=""> <p>这是第8张图片的文字说明</p> </a> </li> </ul> <!--箭头--> <div class="arrow"> <span class="arrow-left"><</span> <span class="arrow-right">></span> </div> </div> <script src="../jquery-2.2.4.js"></script> //jquery插件 <script> //1、定义一个索引，且设置第一张图片为默认 var index = 0; $('ul>li').eq(index).addClass('current').siblings().removeClass('current'); //2、右边按钮的点击 $('.arrow-right').click(function(){ index++; //判断图片是否超过最后一张，则重新赋值 if(index == $('ul>li').length){ index = 0; } showImage(); }) 左边按钮的实现 $('.arrow-left').click(function(){ index--; if(index < 0) index = $('ul>li').length - 1; showImage() }); function showImage(){ $('ul>li').eq(index).addClass('current').fadeIn().siblings().removeClass('current').fadeOut(); } //实现自动轮播 var times = ''; //鼠标移入停止播放 $('.slider').mouseover(function(){ clearInterval(times) }) //鼠标移出，停止 $('.slider').mouseout(function(){ times = setInterval(function(){ $('.arrow-right').click(); },3000) }); $('.slider').mouseout(); </script></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
