<html>横向的JavaScript图片滚动，左右可控制方向

2013-09-06 09:44:51 -0400

代码复制

<style type="text/css">
#rollBox *{padding:0;margin:0;}
.wrap{position:relative;width:735px;overflow:hidden;}
#rollBox{overflow:hidden;margin:0 50px;}
#rollList{float:left;overflow:hidden;zoom:1;margin-right:-3000px;}  /* float,margin-right为了横版排列 */
#rollList li{float:left;display:inline;margin:15px;}
#rollList img{display:block;border:1px solid #efefef;}
.rollMenu{position:absolute;width:35px;height:80px;font-size:70px;text-decoration:none;color:#6B90DA;text-align:center;}
#rollLeft{top:20px;left:0;}
#rollRight{top:20px;right:0;}
</style>
<div class="wrap">
<a onclick="scrollHori.start(this);" class="rollMenu" id="rollLeft" href="javascript:;">‹</a>
<a onclick="scrollHori.start(this);" class="rollMenu" id="rollRight" href="javascript:;">›</a>
<div id="rollBox">
<ul id="rollList">
<li>
<a href="#"><img height="95" width="95" src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_1.jpg" /></a>
</li>
<li>
<a href="#"><img height="95" width="95" src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_2.jpg" /></a>
</li>
<li>
<a href="#"><img height="95" width="95" src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_3.jpg" /></a>
</li>
<li>
<a href="#"><img height="95" width="95" src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_4.jpg" /></a>
</li>
<li>
<a href="#"><img height="95" width="95" src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_5.jpg" /></a>
</li>
<li>
<a href="#"><img height="95" width="95" src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_6.jpg" /></a>
</li>
<li>
<a href="#"><img height="95" width="95" src="http://www.veryhuo.com/uploads/common/images/sliehuo_net_600x400_7.jpg"/></a>
</li>
</ul>
</div>
<script type="text/javascript">
var $id=function(id){ return document.getElementById(id);}
var scrollHori={
locked:0,
vector:0,
start:function(thiso){
if (scrollHori.locked == 0){
if (thiso.id == 'rollLeft'&&$id('rollBox').scrollLeft!=0) {
scrollHori.vector = -5;
scrollHori.scroll();
}
if (thiso.id =='rollRight'&&$id('rollBox').scrollLeft!=($id('rollList').offsetWidth-$id('rollBox').offsetWidth)){
scrollHori.vector = 5;
scrollHori.scroll();
}
}
},
scroll:function(){
var step=0;
var size=$id('rollList').offsetWidth/$id('rollList').getElementsByTagName('li').length;
play = setInterval(function(){
if(size>step){
$id('rollBox').scrollLeft+=scrollHori.vector;
step+=Math.abs(scrollHori.vector);
scrollHori.locked = 1;
}
else{
scrollHori.stop();
}
}, 5);
},
stop:function(){
if (window.play) {
clearInterval(window.play);
scrollHori.locked = 0;
}
}
}
</script>
</div>

代码说明：
横向的JavaScript图片滚动，左右可控制方向，当鼠标不点击的时候它会自动滚动，鼠标点击向左它则向左，完全由你控制，研究一下代码，你还可对代码进行修改，以适应你的网站需要。。
代码演示

«Newer Older»

Back to home

Subscribe | Register | Login | N