效果如下：
代碼如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>slider</title> <style type="text/css"> *{ margin: 0; padding: 0; } #slideshow{ position: relative; width: 512px; height: 384px; margin: 0 auto; overflow: hidden; } #slideshow>ul,#slideshow>ul>li,#slideshow-nav{ position: absolute; } #slideshow>ul>li{ list-style: none; } #slideshow-nav{ bottom: 20px; width: 100%; text-align: center; } #slideshow-nav>span{ display: inline-block; width: 15px; height: 15px; margin: 0 7px; font-size: 0; background-color: rgba(255,255,255,.3); border-radius: 50%; user-select: none; -webkit-user-select: none; transition: all .5s; -webkit-transition: all .5s; cursor: pointer; } #slideshow-nav>span.active{ background-color: #fff; } </style></head><body> <div id="slideshow"> <ul> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231154e8ab2zanwd59a2w2.jpg" alt="gakki is mine"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236ugj2glgcl6g66gg4.jpg" alt="gakki is mine"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236c26bx5bbfp6kazzm.jpg" alt="gakki is mine"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236oqd8i8q158ojr0i7.jpg" alt="gakki is mine"></li> <li><img src="http://cdn.attach.qdfuns.com/notes/pics/201611/26/231236o1iud19lkz11wqja.jpg" alt="gakki is mine"></li> </ul> <div id="slideshow-nav"></div> </div> <script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var timer = null, curindex = 0, duration = 2000, speed = 500; var $imgWrap = $('#slideshow>ul'); var totalIndex = $imgWrap.find('li').length; var width = $('#slideshow').width(); //insert navigate span, let img in order $('#slideshow').find('ul>li').each(function(index){ $(this).css('left', width*index + 'px'); $('#slideshow-nav').append('<span>' + (index+1) + '</span>'); }) // $('#slideshow-nav>span').eq(0).addClass('active'); //auto slide var move = function(){ curindex += 1; if (curindex===totalIndex) { curindex = 0; } // current span add classname "active" $('#slideshow-nav>span').each(function(index) { $(this).removeClass('active') }).eq(curindex).addClass('active'); //auto slide $imgWrap.animate({ 'left': width*curindex*(-1)+'px', }, speed) //一開始沒加"timer = ",這個bug耽誤了不少時間 timer = setTimeout(move,duration+speed); }; //init timer = setTimeout(move,duration); //click event $('#slideshow-nav>span').on('click', function(event) { event.preventDefault(); /* Act on the event */ clearTimeout(timer); $imgWrap.stop(true, true); curindex = $(this).index() - 1; move(); }); }) </script></body></html>以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
