jquery實現(xiàn)輪播圖效果
更新時間:2017年02月13日 12:01:14 作者:nick906
本文介紹了jquery實現(xiàn)輪播圖效果示例代碼。具有很好的參考價值,下面跟著小編一起來看下吧
效果如下:
代碼如下:
<!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>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
您可能感興趣的文章:
- jquery實現(xiàn)左右輪播圖效果
- JQuery和html+css實現(xiàn)帶小圓點和左右按鈕的輪播圖實例
- jquery版輪播圖效果和extend擴展
- jQuery制作全屏寬度固定高度輪播圖(實例講解)
- jquery實現(xiàn)左右滑動式輪播圖
- jQuery實現(xiàn)一個簡單的輪播圖
- jQuery按需加載輪播圖(web前端性能優(yōu)化)
- 用jQuery實現(xiàn)優(yōu)酷首頁輪播圖
- jQuery無縫輪播圖代碼
- jquery 實現(xiàn)輪播圖詳解及實例代碼
- 原生Javascript和jQuery做輪播圖簡單例子
- jQuery實現(xiàn)簡潔的輪播圖效果實例
- jquery寫出PC端輪播圖實例
相關(guān)文章
jquery如何根據(jù)值設(shè)置默認(rèn)的選中項
這篇文章主要介紹了jquery如何根據(jù)值設(shè)置默認(rèn)的選中項,需要的朋友可以參考下2014-03-03JQuery省市聯(lián)動效果實現(xiàn)過程詳解
這篇文章主要介紹了JQuery省市聯(lián)動效果實現(xiàn)過程詳解,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-05-05JQuery 表單中textarea字?jǐn)?shù)限制實現(xiàn)代碼
textarea中的字?jǐn)?shù)的限制是在1000個之內(nèi),下面是具體的實現(xiàn)代碼,基本上會點jquery的能看懂,不懂的可以學(xué)習(xí)下jquery,當(dāng)期比較流行了,要不就落伍了。2009-12-12jQuery+PHP+MySQL二級聯(lián)動下拉菜單實例講解
這篇文章主要介紹了一款jQuery+PHP+MySQL三者結(jié)合實現(xiàn)的二級聯(lián)動下拉菜單,需要的朋友可以參考下2015-10-10基于jquery編寫的橫向自適應(yīng)幻燈片切換特效的實例代碼
全屏自適應(yīng)jquery焦點圖切換特效,在IE6這個瀏覽器兼容性問題上得到了和諧,兼容IE6,適用瀏覽器:IE6、IE7、IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗.相關(guān)代碼2013-08-08