<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,ul,li,body{margin:0px;padding:0px;list-style:none;}
.bo{
margin:50px;
position: relative;
width:422px;
height:144px;
background: #f00;
overflow:hidden;
}
.bo ul{
width:420px;
height:140px;
position: absolute;
left:0px;
right:0px;
}
.bo ul li{
width:120px;
padding:5px;
margin:5px;
float:left;
}
.bo ul li img{
width:120px;
height:120px;
}
.boh{
margin:50px;
position: relative;
width:140px;
height:420px;
background: #f00;
overflow:hidden;
}
.boh ul{
width:140px;
height:420px;
position: absolute;
left:0px;
right:0px;
}
.boh ul li{
width:120px;
height:120px;
padding:5px;
margin:5px;
float:left;
}
.boh ul li img{
width:120px;
height:120px;
}
</style>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
window.onload=function(){
/* var speed=-1;
var fx="left"; //left right top down
var up =document.getElementById("up");
var down=document.getElementById("down");
var left =document.getElementById("left");
var right =document.getElementById("right");
var res=document.getElementById("res");
var oDiv =document.getElementById("lbq");
var liWidth=getObjSize(oDiv.getElementsByTagName("li")[0]).width;
var oUl=oDiv.getElementsByTagName("ul")[0];
oUl.innerHTML+=oUl.innerHTML;
var liNumber=oDiv.getElementsByTagName("li").length;
oUl.style.width=liWidth*liNumber+"px";
oUl.style.position="absolute";
oUl.timer=startMove(oUl,speed);
//oDiv.innerHTML="<div style='position: relative;'>"+oDiv.innerHTML+"</div>";
left.onclick=function(){
fx="left";
speed=-Math.abs(speed);
}
right.onclick=function(){
fx="right";
speed=Math.abs(speed);
}
oDiv.onmouseover=function(){
clearInterval(oUl.timer);
}
oDiv.onmouseout=function(){
oUl.timer=startMove(oUl,speed);
}
function startMove(obj){
clearInterval(obj.timer);
var fxLeftOrRight=0;
return setInterval(function(){
switch(fx){
case "left":
if(obj.offsetLeft<=-liWidth*liNumber/2){
obj.style.left="0px";
}
break;
case "right":
if(obj.offsetLeft>0){
obj.style.left=-(liWidth*liNumber/2)+"px";
}
break;
}
obj.style.left=(obj.offsetLeft+speed)+"px";
},30);
}*/
// var oUl=document.getElementsByTagName("ul")[0];
// var scrollLength=oUl.childNodes.length;
//用tagName把_val 包含起来
/*function warp(tagName,_val,cssObj){
if(cssObj){
}else{
}
_val=_val+"</"+tagName+">";
}*/
//song("#lbq").scroll("ul"); //左滚动
song("#lbq").scroll("ul",{speed:5,fx:"left",wait:3,"scrollNum":2}); //左滚动
song("#lbq2").scroll("ul",{speed:1,fx:"right"}); //左滚动
song("#lbq3").scroll("ul",{speed:1,fx:"bottom"}); //下滚动
song("#lbq4").scroll("ul",{speed:1,fx:"top"}); //上滚动
song("#lbq5").scroll("ul",{speed:1,fx:"bottom"}); //左滚动
song("#lbq6").scroll("ul",{speed:1,fx:"top"}); //左滚动
}
</script>
</head>
<body>
<div class="bo" id="lbq">
<ul>
<li>
<img src="images/1.jpg">
</li>
<li>
<img src="images/2.jpg">
</li>
<li>
<img src="images/3.jpg">
</li>
<li>
<img src="images/4.jpg">
</li>
<li>
<img src="images/5.jpg">
</li>
<li>
<img src="images/6.jpg">
</li>
</ul>
</div>
<hr>
<div class="bo" id="lbq2">
<ul>
<li>
<img src="images/1.jpg">
</li>
<li>
<img src="images/2.jpg">
</li>
<li>
<img src="images/3.jpg">
</li>
<li>
<img src="images/4.jpg">
</li>
<li>
<img src="images/5.jpg">
</li>
<li>
<img src="images/6.jpg">
</li>
</ul>
</div>
<hr>
<div class="boh" id="lbq3">
<ul>
<li>
<img src="images/1.jpg">
</li>
<li>
<img src="images/2.jpg">
</li>
<li>
<img src="images/3.jpg">
</li>
<li>
<img src="images/4.jpg">
</li>
<li>
<img src="images/5.jpg">
</li>
<li>
<img src="images/6.jpg">
</li>
</ul>
</div>
<hr>
<div class="boh" id="lbq4">
<ul>
<li>
<img src="images/1.jpg">
</li>
<li>
<img src="images/2.jpg">
</li>
<li>
<img src="images/3.jpg">
</li>
<li>
<img src="images/4.jpg">
</li>
<li>
<img src="images/5.jpg">
</li>
<li>
<img src="images/6.jpg">
</li>
</ul>
</div>
<hr>
<div class="boh" id="lbq5" style="margin-bottom: 0px;">
<ul>
<li>
<img src="images/1.jpg">
</li>
<li>
<img src="images/2.jpg">
</li>
<li>
<img src="images/3.jpg">
</li>
<li>
<img src="images/4.jpg">
</li>
<li>
<img src="images/5.jpg">
</li>
<li>
<img src="images/6.jpg">
</li>
</ul>
</div>
<div class="boh" id="lbq6" style="margin-top: 0px;">
<ul>
<li>
<img src="images/1.jpg">
</li>
<li>
<img src="images/2.jpg">
</li>
<li>
<img src="images/3.jpg">
</li>
<li>
<img src="images/4.jpg">
</li>
<li>
<img src="images/5.jpg">
</li>
<li>
<img src="images/6.jpg">
</li>
</ul>
</div>
</body>
</html>下载base文件
