本篇内容介绍了“怎么使用jQuery实现图片轮播效果”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
用jQuery实现图片轮播需要有以下步骤：
对图片区域获取，想象中我们所用的图片是按照顺序排列起来，按照一定的时间切换图片的位置来实现轮播
对左右两个按钮设置监听，当点击按钮时，要切换到前一张或者后一张
对图片底部的小圆点设置监听事件，当点击小圆点时，切换到相应的图片位置，而且小圆点也要点亮
对图片整体设置定时器，让图片自己轮播，再设置一个监听函数，让鼠标在图片区域悬停的时候停止定时器，挪开的之后继续轮播。
html+css区域代码：
<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>焦点轮播图</title> <style type="text/css"> * { margin: 0; padding: 0; text-decoration: none; } body { padding: 20px; } #container { width: 600px; height: 400px; overflow: hidden; position: relative; margin: 0 auto; } #list { width: 4200px; height: 400px; position: absolute; z-index: 1; } #list img { float: left; } #pointsDiv { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px; } #pointsDiv span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px; } #pointsDiv .on { background: orangered; } .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0, 0, 0, 0.3); color: #fff; } .arrow:hover { background-color: RGBA(0, 0, 0, 0.7); } #container:hover .arrow { display: block; } #prev { left: 20px; } #next { right: 20px; } </style></head><body><div id="container"> <div id="list" > <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> <img src="img/2.jpg" alt="2"/> <img src="img/3.jpg" alt="3"/> <img src="img/4.jpg" alt="4"/> <img src="img/5.jpg" alt="5"/> <img src="img/1.jpg" alt="1"/> </div> <div id="pointsDiv"> <span index="1" class="on"></span> <span index="2"></span> <span index="3"></span> <span index="4"></span> <span index="5"></span> </div> <a href="javascript:;" id="prev" class="arrow"><</a> <a href="javascript:;" id="next" class="arrow">></a></div></body></html>jsp相关代码：
//导入jQuery库<script src="jquery-1.10.1.js"></script><script> //得到所有照片的div var $div = $('#list'); var $span = $('#pointsDiv>span') //获取照片当前的位置 var index = 1; var isToggleImagEnd = true; //点击按键往左移动 $('#prev').click(function () { isToggleImg(0) }); //点击按键往右移动 $('#next').click(function () { isToggleImg(1) }); function isToggleImg(n) { if (isToggleImagEnd) { isToggleImagEnd = false; if (n == 0) { index--; } else { index++; } $div.animate({ left: index * (-600) }, 500, function () { if (index == 0) { index = 5 } if (index == 6) { index = 1; } //设置图片轮播时，从最后一张跳到第一张不会有间隙，跟其他图片一样跳转 $div.css('left', index * (-600)) //设置图片下面的圆点状态，更改其类属性 $span.removeClass('on'); $($span.get(index - 1)).addClass('on') isToggleImagEnd = true; }) } } //设置延时函数，让图片自己定时轮播下一张 var interval = setInterval(function () { isToggleImg(1); }, 1000) //鼠标图片上图片停止轮播，挪开继续轮播 $("#container").hover(function () { clearInterval(interval) }, function () { interval = setInterval(function () { isToggleImg(1); }, 1000) }) //对小圆点设置监听事件，点击小圆点，图片跳转 $span.click(function () { index = $(this).index(); isToggleImg() })</script>“怎么使用jQuery实现图片轮播效果”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站，小编将为大家输出更多高质量的实用文章！
