本篇文章给大家分享的是有关使用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; } /*当前展示li 下的文字样式*/ .slider li.current p { /*文字位移到0的位置,正常显示*/ 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>
以上就是使用jquery插件实现轮播图效果,小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。