代码来源于腾讯课堂《全网最细致jQuery讲解》，做了小的修改，增加了标题显示及图片数量自适应．
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style> body { margin: 0; padding: 0; font: 16px "micro-soft Yahei"; } ul { margin: 0; padding: 0; list-style: none; } .play-box { position: relative; margin: 100px auto; width: 800px; height: 500px; border: 1px solid #ccc; } .play-box a { opacity: 0; height: 0; overflow: hidden; display: block; transition: opacity 1s; } .play-box a span { position: absolute; font-size: 20pt; color: bisque; opacity: 0.6; padding-left: 20px; padding-top: 20px; } .play-box a.current { opacity: 1; height: auto; } .play-box img { width: 800px; height: 500px; border: 0; } #iconList { position: absolute; left: 50%; bottom: 10px; margin-left: -45px; } #iconList li { float: left; margin: 0 4px; width: 10px; height: 10px; border-radius: 50%; font-size: 0; background-color: #fff; cursor: pointer; } #iconList li.current { background: linear-gradient(to bottom, #f8f8f8 0,lawngreen 80%); } .slidebar { position: absolute; display: none; top: 50%; margin-top: -25px; width: 30px; height: 50px; color: #fff; text-align: center; line-height: 50px; background-color: #000; opacity: .6; cursor: pointer; font-family: simsun; } .slidebar_left { left: 0; } .slidebar_right { right: 0; } </style> </head> <body> <div id="playBox" class="play-box"> <div id="imgList"> <a href="#" class="current"> <span>a</span> <img src="/images/test/1.jpg"> </a> <a href="#"> <span>b</span> <img src="/images/test/2.jpg"> </a> <a href="#"> <span>c</span> <img src="/images/test/3.jpg"> </a> <a href="#"> <span>d</span> <img src="/images/test/4.jpg"> </a> <a href="#"> <span>e</span> <img src="/images/test/5.jpg"> </a> </div> <div id="iconList"> <ul> <li class="current">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> <div class="slidebar slidebar_left"><</div> <div class="slidebar slidebar_right">></div> </div> <script src="/js/jquery.2.1.4.min.js"></script> <script type="text/javascript"> $(function () { var speed = 3000; var m = 1; var imgCount = $("#iconList ul li").length; var playTimer = setInterval(runPlay, speed); function runPlay() { if (m > imgCount - 1) m = 0; controlPlay(m); m++; } function controlPlay(n) { $("#imgList a").removeClass("current").eq(n).addClass("current"); $("#iconList li").removeClass("current").eq(n).addClass("current"); } $("#playBox").mouseenter(function () { clearInterval(playTimer); $(".slidebar").fadeIn(300); }).mouseleave(function () { playTimer = setInterval(runPlay, speed); $(".slidebar").fadeOut(300); }); $("#iconList li").click( function () { m = $(this).index(); controlPlay(m); m++; }).hover(function () { return false; }); $(".slidebar").hover(function () { return false; }); $(".slidebar_right").click( function () { if (m > imgCount - 1) m = 0; controlPlay(m); m++; }); $(".slidebar_left").click( function () { m -= 2; if (m < 0) m = imgCount - 1; controlPlay(m); m++; }); }); </script> </body> </html>
