热门关键字:
jquery > jquery插件 > jquery图片滚动 > 网友czqn8分享简洁大气的左右图片滚动jquery特效

网友czqn8分享简洁大气的左右图片滚动jquery特效

17435
所属分类:jquery图片滚动
发布时间:2014/12/5 22:37:55
下载量:1928
评论数:0
转载请自觉注明原文:http://www.jq-school.com/Detail.aspx?id=453

首先非常感谢网友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特效





如果您觉得本作品对您的学习有所帮助:支付鼓励



关键字:网友czqn8 图片滚动 jquery特效
  • 网友czqn8分享简洁大气的左右图片滚动jquery特效如果你喜欢学院的资源就下载吧,亲,谢谢!
  • 网友czqn8分享简洁大气的左右图片滚动jquery特效
  • 网友czqn8分享简洁大气的左右图片滚动jquery特效
  • 提示:如果网络问题无法下载,请多尝试几次,与 网站管理员联系 或 本站留言 !

声明: 本站内容均为网友原创或整理于互联网,版权归作品最初创作人,转载请注明(出处)原文链接,转载前请邮件至磐temdy@qq.com,一旦发现造成侵权行为,后果自负。。

友荐云推荐