使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換
使用jQuery實(shí)現(xiàn)點(diǎn)擊左右滑動(dòng)切換特效:
HTML代碼如下:
<!--整體背景div--> <div class="warp"> <!--中間內(nèi)容div--> <div class="divContent"> <div class="content"> <ul class="contentUl"> <li> <img src="/JS1/img/1.jpg" /> <span>生命如歌,春天似夢(mèng) </span> <hr /> <p>生命如歌,春天似夢(mèng),初春更是如詩(shī)如畫(huà)。春似花季靚女,讓人悸動(dòng),春似那雍容少婦,令人憧憬</p> </li> <li id="second"> <img src="/JS1/img/2.jpg" /> <span>如花的季節(jié),贊揚(yáng) </span> <hr /> <p>一切的生命力開(kāi)始復(fù)蘇,溫暖如我,正是如花的季節(jié),不是嗎?</p> </li> <li> <img src="/JS1/img/3_1.jpg" /> <span>夢(mèng)想,不休不止</span> <hr /> <p>畏懼忍受痛苦比忍受痛苦本身更加糟糕。沒(méi)有一個(gè)心靈在追逐它的夢(mèng)想時(shí)會(huì)忍受痛苦。</p> </li> <li> <img src="/JS1/img/4.jpg" /> <span>時(shí)間在葉子的擺動(dòng)里</span> <hr /> <p>時(shí)間會(huì)消磨一切的,她會(huì)讓我們忘記的。突然想:如果我們忘記了時(shí)間,是不是想忘掉的就都能忘掉。</p> </li> <li> <img src="/JS1/img/5.jpg" /> <span>異鄉(xiāng)的海韻,落日的余輝</span> <hr /> <p>每個(gè)人或許都有一個(gè)愿望,希望在某年某月某天可以和相愛(ài)的人牽手漫步在夕陽(yáng)西下,落日余暉的海灘中,細(xì)數(shù)彼此生活的點(diǎn)點(diǎn)滴滴。</p> </li> <li> <img src="/JS1/img/6.jpg" /> <span>城市夜,一個(gè)靜謐的夜</span> <hr /> <p>城市夜,一個(gè)靜謐的夜。城市里,寒風(fēng)瑟瑟。酒吧燈紅酒綠,這,才是夜市的開(kāi)始。</p> </li> </ul> </div> <!--向左按鈕--> <div class="leftBtn"><img src="/JS1/img/left.png" /></div> <!--向右按鈕--> <div class="rightBtn"><img src="/JS1/img/right.png" /></div> </div> </div>
js代碼如下:
$(document).ready(function(){ //向左按鈕點(diǎn)擊事件 var index = 0; var liLen; $(".leftBtn").click(function(){ index++; liLen = $(".content ul.contentUl li").length; //目前長(zhǎng)度返回值為6 if(index >= 4) { $(".content ul.contentUl").stop(); alert("已經(jīng)到達(dá)最后一頁(yè)!"); index = 3; }else{ if(index == 1) { $(".content ul.contentUl").animate({left:-index*330},700); }else{ $(".content ul.contentUl").animate({left:-index*305},700); } } }); //向右按鈕點(diǎn)擊事件 $(".rightBtn").click(function(){ if(index == 0) { $(".content ul.contentUl").stop(); alert("這是第一頁(yè),不能再往前翻了!"); }else{ index--; if(index == 0) { $(".content ul.contentUl").animate({left:-40},700); }else{ $(".content ul.contentUl").animate({left:-index*310},700); } } }); });
以上所述是小編給大家介紹的使用jQuery實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊左右按鈕滑動(dòng)切換,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- jquery實(shí)現(xiàn)點(diǎn)擊左右按鈕切換圖片
- 基于jquery實(shí)現(xiàn)左右按鈕點(diǎn)擊的圖片切換效果
- jquery帶有索引按鈕且自動(dòng)輪播切換特效代碼分享
- jQuery幻燈片特效代碼分享 鼠標(biāo)滑過(guò)按鈕時(shí)切換(2)
- Jquery幻燈片特效代碼分享?鼠標(biāo)點(diǎn)擊按鈕時(shí)切換(1)
- 基于jquery插件制作左右按鈕與標(biāo)題文字圖片切換效果
- jquery實(shí)現(xiàn)隱藏與顯示動(dòng)畫(huà)效果/輸入框字符動(dòng)態(tài)遞減/導(dǎo)航按鈕切換
- jquery仿QQ商城帶左右按鈕控制焦點(diǎn)圖片切換滾動(dòng)效果
- jQuery實(shí)現(xiàn)簡(jiǎn)單的按鈕顏色變化
相關(guān)文章
jQuery動(dòng)畫(huà)效果animate和scrollTop結(jié)合使用實(shí)例
animate是jq的一個(gè)特效的函數(shù)方法,animate() 方法執(zhí)行 CSS 屬性集的自定義動(dòng)畫(huà)。該方法通過(guò)CSS樣式將元素從一個(gè)狀態(tài)改變?yōu)榱硪粋€(gè)狀態(tài)。2014-04-04jQuery學(xué)習(xí)筆記之 Ajax操作篇(三) - 過(guò)程處理
對(duì)于 jQuery 通過(guò) Ajax 方式傳遞數(shù)據(jù)時(shí),我們還可以在過(guò)程中進(jìn)行一定的處理,以便達(dá)到我們的需求。2014-06-06asp.net網(wǎng)站開(kāi)發(fā)中用jquery實(shí)現(xiàn)滾動(dòng)瀏覽器滾動(dòng)條加載數(shù)據(jù)(類似于騰訊微博)
騰訊微博提供兩種加載數(shù)據(jù)的方式,一種是分頁(yè),一種是滾動(dòng)瀏覽器滾動(dòng)條加載數(shù)據(jù),分頁(yè)功能我想大家都做得太多了,今天我與大家分享一下我用滾動(dòng)條滾動(dòng)加載數(shù)據(jù)2012-03-03ajax無(wú)刷新動(dòng)態(tài)調(diào)用股票信息(改良版)
今日閑來(lái)無(wú)事,把上次寫(xiě)的代碼稍微改了改。增加了動(dòng)態(tài)追加和刪除股票信息的功能(代碼基于jquery運(yùn)行:http://jquery.com/) 。由于對(duì)Ajax技術(shù)的認(rèn)識(shí)還只是在初級(jí)階段,總覺(jué)得這么些有點(diǎn)別扭,希望大蝦能夠指點(diǎn)一二。2008-11-11Jquery中增加參數(shù)與Json轉(zhuǎn)換代碼
有時(shí)候,我們需要進(jìn)一步轉(zhuǎn)化為json表達(dá)式,參考Ext中的Ext.urlDecode函數(shù),我們可以實(shí)現(xiàn)一個(gè)相應(yīng)的jquery中使用的函數(shù)。2009-11-11jquery easyui 對(duì)于開(kāi)始時(shí)間小于結(jié)束時(shí)間的判斷示例
對(duì)于開(kāi)始時(shí)間小于結(jié)束時(shí)間的判斷可以參考,jquery easyui里的ValidateBox進(jìn)行判斷,需要的朋友可以參考下2014-03-03jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單聊天室,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-02-02jquery $.each 和for怎么跳出循環(huán)終止本次循環(huán)
如何在jquery 中的循環(huán)中終止本次循環(huán)或者跳出循環(huán)呢?經(jīng)搜索發(fā)現(xiàn)個(gè)不錯(cuò)的方法,大家不妨參考下,希望對(duì)大家有所幫助2013-09-09