以下是 jQuery两行列表滚动效果js代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery两行列表滚动效果</title>
<link href="css/lanrenzhijia.css" type="text/css" rel="stylesheet" />
</head>
<body>
<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 src="js/jquery.min.js"></script>
<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>
</body>
</html>
CSS代码(lanrenzhijia.css):
@charset "utf-8";*{margin:0;padding:0;list-style:none;}
body{font-size:12px;}
a{text-decoration:none;}
.scroll{width:960px;margin:0 auto;position:relative;overflow:hidden;background:#F1EEEB;}
.picbox{width:928px;height:290px;background:#fff;border:1px solid #DED7D1;overflow:hidden;position:relative;margin:15px;}
.picbox ul{height:285px;padding-top:5px;}
.piclist{position:absolute;left:0px;top:0px;}
.piclist li.goodlist{width:221px;margin:10px 0;padding:0px 5px;border-right:1px dotted #DED7D1;margin-right:-1px;float:left;}
.piclist li.goodlist img{width:75px;height:120px;}
.swaplist{position:absolute;left:-3000px;top:0px;}
.og_prev,.og_next{width:30px;height:60px;background:url(../images/btn.png) no-repeat;position:absolute;top:117px;z-index:99;cursor:pointer;}
.og_prev{background-position:0 0;left:0px;}
.og_prev:hover{background-position:0 -60px;}
.og_next{background-position:-30px 0;right:0px;}
.og_next:hover{background-position:-30px -60px;}
.goodlist img.pics{width:85px;height:135px;float:left;background:#fff url(../images/loading.gif) center center no-repeat;}
.goodlist dl{float:right;width:130px;overflow:hidden;}
.goodlist dl dt{}
.goodlist dl dt a.title{width:100%;height:22px;line-height:22px;display:block;color:#363636;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}
.goodlist dl dt span.en{width:100%;height:22px;line-height:22px;display:block;color:#666;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;overflow:hidden;}
.goodlist dl dt span.change-price{font-weight:bold;color:#D63C3C;padding-right:5px;}
.goodlist dl dt span.max-price{color:#999;text-decoration:line-through;}
.goodlist dl dt a.exchange{font-size:12px;padding:4px 10px;text-align:center;#padding-top:6px;#padding-bottom:2px;color:#fff;display:none;text-decoration:none;background:#C75151;float:left;border-radius:2px;}
.goodlist dl dt a.exchange:hover{background:#973434;}
.goodlist dl dt p{padding:5px 0;}
分享到QQ
分享到微博
微信扫一扫
