利用jQuery实现两行列表滚动切换效果



40 156 53



特效描述:利用jQuery实现 两行列表 滚动切换,利用jQuery实现两行列表滚动切换效果

代码结构

1. 引入CSS

<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />

2. 引入JS

<script src="js/jquery.min.js"></script>

3. HTML代码

<br>
<!-- 左右滚动部分 begin -->
	<div class="scroll">
	<div class="picbox">
		<ul class="piclist mainlist">
			 <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                     <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                     <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                     <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                     <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                     <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                    <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
                     <li class="goodlist">
                    	<a href="#" target="_blank" style="overflow:hidden; display:block; float:left;"><img src="images/pic.jpg" class="pics" /></a>
                        <dl>
                        	<dt>
                            	<a href="#" target="_blank" class="title">巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒巴维兰麦芽奶油利口酒</a>
                                <span class="en">Bvland Malt Cream</span>
                                <p>换购价:<span class="change-price">¥100</span><span class="max-price">¥366</span></p>
                                <p><a href="javascript:;" class="exchange">换购</a></p>
                            </dt>
                        </dl>
                    </li>
		</ul>
        <ul class="piclist swaplist"></ul>
	</div>
	<div class="og_prev"></div>
	<div class="og_next"></div>
</div>
<!-- 左右滚动部分 end -->
<script>
$(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();
	}); 
});
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动条 页面滚动 滚动插件 滚动条插件 滚动条美化 滚动切换 滚动条切换 滑动选项卡 滑动切换 自动滚动图片轮播 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 切换按钮 表单 表单美化 表单插件 表单美化插件 滚动切换 滚动条切换 列表切换 翻页切换 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到