关于滚动效果
<!DOCTYPE html>
<html>
<head>
<link href="http://news.qq.com/css/2012/pcss20130106.css" rel="stylesheet" media="screen" />
<style type="text/css">
.s3_mask li { float:left;display:inline;}
.s3_mask p { position:absolute; left:0; bottom:0; height:29px; line-height:29px; background:rgba(0, 0, 0, 0.5); padding-right:52px; width:236px;filter: progid:DXImageTransform.Microsoft.gradient( GradientType = 0,startColorstr = '#50000000',endColorstr = '#50000000') \9}
</style>
<script src="http://mat1.gtimg.com/joke/js/comm/Qfast.js" type="text/javascript"></script>
<script type="text/javascript">
Qfast.add('common',{path:"http://mat1.gtimg.com/news/base2011/ued_common.js",type:"js"});//如果已经引用请删除此句
Qfast.add('scroll',{path:"http://news.qq.com/base2011/ued_scroll.js",type:"js",requires: ['common']});
</script>
</head>
<body>
<div class="mod mtf1">
<div class="bd">
<div class="bodybox" id="cardBody3">
<div class="tbody">
<div class="s3">
<div class="sm_prev" id="s3_sm_prev"></div>
<div class="s3_mask" id="s3_s3_mask">
<ul>
<li bossZone="yztp4">
<a href="http://news.qq.com/photon/selective/91.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/167/58/1429/92935682.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/91.htm" target="_blank" >一周图片精选(9.21-9.27)</a>
</p>
</li>
<li bossZone="yztp1">
<a href="http://news.qq.com/photon/selective/90.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/166/58/1429/92935681.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/90.htm" target="_blank" >一周图片精选(9.14-9.20)</a>
</p>
</li>
<li bossZone="yztp2">
<a href="http://news.qq.com/photon/selective/89.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/93/4/1418/92206563.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/89.htm" target="_blank" >一周精选(9.7-9.13)</a>
</p>
</li>
<li bossZone="yztp3">
<a href="http://news.qq.com/photon/selective/88.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/71/187/1412/91863056.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/88.htm" target="_blank" >一周图片精选(8.31-9.6)</a>
</p>
</li>
<li bossZone="yztp4">
<a href="http://news.qq.com/photon/selective/87.htm" target="_blank" class="pic"><img src="http://img1.gtimg.com/news/pics/hv1/176/222/1406/91481936.jpg" style="height:205px;width:288px;"/></a>
<p>
<a href="http://news.qq.com/photon/selective/87.htm" target="_blank" >一周图片精选(8.24-8.30)</a>
</p>
</li>
</ul>
</div>
<div class="sm_next" id="s3_sm_next"></div>
</div>
</div>
</div>
</div>
<script language="javascript">
Qfast(false,'scroll',function(){
var Scroll = new uedScroll();
Scroll.scrollContId = "s3_s3_mask";//主体区域
Scroll.scrollSplit = {mytag:"li",myclass:""};//滚动单元和class名
Scroll.arrLeftId = "s3_sm_prev";//左按钮
Scroll.arrRightId = "s3_sm_next";//右按钮
Scroll.sSliceIndex = 1;//每次滚动单元的个数
Scroll.sDir = 1;//滚动方向:1为左右、2为上下
Scroll.nStep = 10;//速度，越大越快
Scroll.nType = 2;//滚动类型:1为返回式、2为循环式、3在循环式自动滚动时设置
Scroll.autoPlay = true;//是否自动滚动
Scroll.autoPlayTime = 3;//自动滚动间隔时间（秒） 设置为0，则不停顿
Scroll.init();
})
</script>
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<BODY>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
#imgbox{
width:250px;
height:250px;
border:1px solid #ccc;
position:relative;
overflow:hidden;
}
#imgbox img{ width:250px;
height:250px; border:none }
#imgbox a{
width:250px;
height:250px;
position: absolute;
top:0;
left:0;
display:none;
}
#imgbox p{
position: absolute;
padding:0px;
bottom:0px;
margin: 0px;
background: #333;
display: block;
width:100%;
color:#fff;
filter:alpha(opacity=50);
opacity: 0.5;
}
#imgbox .act{ display:block; z-index:9; }
.infoBar{ text-align:center; width:250px; }
</style>
<div id="imgbox">
<a href="?" target="_blank" class="act" >
<img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=8eb4edf74afbfbeddc59317c48f1f78e/e824b899a9014c08ba1d546d0b7b02087af4f4d0.jpg" />
<p>123</p>
</a>
<a href="?" target="_blank" >
<img src="http://e.hiphotos.baidu.com/pic/w%3D230/sign=89d9aee991ef76c6d0d2fc28ad17fdf6/fc1f4134970a304e491bdc32d0c8a786c9175c38.jpg" />
<p>34567</p>
</a>
<a href="?" target="_blank" >
<img src="http://c.hiphotos.baidu.com/pic/w%3D230/sign=0b99fb4fd1a20cf44690f9dc46084b0c/9825bc315c6034a80cc4c449ca134954082376d7.jpg" />
<p>567</p>
</a>
<a href="?" target="_blank" >
<img src="http://g.hiphotos.baidu.com/pic/w%3D230/sign=501967d6b8389b5038ffe751b537e5f1/18d8bc3eb13533fae443eee6a9d3fd1f40345b04.jpg" />
<p>7890</p>
</a>
</div>
<div class="infoBar" ><a href="#" id="bntPrev" ><</a> <a id="imgInfo" ></a> <a href="#" id="bntNext" >></a> </div>
<script>
function PlayImg(id,time,callBack){
var ii=0,me=this;
var imgs=$(id+' a'),L=imgs.length,tir,w=$(id).width();
function fn(t){
var t=(t
[解决办法]
1)==1?1:L-1;
var n=$(imgs[(ii+t)%L]);
n.show().css({left:0,opacity:1 });
clearTimeout(tir);
$(imgs[ii]).animate({ left:w*(t==1?1:-1),opacity:0 },800,function(){
$(this).removeClass('act').hide();
n.addClass('act');
ii= (ii+t )%L;
callBack&&callBack.call(me,ii,L);
tir=setTimeout(fn,time);
});
}
imgs.hover(function(){
clearTimeout(tir);
},function(){clearTimeout(tir); tir=setTimeout(fn,time)})
callBack&&callBack.call(me,ii,L);
tir=setTimeout(fn,time);
this.next=function(){
$(imgs[ii]).stop();
fn(1);
}
this.prev=function(){
$(imgs[ii]).stop();
fn(-1);
}
}
$(function(){
var play=new PlayImg('#imgbox',3000,function(i,L){
$('#imgInfo').html( (i+1)+'/'+L )
});
$('#bntNext').click(function(){ play.next() });
$('#bntPrev').click(function(){ play.prev() });
})
</script>
</BODY>
</HTML>
