本文主要是介绍fadeIn，fadeOut函数 图片轮播，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
先记下代码，防止遗忘：
<!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 index=0;var len=$(".picBox li").length;$(".picBox li").fadeOut(0).eq(index).fadeIn(0);function rollOne(){if(index <len-1){$(".picBox li").eq(index).fadeOut(600).next().fadeIn(600);index++;}else if(index == len-1){$(".picBox li").eq(index).fadeOut(600).siblings().eq(0).fadeIn(600);index=0;}}var startRollOne=setInterval(rollOne,2000);$(".box").hover(function () {clearInterval(startRollOne);}, function () {startRollOne=setInterval(rollOne,2000);});});</script><style>.box{width: 200px;height: 260px;margin: 160px auto;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{position: absolute;display: none;top:0px;left:0px;}.picBox img{width: 200px;height: 240px;}</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>
</div>
</body>
</html>这篇关于fadeIn，fadeOut函数 图片轮播的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
