作者:恋是一种潮流 | 来源:互联网 | 2022-09-07 21:07
使用jQuery实现点击左右滑动切换特效:
HTML代码如下:
-
生命如歌,春天似梦
生命如歌,春天似梦,初春更是如诗如画。春似花季靓女,让人悸动,春似那雍容少妇,令人憧憬
-
如花的季节,赞扬
一切的生命力开始复苏,温暖如我,正是如花的季节,不是吗?
-
梦想,不休不止
畏惧忍受痛苦比忍受痛苦本身更加糟糕。没有一个心灵在追逐它的梦想时会忍受痛苦。
-
时间在叶子的摆动里
时间会消磨一切的,她会让我们忘记的。突然想:如果我们忘记了时间,是不是想忘掉的就都能忘掉。
-
异乡的海韵,落日的余辉
每个人或许都有一个愿望,希望在某年某月某天可以和相爱的人牵手漫步在夕阳西下,落日余晖的海滩中,细数彼此生活的点点滴滴。
-
城市夜,一个静谧的夜
城市夜,一个静谧的夜。城市里,寒风瑟瑟。酒吧灯红酒绿,这,才是夜市的开始。
js代码如下:
$(document).ready(function(){
//向左按钮点击事件
var index = 0;
var liLen;
$(".leftBtn").click(function(){
index++;
liLen = $(".content ul.contentUl li").length; //目前长度返回值为6
if(index >= 4)
{
$(".content ul.contentUl").stop();
alert("已经到达最后一页!");
index = 3;
}else{
if(index == 1)
{
$(".content ul.contentUl").animate({left:-index*330},700);
}else{
$(".content ul.contentUl").animate({left:-index*305},700);
}
}
});
//向右按钮点击事件
$(".rightBtn").click(function(){
if(index == 0)
{
$(".content ul.contentUl").stop();
alert("这是第一页,不能再往前翻了!");
}else{
index--;
if(index == 0)
{
$(".content ul.contentUl").animate({left:-40},700);
}else{
$(".content ul.contentUl").animate({left:-index*310},700);
}
}
});
});
以上所述是小编给大家介绍的使用jQuery实现鼠标点击左右按钮滑动切换,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!