使用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)文章
BootStrap glyphicon圖標(biāo)無(wú)法顯示的解決方法
如果不注意bootstrap引入css和fonts的規(guī)范,則可能會(huì)導(dǎo)致bootstrap 在顯示glyphicon圖標(biāo)時(shí)無(wú)法正常顯示,顯示為方框。該怎么解決呢?下面小編給大家解答下2016-09-09
jquery實(shí)現(xiàn)刷新隨機(jī)變化樣式特效(tag標(biāo)簽樣式)
本文主要介紹了tag標(biāo)簽隨機(jī)多彩變化的超鏈接樣式,使用JQ+DIV+CSS實(shí)現(xiàn)刷新隨機(jī)變化樣式特效。具有很好的參考價(jià)值,下面跟著小編一起來(lái)看下吧2017-02-02
jQuery動(dòng)畫(huà)效果實(shí)現(xiàn)圖片無(wú)縫連續(xù)滾動(dòng)
這篇文章主要為大家介紹了jQuery動(dòng)畫(huà)效果實(shí)現(xiàn)圖片無(wú)縫連續(xù)滾動(dòng),實(shí)現(xiàn)類(lèi)似連續(xù)不間斷的滾動(dòng)廣告位,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-01-01
jQuery實(shí)現(xiàn)簡(jiǎn)單的圖片查看器
這篇文章主要介紹了jQuery實(shí)現(xiàn)簡(jiǎn)單的圖片查看器的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2015-12-12
JQuery處理json與ajax返回JSON實(shí)例代碼
json數(shù)據(jù)是一種經(jīng)型的實(shí)時(shí)數(shù)據(jù)交互的數(shù)據(jù)存儲(chǔ)方法,使用到最多的應(yīng)該是ajax與json配合使用了,下面我來(lái)給大家介紹jquery處理json數(shù)據(jù)方法2014-01-01
推薦6款基于jQuery實(shí)現(xiàn)圖片效果插件
這里給大家匯總了一下個(gè)人比較常用的基于jQuery實(shí)現(xiàn)的圖片特效的插件,個(gè)人感覺(jué)非常不錯(cuò),這里分享給大家2014-12-12
jqeury eval將字符串轉(zhuǎn)換json的方法
這個(gè)方法是一個(gè)將DataTable轉(zhuǎn)換成字符串的方法 。2011-01-01
jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果示例【測(cè)試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)DIV響應(yīng)鼠標(biāo)滑過(guò)由下向上展開(kāi)效果,涉及jQuery基于事件響應(yīng)結(jié)合stop與animate方法控制頁(yè)面元素屬性動(dòng)態(tài)變換相關(guān)操作技巧,需要的朋友可以參考下2018-04-04
jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法
這篇文章主要介紹了jQuery縱向?qū)Ш讲藛涡Ч麑?shí)現(xiàn)方法,可實(shí)現(xiàn)類(lèi)似淘寶首頁(yè)縱向菜單的顯示效果,涉及jQuery鼠標(biāo)響應(yīng)及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2016-12-12

