基于jQuery實(shí)現(xiàn)滾動(dòng)切換效果
仿鋒利的Jquery案例做的一個(gè)滾動(dòng)切換效果,供大家參考,具體內(nèi)容如下
效果如下圖:
前臺(tái)HTML代碼如下:
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>滾動(dòng)圖</title> <link rel="stylesheet" type="text/css" href="css/RollControl.css" /> <script type="text/javascript" src="script/jquery-1.8.3.js"></script> <script type="text/javascript"> $(function () { var page = 1; var i = 4; var $v_trends = $("#view_menu_trends").find("li"); $v_trends.eq(0).addClass('currentTrends');//默認(rèn)第一個(gè)點(diǎn)選中 $(".next").click(function () { var $parent = $("#view_menu"); var $v_content = $("#view_content");//外圍width var $v_show = $("#view_content_fixed");// var v_width = $v_content.width(); var len = $v_content.find('li').length; var page_count = Math.ceil(len / i);//所有的圖片數(shù)/版面數(shù)=總頁(yè)數(shù) if (!$v_show.is(":animated")) { if (page == page_count) { $v_show.animate({ left: '0px' }, 'slow');//如果超過(guò)總頁(yè)數(shù) 那么就跳回第一頁(yè) page = 1; } else { $v_show.animate({ left: '-=' + v_width }, 'slow'); page++; } $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends'); } }); $(".pre").click(function () { var $parent = $("#view_menu"); var $v_content = $("#view_content");//外圍width var $v_show = $("#view_content_fixed");// var v_width = $v_content.width(); var len = $v_content.find('li').length; var page_count = Math.ceil(len / i);//所有的圖片數(shù)/版面數(shù)=總頁(yè)數(shù) if (!$v_show.is(":animated")) {//判斷是否是動(dòng)畫(huà)狀態(tài) if (page == 1) { $v_show.animate({ left: '-=' + (page_count - 1) * v_width + "px" }, 'slow');//到了第一頁(yè)那么跳轉(zhuǎn)到最后一頁(yè) page = page_count; } else { $v_show.animate({ left: '+=' + v_width }, 'slow'); page--; } $v_trends.removeClass('currentTrends').eq(page - 1).addClass('currentTrends'); } }); }); </script> </head> <body> <div> <div id="view_menu"> <div id="view_menu_title"><span>熱播電視劇</span></div> <div id="view_menu_trends"> <ul> <li>●</li> <li>●</li> <li>●</li> </ul> </div> <div id="view_menu_control"> <span> <img class="pre" src="Rollpic/left_arrow.png" /></span> <span> <img class="next" src="Rollpic/right_arrow.png" /></span> </div> </div> <div id="view_content"> <div id="view_content_fixed"> <ul> <li> <div> <img src="Rollpic/1.jpg" /></div> <span></span></li> <li> <div> <img src="Rollpic/2.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/3.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/4.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/5.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/6.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/7.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/8.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/9.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/10.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/11.jpg" /> </div> <span></span></li> <li> <div> <img src="Rollpic/12.jpg" /> </div> <span></span></li> </ul> </div> </div> </div> </body> </html>
RollControl.css代碼如下:
body { margin: 0px; padding: 0px; } #view_menu { width: 600px; height: 30px; line-height: 30px; cursor: default; } #view_menu_title { float: left; font-family: 'Microsoft YaHei'; width: 150px; text-align: center; } #view_menu_trends { float: left; line-height: 30px; color: #99CC99; font-size: 10px; } .currentTrends { color: #009933; } #view_menu_trends ul { list-style: none; margin: 0px; padding: 0px; } #view_menu_trends ul li { text-align: center; float: left; width: 15px; } #view_menu_control { float: left; width: 100px; height: 30px; text-align: center; } #view_menu_control img { width: 25px; height: 25px; line-height: 30px; cursor: pointer; } #view_content { width: 548px; height: 178px; position: relative; overflow: hidden; border: 1px solid #CCCCCC; } #view_content_fixed { position: absolute; width: 2500px; } #view_content_fixed img { cursor: pointer; } #view_content ul { margin: 0px; position: absolute; padding: 0px; } #view_content ul li { margin: 0px; padding: 0px; float: left; padding: 8px; list-style: none; display: inline; }
.view_content_fixed下的SPAN標(biāo)簽是為了加標(biāo)題的
效果圖如下:
還有兩個(gè)地方?jīng)]有細(xì)化,第一個(gè)就是
這個(gè)動(dòng)態(tài)點(diǎn)點(diǎn)擊的時(shí)候也可以切換頁(yè)面,第二個(gè)
左右切換按鈕,可以添加按壓效果,點(diǎn)擊的時(shí)候取深色圖片。
好了,大體的效果就這樣,細(xì)節(jié)自己去玩吧,希望自己能堅(jiān)持寫(xiě)下去,從小案例到大案例,好好學(xué)習(xí)!
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- jQuery實(shí)現(xiàn)Tab菜單滾動(dòng)切換的方法
- jQuery圖片輪播滾動(dòng)切換代碼分享
- jQuery實(shí)現(xiàn)滾動(dòng)切換的tab選項(xiàng)卡效果代碼
- jQuery實(shí)現(xiàn)的圖文高亮滾動(dòng)切換特效實(shí)例
- jQuery插件multiScroll實(shí)現(xiàn)全屏鼠標(biāo)滾動(dòng)切換頁(yè)面特效
- jQuery插件Elastislide實(shí)現(xiàn)響應(yīng)式的焦點(diǎn)圖無(wú)縫滾動(dòng)切換特效
- jQuery bxCarousel實(shí)現(xiàn)圖片滾動(dòng)切換效果示例代碼
- 基于Jquery實(shí)現(xiàn)的一個(gè)圖片滾動(dòng)切換
- 簡(jiǎn)短幾句jquery代碼的實(shí)現(xiàn)一個(gè)圖片向上滾動(dòng)切換
- jquery 圓形旋轉(zhuǎn)圖片滾動(dòng)切換效果
相關(guān)文章
解決jQuery ajax請(qǐng)求在IE6中莫名中斷的問(wèn)題
本文主要介紹jQuery ajax請(qǐng)求在IE6中莫名中斷問(wèn)題的解決方法,有需要的朋友可以參考一下。2016-06-06jquery validation驗(yàn)證身份證號(hào),護(hù)照,電話號(hào)碼,email(實(shí)例代碼)
jquery validation驗(yàn)證身份證號(hào),護(hù)照,電話號(hào)碼,email(實(shí)例代碼)。需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2013-11-11jquery dataTable 獲取某行數(shù)據(jù)
本篇文章主要介紹了jquery dataTable 獲取某行數(shù)據(jù)的相關(guān)知識(shí),具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-05-05Jquery實(shí)現(xiàn)跨域異步上傳文件總結(jié)
本篇文章主要介紹了Jquery實(shí)現(xiàn)跨域異步上傳文件總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-02-02jquery插件實(shí)現(xiàn)圖片對(duì)比
這篇文章主要為大家詳細(xì)介紹了jquery插件實(shí)現(xiàn)圖片對(duì)比,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-04-04淺析jquery與checkbox的checked屬性的問(wèn)題
下面小編就為大家?guī)?lái)一篇淺析jquery與checkbox的checked屬性的問(wèn)題。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考,一起跟隨小編過(guò)來(lái)看看吧2016-04-04基于jQuery的讓非HTML5瀏覽器支持placeholder屬性的代碼
寫(xiě)了一小段代碼讓非HTML5瀏覽器支持placeholder屬性。零配置零css支持IE62011-05-05基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果
這篇文章主要介紹了基于jQuery和CSS3實(shí)現(xiàn)APPLE TV海報(bào)視差效果,需要的朋友可以參考下2017-06-06