限时优惠活动
亲爱的苦力吧用户,我们为了回馈新老用户一直以来的鼎力支持,即日起(2025-02-06至2025-03-06)凡是购买苦力吧VIP/充值K币的新老用户,都直接可获得买一送一的优惠馈赠。例如:购买一个月的VIP会员可直接获得两个月的VIP会员;充值100K币可直接获得200K币,以此类推!有任何疑问可联系在线客服,感谢各位用户对苦力吧素材的信任与厚爱,我们将一如既往的给大家上新更多优质的素材源码,祝大家开工大吉、工作顺利、心想事成。

jquery产品列表多行左右滚动特效代码

所属分类: 网页特效-UI滚动    2023-12-16 11:48:22

jquery产品列表多行左右滚动特效代码 ie兼容6
 查看演示  登录后下载 温馨提示
登录会员即可享受免费下载
 我要建站

jquery产品列表多行左右滚动特效代码(共5个文件)

    • index.html

使用方法

$(function(){
	linum = $('.mainlist li').length;//图片数量
	w = linum/2 * 232;//ul宽度
	$('.piclist').css('width', w + 'px');//ul宽度
	$('.swaplist').html($('.mainlist').html());//复制内容
	
	$('.og_next').click(function(){
		
		if($('.swaplist,.mainlist').is(':animated')){
			$('.swaplist,.mainlist').stop(true,true);
		}
		
		if($('.mainlist li').length>4){//多于4张图片
			ml = parseInt($('.mainlist').css('left'));//默认图片ul位置
			sl = parseInt($('.swaplist').css('left'));//交换图片ul位置
			if(ml<=0 && ml>w*-1){//默认图片显示时
				$('.swaplist').css({left: '928px'});//交换图片放在显示区域右侧
				$('.mainlist').animate({left: ml - 928 + 'px'},'slow');//默认图片滚动				
				if(ml==(w-928)*-1){//默认图片最后一屏时
					$('.swaplist').animate({left: '0px'},'slow');//交换图片滚动
				}
			}else{//交换图片显示时
				$('.mainlist').css({left: '928px'})//默认图片放在显示区域右
				$('.swaplist').animate({left: sl - 928 + 'px'},'slow');//交换图片滚动
				if(sl==(w-928)*-1){//交换图片最后一屏时
					$('.mainlist').animate({left: '0px'},'slow');//默认图片滚动
				}
			}
		}
	})
	$('.og_prev').click(function(){
		
		if($('.swaplist,.mainlist').is(':animated')){
			$('.swaplist,.mainlist').stop(true,true);
		}
		
		if($('.mainlist li').length>4){
			ml = parseInt($('.mainlist').css('left'));
			sl = parseInt($('.swaplist').css('left'));
			if(ml<=0 && ml>w*-1){
				$('.swaplist').css({left: w * -1 + 'px'});
				$('.mainlist').animate({left: ml + 928 + 'px'},'slow');				
				if(ml==0){
					$('.swaplist').animate({left: (w - 928) * -1 + 'px'},'slow');
				}
			}else{
				$('.mainlist').css({left: (w - 928) * -1 + 'px'});
				$('.swaplist').animate({left: sl + 928 + 'px'},'slow');
				if(sl==0){
					$('.mainlist').animate({left: '0px'},'slow');
				}
			}
		}
	});
	
	$('.goodlist').hover(function(){
		$('.exchange',this).show();
	},function(){
		$('.exchange',this).hide();
	}); 
});

站长提示:
1. 苦力吧素材官方QQ群:950875342
2. 平台上所有素材资源,需注册登录会员方能正常下载。
3. 会员用户积极反馈网站、素材资源BUG或错误问题,每次奖励2K币
4. PHP源码类素材,如需协助安装调试,或你有二次开发需求,可联系苦力吧客服。
5. 付费素材资源,需充值后方能下载,如有任何疑问可直接联系苦力吧客服
相关资源 / UI滚动

jquery页面视差滚动滑动卡片特效插件

一款单页滚动插件,允许用户像滑动一副卡片一样滚动页面。
  UI滚动
 6327  0

jquery可自定义控制的文本文字滚动插件

一款自定义控制的文字滚动插件,支持自定义:动态添加内容、隐藏指定元素、向上滚动、向下滚动等。
  UI滚动
 4313  0

jquery响应式3D旋转木马滑块插件

一款3D立体旋转木马插件,可自定义的滑块内容,设置透明背景,支持移动端触屏滑动,或点击左右箭头按钮进行旋转切换。
  UI滚动
 976  0

js响应式图文列表滚动滑块特效

一款响应式区块列表滚动插件,基于swiper实现的,支持移动端触摸滑块。
  UI滚动
 4136  0

评论数(0) 回复有机会获得K币 用户协议

^_^ 还没有人评论,快来抢个沙发!
😀
  • 😀
  • 😊
  • 😂
  • 😍
  • 😑
  • 😷
  • 😵
  • 😛
  • 😣
  • 😱
  • 😋
  • 😎
  • 😵
  • 😕
  • 😶
  • 😚
  • 😜
  • 😭
发表评论