利用jQuery實現兩行列表滾動切換效果



45 176 59



特效描述:利用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

加群請備注:從官網了解到

老夫子电子