首先非常感谢网友czqn8的无私分享,此作品是他刚写的,是一款简洁大气的左右图片滚动jquery特效,第一时间与大家分享,可以直接拿来使用,加了css3效果,大家好好利用哦。。。
核心代码如下:
$(function(){
var tLen = 0,
vNum = 4,
mNum = 1,
mTime = 500,
iShow = $(".show .itemshow ul"),
iItems = $(".show .itemshow ul li"),
mLen = iItems.eq(0).width() * mNum,
cLen = (iItems.length - vNum) * iItems.eq(0).width();
iShow.css({width:iItems.length*iItems.eq(0).width()+'px'});
//下一张
$(".show .next").on({
click:function(){
if(tLen < cLen){
if((cLen - tLen) > mLen){
iShow.animate({left:"-=" + mLen + "px"}, mTime);
tLen += mLen;
}else{
iShow.animate({left:"-=" + (cLen - tLen) + "px"}, mTime);
tLen += (cLen - tLen);
}
}
}
});
//上一张
$(".show .prev").on({
click:function () {
if(tLen > 0){
if(tLen > mLen){
iShow.animate({left: "+=" + mLen + "px"}, mTime);
tLen -= mLen;
}else{
iShow.animate({left: "+=" + tLen + "px"}, mTime);
tLen = 0;
}
}
}
})
});
效果如下:
如果您觉得本作品对您的学习有所帮助:
关键字:
网友czqn8 图片滚动 jquery特效