利用fadeIn()，siblings()，fadeOut()方法实现，一张图片显示，其他图片消失，最后一张图片时重新开始 html
<body> <input type="button" value="下一张" /> <img src="img/1.jpg" /> <img src="img/2.jpg" /> <img src="img/3.jpg" /> <img src="img/4.jpg" /> <img src="img/5.jpg" /> <img src="img/6.jpg" /> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li class="on"></li> </ul> </body>css
<style> * { margin: 0px; padding: 0px; } img { width: 500px; height: 350px; position: absolute; top: 25px; left: 0; } li{ width: 15px; height: 15px; background: darkgrey; border: 1px solid; border-radius: 100%; float: left; list-style: none; margin-right: 5px; } ul{ position: absolute; top: 330px; left: 300px; } .on{ background: white; } </style>script
<script> var i = 0; $(function () { $("input:button").click(function () { play2();//点击是执行切换函数 }) function play2() { if (i > 5) {//到第五张图片时，重新开始图片 i = 0; play(); } else { play(); } } function play() {//图片出现，其他图片消失 $("img").eq(i).fadeIn().siblings("img").fadeOut(); $("li").eq(i).addClass("on").siblings("li").removeClass("on"); i++; } setInterval(play2, 1000); }) </script>