用jquery实现图片轮播
Posted black-rainbow
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了用jquery实现图片轮播相关的知识，希望对你有一定的参考价值。
啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style type="text/css"> * { margin: 0; padding: 0; } ul { list-style: none; } .slideShow { width: 600px; height: 350px; /*其实就是图片的宽度和高度*/ border: 1px #eeeeee solid; margin: 100px auto; position: relative; overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/ } .slideShow ul { width: 3000px; position: relative; /*此处需注意relative : 对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置，如果没有这个属性，图片将不可左右移动*/ } .slideShow ul li { float: left; /*让五张图片左浮动，形成并排的横着布局，方便点击按钮时的左移动*/ width: 600px; } .slideShow .showNav { position: absolute; /*用绝对定位给数字按钮进行布局*/ right: 10px; bottom: 5px; text-align: center; font-size: 12px; line-height: 20px; } .slideShow .showNav span { cursor: pointer; display: block; float: left; width: 20px; height: 20px; background: #ff5a28; margin-left: 2px; color: #fff; } .slideShow .showNav .active { background: #b63e1a; } </style> </head> <body> <div class="slideShow"> <ul> <li><a href="#"><img src="image/pic1.png" ></a></li> <li><a href="#"><img src="image/pic2.png" ></a></li> <li><a href="#"><img src="image/pic3.png" ></a></li> <li><a href="#"><img src="image/pic4.png" ></a></li> <li><a href="#"><img src="image/pic5.png" ></a></li> </ul> <div class="showNav"> <span class="active">1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> </div> <script type="text/javascript" src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () { var slideShow = $(".slideShow"), //获取最外层框架的名称 ul = slideShow.find(‘ul‘), showNumber = slideShow.find(‘.showNav span‘), //获取按钮 oneWidth = slideShow.find(‘ul li‘).eq(0).width(); //获取每个图片的宽度 var timer = null; //定时器返回值，主要用于关闭定时器 var iNow = 0; //iNow为正在展示的图片索引值，当用户打开网页时首先显示第一张图，即索引值为0 showNumber.on(‘click‘, function () { //为每个按钮绑定一个点击事件 $(this).addClass(‘active‘).siblings().removeClass(‘active‘); //按钮点击时为这个按钮添加高亮状态，并且将其他按钮高亮状态去掉 var index = $(this).index(); //获取哪个按钮被点击，也就是找到被点击按钮的索引值 iNow = index; ul.animate({‘left‘: -oneWidth * iNow,}) //注意此处用到left属性，所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度，N根据被点击的按钮索引值iNOWx确定 }); function autoplay() { timer = setInterval(function () { //打开定时器 iNow++; //让图片的索引值次序加1，这样就可以实现顺序轮播图片 if (iNow > showNumber.length - 1) { //当到达最后一张图的时候，让iNow赋值为第一张图的索引值，轮播效果跳转到第一张图重新开始 iNow = 0; } showNumber.eq(iNow).trigger(‘click‘); //模拟触发数字按钮的click }, 2000); //2000为轮播的时间 } autoplay(); slideShow.hover(function () { clearInterval(timer); }, autoplay()) }) </script> </div> </body> </html>
巴巴爸爸啵啵啵啵啵啵啵啵啵啵啵啵啵啵啵
以上是关于用jquery实现图片轮播的主要内容，如果未能解决你的问题，请参考以下文章