本文主要是介绍jQuery实现图片轮播且鼠标可控制显示，使用animate函数，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
图片容器的左下角加一排数组，当鼠标指向某个数字时，就显示相应的图片，并且还有图片轮播效果，使用了jQuery库，实例代码：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>demo</title><script type="text/javascript" src="jquery-1.12.1.min.js"></script><script>$(document).ready(function(){var len = $(".num li").length;var index = 0;var startRollOne;$(".num li").mouseover(function(){index=$(".num li").index(this);showImg(index);}).eq(0).mouseover();$(".box").hover(function () {clearInterval(startRollOne);}, function () {startRollOne=setInterval(function () {showImg(index);index++;if(index==len){index=0;}},2000);}).trigger("mouseleave");function showImg(index){$(".picBox").stop(true,false).animate({marginLeft:-200*index+"px"},1000);$(".num li").removeClass("on").eq(index).addClass("on");}});</script><style>.box{width: 200px;height: 260px;margin: 160px auto;overflow: hidden;position: relative;}.box p{text-align: center;}.picBox{margin: 0px;padding: 0px;list-style: none;width: 1500px;position: absolute;}.picBox:hover{cursor: pointer;}.picBox li{float: left;}.picBox img{width: 200px;height: 240px;}.num {list-style: none;position: absolute;bottom: 1px;right: 10px;}.num li{text-align: center;width: 15px;height:15px;background-color: white;opacity: 1;line-height: 18px;float: left;border: red solid 1px;margin-left: 2px;font-size: 15px;}.num li.on{text-align: center;width: 20px;height:20px;background-color: red;opacity: 1;font-size: 18px;line-height: 20px;float: left;border: red solid 1px;margin-left: 2px;}</style>
</head>
<body>
<div class="box"><p> 图片轮播</p><ul class="picBox"><li><img src="a.jpg" /></li><li><img src="b.jpg" /></li><li><img src="c.jpg" /></li><li><img src="d.jpg" /></li><li><img src="e.jpg" /></li></ul><ul class="num"><li class="on">1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
</div>
</body>
</html>
这篇关于jQuery实现图片轮播且鼠标可控制显示，使用animate函数的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
