上下轮播; //原理是
css样式;
#box{
height:510px;
width: 1000px;
border: 1px solid #999999;
margin: 50px auto;
overflow: hidden;
position: relative;
}
#tu{
position: absolute;
width: 1000px;
}
li{
list-style: none;
}
#box img{
height: 510px;
width: 1000px;
}
HTML布局;
<div id ="box">
<ul id="tu">
<li><img src = "tu1" /></li>
<li><img src = "tu2"/><li>
<li><img src = "tu3" /></li>
<li><img src = "tu1"/><li> //上下轮播要保证第一张和最后一张图相同
</ul>
<ul id = "num">
<li class="dy">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--双class名,两个左右按钮控制-->
<div class="btn left"><</div>
<div class="btn right">></div>
js样式;
<script src="js/startmove.js" type = "text/javascript"></script>
<script>
var obox = document.getElementById("box");
var otu = document.getElementById("tu");
var olist = otu.children;
var len = olist.length;
var imgy = olist[0].offsetHeight;
otu.style.height = imgy*len+"px";
var i=0;
var timer = setInterval(function(){
/* i++;
if(i==len){
//注意向上的无缝轮播为top值
//向左无缝轮播为left值为0
otu.style.top=0;
i=1;
}
if(i==-1){
otu.style.height = -imgy*(len-1)+"px";
i = len-2;
}
startMove(otu,{top:-imgy*i}); */
move();
},2000);
//封装一个函数使用
function move(){
i++;
//最后一个和第一个临界值时的判断
if(i==len){
otu.style.top=0;
i=1;
}
//第一张和第5张图片一样,显示完第一张后在显示的就为第4张()
if(i==-1){
otu.style.top= -imgy*(len-1)+"px";
i=len-2;
}
for(var j= 0;j<onumlist.length;j++){
onumlist[j].className="";
}
if(i==len-1){
onumlist[0].className ="dy";
}else{
onumlist[i].className = "dy";
}
startMove(otu,{top:-imgy*i});
}
oleft.onclick = function(){
move();
}
oright.onclick = function(){
i = i-2;
move();
}
for(let k=0;k<onumlist.length;k++){
onumlist[k].onmouseover=function(){
i = k-1;
move();
}
}
//鼠标划入图片中停止轮播
obox.onmouseover = function(){
clearInterval(timer);
}
//鼠标划出图片中继续轮播
obox.onmouseout = function(){
timer = setInterval(function(){
move();
},2000);
}
</script>