jQuery圖片輪播功能實(shí)例代碼
jquery 輪播圖代碼如下所示:
<html > <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>圖片輪播</title> <style> *{margin:0px;padding:0px;} .one{ float:left; position:relative; left:0px; top:0px; margin-left:10px; width:790px; height:340px; overflow:hidden; } .one ul li{ list-style:none; } .photo ul{ float:left; position:absolute; height:490px; left:0px; top:0px; } .photo ul li{ float:left; padding:0px; margin:0px; } .arrow span{ display:block; position:absolute; width:30px; height:60px; line-height:60px; text-align:center; background:rgba(0,0,0,0.2); z-index:1; font-size:20px; color:#fff; top:40%; cursor:pointer; display:none; } .arrow span:hover{ background:rgba(0,0,0,0.7); } .arrow .right{ right:0px; } .dot{ position:absolute; z-index:!; background:rgba(255,255,255,0.2); font-size:26px; bottom:15px; left:300px; border-radius:22px; } .dot ul{ margin:0px; padding:0px; } .dot ul li{ float:left; padding:0px; margin:0px; margin:0 5px; cursor:pointer; } </style> </head> <body> <div class="one"> <div> <div class="photo"> <ul> <li><img src="image/1.png" alt="1" /></li> <li><img src="image/2.png" alt="2" /></li> <li><img src="image/3.png" alt="3" /></li> <li><img src="image/4.png" alt="4" /></li> <li><img src="image/5.png" alt="5" /></li> <li><img src="image/6.png" alt="6" /></li> </ul> </div> <div class="arrow"><span class="iconfont left"></span> <span class="iconfont right"></span></div> <div class="dot"> <ul> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> <li>●</li> </ul> </div> </div> </div> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js" ></script> <script> $(document).ready(function(){ var ulWidth=$('.photo ul li').length*$('.photo ul li').eq(1).width(); $('.dot ul li').first().css('color','#db192a'); $('.photo ul').width(ulWidth); $('.photo,.arrow span').hover(function(){$('.arrow span').toggle()}) function jdshow(){ var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width(); $('.dot ul li').css('color','#fff'); if(index==$('.photo ul li').length-1){index=-1} $('.dot ul li').eq(index+1).css('color','#db192a'); if($('.photo ul').position().left==-(ulWidth-790)){ $('.photo ul').css('left','790px');//圖片寬度 $('.photo ul').clone().appendTo('.photo'); $('.photo ul:first').remove(); } $('.photo ul').animate({ left:'-=790px', },10); } setInterval(jdshow,2000); $('.arrow .right').click(function(){ jdshow(); }); $('.arrow .left').click(function(){ /*alert($('.jd-photo ul').position().left);*/ var index=-$('.photo ul').position().left/$('.photo ul li').eq(1).width(); $('.dot ul li').css('color','#fff'); $('.dot ul li').eq(index-1).css('color','#db192a'); if($('.photo ul').position().left==0){ $('.photo ul').css('left',-ulWidth); $('.photo ul').clone().appendTo('.photo'); $('.photo ul:first').remove(); } $('.photo ul').animate({ left:'+=790px', },10); }); $('.dot ul li').click(function(){ var index=$('.dot ul li').index(this); $('.photo ul').animate({ left:-index*790, },10); $('.dot ul li').css('color','#fff'); $(this).css('color','#db192a'); }); }) </script> </body> </html>
以上所述是小編給大家介紹的jQuery圖片輪播功能實(shí)例代碼,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)歡迎給我留言,小編會(huì)及時(shí)回復(fù)大家的!
相關(guān)文章
jquery trigger實(shí)現(xiàn)聯(lián)動(dòng)的方法
這篇文章主要介紹了jquery trigger實(shí)現(xiàn)聯(lián)動(dòng)的方法,結(jié)合實(shí)例形式分析了trigger的具體使用技巧,需要的朋友可以參考下2016-02-02JQuery的html(data)方法與<script>腳本塊的解決方法
在使用Jquery的html(data)方法執(zhí)行寫數(shù)據(jù)到Dom元素時(shí)遇到一個(gè)問(wèn)題:在data參數(shù)中包含script腳本塊的時(shí)候,html(data)方法的執(zhí)行結(jié)果與預(yù)期不符2010-03-03jQuery插件slick實(shí)現(xiàn)響應(yīng)式移動(dòng)端幻燈片圖片切換特效
jQuery插件slick是一款響應(yīng)式、適用于移動(dòng)設(shè)備觸摸屏、可滑動(dòng)顯示的jQuery幻燈片插件。該幻燈片插件可以設(shè)置多種顯示效果,可以自動(dòng)播放,是一款移動(dòng)優(yōu)先的jQuery幻燈片插件。2015-04-04一個(gè)背景云變換js特效 鼠標(biāo)移動(dòng)背景云變化
分享一個(gè)背景云變換js特效隨著鼠標(biāo)的移動(dòng),背景云會(huì)不斷的變化位置和形狀,感興趣的朋友可以研究下2012-12-12基于jquery的橫向滾動(dòng)條(滑動(dòng)條)
ASP.Net的GridView本身不帶滾動(dòng)條,可通過(guò)Panel實(shí)現(xiàn)。但是Windows自帶的橫向滾動(dòng)條只支持顯示在下方,為了使用方便,需要在上下方都顯示橫向滾動(dòng)條。2011-02-02jquery的attr方法禁用表單元素禁用輸入內(nèi)容
這篇文章主要介紹了通過(guò)jquery的attr方法來(lái)禁用表單元素禁輸入內(nèi)容,示例如下,需要的朋友可以參考參考2014-06-06基于Jquery+Ajax+Json的高效分頁(yè)實(shí)現(xiàn)代碼
分頁(yè)我相信大家存儲(chǔ)過(guò)程分頁(yè)已經(jīng)很熟悉了,ajax更是耳熟能詳了,更別說(shuō)我們的json,等等2011-10-10基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏
這篇文章主要介紹了基于jquery實(shí)現(xiàn)頁(yè)面滾動(dòng)時(shí)頂部導(dǎo)航顯示隱藏效果,當(dāng)頁(yè)面向下滾動(dòng)的時(shí)候,導(dǎo)航菜單動(dòng)態(tài)隱藏,頁(yè)面滾動(dòng)到頂部時(shí),導(dǎo)航菜單動(dòng)態(tài)顯示,淘寶也采用過(guò)此效果,感興趣的小伙伴們可以參考一下2015-11-11