用dom方法写轮播图

传统轮播图



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 5px solid gray;
margin: 100px auto;
position: relative;
overflow: hidden;
}


.m_unit{
width: 10000px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}
.m_unit ul{
overflow: hidden;
}
.m_unit ul li{
list-style: none;
float: left;
width: 560px;
height: 300px;
}


/*左右按钮*/
.btn span{
width: 55px;
height: 55px;
background: url('images/dog/btnL.png');
position: absolute;
border-radius:  10px;
top: 50%;
margin-top: -28px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 0;
}


/*小圆点*/
.circle ul li{
list-style: none;
float: left;
width: 20px;
height: 20px;
background: orange;
margin-right: 10px;
border-radius: 50%;
}


.circle ul{
overflow: hidden;
}


.circle{
position: absolute;
bottom: 10px;
right: 10px;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box" id='box'>
<div class="m_unit" id='m_unit'>
<ul>
<li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class='left' id='leftBtn'></span>
<span class='right' id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src='js/animate-3.0.js'></script>
<script>
// 获取轮播图
var box = document.getElementById('box');
// 获取移动单元
var m_unit = document.getElementById('m_unit');
// 获取图片ul
var imageUl = m_unit.getElementsByTagName('ul')[0];
// 获取图片li数组
var imgLis = imageUl.getElementsByTagName('li');


// 获取图片li的个数
var imgLength = imgLis.length;


// 获取左右按钮
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');
// 获取小圆点数组 
var circleLis = document.getElementById('circle').getElementsByTagName('li');


// 拼接第0张图片
imageUl.appendChild(imgLis[0].cloneNode(true));


// 声明信号量idx(0~4,5是临时演员)
var idx = 0;


// 默认滚动
var timer = setInterval(rightBtnHandler, 2000);


// 鼠标进入box,停止滚动
box.onmouseover = function(){
clearInterval(timer);
}


// 鼠标离开box,继续滚动
box.onmouseout = function(){
timer = setInterval(rightBtnHandler, 2000);
}




// 右按钮点击事件
rightBtn.onclick = rightBtnHandler;
function rightBtnHandler(){
// 判断m_unit是否在运动,函数节流
if(m_unit.isanimated) return;
// 信号量++
idx++;
// console.log(idx);
// 根据信号量移动m_unit
animate(m_unit,{'left': -560 * idx}, 1000, 'BounceEaseOut',function(){
// 当假的0完全动画完成后,瞬间移动到初始位置,同时把索引变为0
if(idx > imgLength-1){
idx = 0;
m_unit.style.left = '0px';
// console.log(idx);
}
});


// 更改小圆点
circleChange();
}


// 左按钮点击事件
leftBtn.onclick = function(){
// 节流
if(m_unit.isanimated) return;


// 索引--
idx--;


// 运动之前判断,如果小于0,说明从0到4的切换,m_unit首先移动到假0的位置,然后再把4进行动画切换
if(idx < 0){
idx = imgLength - 1;
m_unit.style.left = -560 * imgLength + 'px';
}


// 根据idx切换图片
animate(m_unit,{'left': -560 * idx}, 1000, 'BounceEaseOut'); 


// 更改小圆点
circleChange();
}


// 小圆点的监听事件
for(var i = 0; i < circleLis.length; i++){


// 绑定自定义属性规避闭包
circleLis[i].idxx = i;


circleLis[i].onclick = function(){
// 把点击的小圆点的索引给idx
idx = this.idxx;
// console.log(idx);


// 根据idx切换图片
animate(m_unit,{'left': -560 * idx}, 1000, 'BounceEaseOut'); 


// 更改小圆点
circleChange();
}
}


// 小圆点的切换
function circleChange(){
// 根据idx进行小圆点的切换(排他)
// console.log(idx);
// if(idx == circleLis.length) idx = 0; // 我们使用idx,不要去更改idx


// 使用变量circleIdx接收idx
var circleIdx = idx;
if(circleIdx == circleLis.length) circleIdx = 0;


// 把所有的小圆点的class去掉
for(var i = 0; i < circleLis.length; i++){
circleLis[i].className = '';
}


// 把circleIdx对应的小圆点添加current类
circleLis[circleIdx].className = 'current';


}


</script>
</body>

</html>

呼吸轮播图



<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 3px solid #ddd;
margin:  100px auto;
position: relative;
}


.imglist ul li{
list-style: none;
width: 560px;
height: 300px;
position: absolute;
top: 0;
left: 0;
opacity: 0;
filter:alpha(opacity=0);
}


.imglist ul li.current{
opacity: 1;
filter:alpha(opacity=100);
}


.btn span{
width: 55px;
height: 55px;
position: absolute;
top: 50%;
margin-top: -27px;
}


.btn span.left{
background: url('images/dog/btnL.png');
left: 10px;
}


.btn span.right{
background: url('images/dog/btnR.png');
right: 10px;
}


.circle{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -70px;
}
.circle ul {
overflow: hidden;
}
.circle ul li{
list-style: none;
width: 20px;
height: 20px;
margin-right: 10px;
background: orange;
float: left;
border-radius: 50%;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>

<div class="box" id='box'>
<div class="imglist" id='imglist'>
<ul>
<li class='current'><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>
<div class="btn">
<span class="left" id='leftBtn'></span>
<span class="right" id='rightBtn'></span>
</div>
<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


<script src='js/animate-3.0.js'></script>
<script>
// 获取轮播图box
var box = document.getElementById('box');


// 得到所有图片
var imgs = document.getElementById('imglist').getElementsByTagName('li');


// 取得按钮
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');


// 得到小圆点
var circles = document.getElementById('circle').getElementsByTagName('li');


// 默认滚动
var timer = setInterval(rightBtnHandler, 1500);


// 鼠标进入 停止轮播
box.onmouseover = function(){
clearInterval(timer);
}


// 鼠标离开 继续轮播
box.onmouseout = function(){
timer = setInterval(rightBtnHandler, 1500);
}


// 声明信号量
var idx = 0;


// 右按钮点击事件
rightBtn.οnclick= rightBtnHandler;
function rightBtnHandler(){
//函数节流
if(imgs[idx].isanimated) return;
//呼吸透明
animate(imgs[idx],{'opacity':0},500);
idx++;
//如果idx大于图片长度-1 idx=第一张图
if(idx>imgs.length-1) idx = 0;
//
animate(imgs[idx],{'opacity':1},500);
changeCircle();
}




// 左按钮点击事件
leftBtn.onclick = function(){


// 节流
if(imgs[idx].isanimated) return;


// 让现在idx对应的图片淡出
animate(imgs[idx],{'opacity':0},500);


// 信号量--
idx--;


// 信号量验收
if(idx < 0) idx = imgs.length-1;


// 让++后的idx对应的图片淡入
animate(imgs[idx],{'opacity':1},500);


// 更改小圆点
changeCircle();
}




// 小圆点点击事件  idx=0  idxx = 3
for(var i = 0; i < circles.length; i++){
circles[i].idxx = i;
circles[i].onclick = function(){
if(imgs[idx].isanimated) return;
if(imgs[idx],{'opacity':0},500);
idx = this.idxx;
animate(imgs[idx],{'opacity':1},500);
changeCircle();
}
}


// 更改小圆点
function changeCircle(){
// 排他
for(var i = 0; i < circles.length; i++){
circles[i].className = '';
}


circles[idx].className = 'current';
}
</script>
</body>

</html>

呼吸轮播变种

 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="UTF-8">
 <title>Document</title>
  
 <style>
 *{
 margin: 0;
 padding: 0;
 }
  
 .box{
 width: 560px;
 height: 300px;
 border: 3px solid #ddd;
 margin: 100px auto;
 position: relative;
 background: black;
 }
  
 .imglist ul li{
 list-style: none;
 width: 560px;
 height: 300px;
 position: absolute;
 top: 0;
 left: 0;
 opacity: 0;
 filter:alpha(opacity=0);
 }
  
 .imglist ul li.current{
 opacity: 1;
 filter:alpha(opacity=100);
 }
  
 .btn span{
 width: 55px;
 height: 55px;
 position: absolute;
 top: 50%;
 margin-top: -27px;
 }
  
 .btn span.left{
 background: url('images/dog/btnL.png');
 left: 10px;
 }
  
 .btn span.right{
 background: url('images/dog/btnR.png');
 right: 10px;
 }
  
 .circle{
 position: absolute;
 bottom: 10px;
 left: 50%;
 margin-left: -70px;
 }
 .circle ul {
 overflow: hidden;
 }
 .circle ul li{
 list-style: none;
 width: 20px;
 height: 20px;
 margin-right: 10px;
 background: orange;
 float: left;
 border-radius: 50%;
 }
  
 .circle ul li.current{
 background: red;
 }
 </style>
 </head>
 <body>
  
 <div class="box" id='box'>
 <div class="imglist" id='imglist'>
 <ul>
 <li class='current'><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
 <li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
 </ul>
 </div>
 <div class="btn">
 <span class="left" id='leftBtn'></span>
 <span class="right" id='rightBtn'></span>
 </div>
 <div class="circle" id='circle'>
 <ul>
 <li class='current'></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 </div>
  
 <script src='js/animate-3.0.js'></script>
 <script>
 // 获取轮播图box
 var box = document.getElementById('box');
  
 // 得到所有图片
 var imgs = document.getElementById('imglist').getElementsByTagName('li');
  
 // 取得按钮
 var leftBtn = document.getElementById('leftBtn');
 var rightBtn = document.getElementById('rightBtn');
  
 // 得到小圆点
 var circles = document.getElementById('circle').getElementsByTagName('li');
  
 // 默认滚动
 var timer = setInterval(rightBtnHandler, 1500);
  
 // 鼠标进入 停止轮播
 box.onmouseover = function(){
 clearInterval(timer);
 }
  
 // 鼠标离开 继续轮播
 box.onmouseout = function(){
 timer = setInterval(rightBtnHandler, 1500);
 }
  
 // 声明信号量
 var idx = 0;
  
 // 右按钮点击事件
 rightBtn.onclick = rightBtnHandler;
 function rightBtnHandler(){
 // 节流
 if(imgs[idx].isanimated) return;
  
 // 让现在idx对应的图片淡出
 animate(imgs[idx],{'opacity':0},500,function(){
 // 信号量++
 idx++;
  
 // 信号量验收
 if(idx > imgs.length-1) idx = 0;
  
 // 让++后的idx对应的图片淡入
 animate(imgs[idx],{'opacity':1},500);
  
 // 更改小圆点
 changeCircle();
 });
  
  
 }
  
 // 左按钮点击事件
 leftBtn.onclick = function(){
  
 // 节流
 if(imgs[idx].isanimated) return;
  
 // 让现在idx对应的图片淡出
 animate(imgs[idx],{'opacity':0},500,function(){
 // 信号量--
 idx--;
  
 // 信号量验收
 if(idx < 0) idx = imgs.length-1;
  
 // 让++后的idx对应的图片淡入
 animate(imgs[idx],{'opacity':1},500);
  
 // 更改小圆点
 changeCircle();
 });
  
  
 }
  
  
 // 小圆点点击事件 idx=0 idxx = 3
 for(var i = 0; i < circles.length; i++){
  
 // 绑定自定义属性避免闭包
 circles[i].idxx = i;
 circles[i].onclick = function(){
  
 // 节流
 if(imgs[idx].isanimated) return;
  
 // 让之前的淡出
 animate(imgs[idx],{'opacity':0},500);
  
 // 把点击的小圆点的下标给idx这个全局信号量
 idx = this.idxx;
  
 // 把对应idx的图片淡入
 animate(imgs[idx],{'opacity':1},500);
 // 更改小圆点
 changeCircle();
 }
 }
  
  
 // 更改小圆点
 function changeCircle(){
 // 排他
 for(var i = 0; i < circles.length; i++){
 circles[i].className = '';
 }
  
 circles[idx].className = 'current';
 }
 </script>
 </body>
 </html>

传送带轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 3px solid #ddd;
margin: 100px auto;
position: relative;
overflow: hidden;
}


.imglist ul li{
display: none;
}


.m_unit{
width: 1120px;
height: 300px;
position: absolute;
top: 0;
left: 0;
}


.m_unit li{
width: 560px;
height: 300px;
list-style: none;
float: left;
}


.btn span{
width: 55px;
height: 55px;
position: absolute;
top: 50%;
margin-top: -27px;
}


.btn .left{
background: url('images/dog/btnL.png');
left: 10px;
}


.btn .right{
background: url('images/dog/btnR.png');
right: 10px;
}


.circle{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -70px;
}


.circle ul li{
list-style: none;
width: 20px;
height: 20px;
margin-right: 10px;
background: orange;
border-radius: 50%;
float: left;
}


.circle ul li.current{
background: red;
}
</style>
</head>
<body>
<div class="box">

<div class="imglist" id='imglist'>
<ul>
<li><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>

<!-- 传送带 -->
<div class="m_unit" id='m_unit'>

</div>


<div class="btn">
<span class="left" id='leftBtn'></span>
<span class="right" id='rightBtn'></span>
</div>


<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>


</div>


<script src='js/animate-3.0.js'></script>
<script>
// 获取图片列表
var imgs = document.getElementById('imglist').getElementsByTagName('li');


// 获取传送带
var m_unit = document.getElementById('m_unit');




// 给传送带添加内容
m_unit.appendChild(imgs[0].cloneNode(true));
m_unit.appendChild(imgs[1].cloneNode(true));


// 获取按钮
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');


// 获取小圆点
var circles = document.getElementById('circle').getElementsByTagName('li');


// 信号量
var idx = 0;


// 默认滚动
var timer = setInterval(rightBtnHandler, 2000);


// 事件监听
rightBtn.onclick = rightBtnHandler;
function rightBtnHandler() {


// 第0 节流
if(m_unit.isanimated) return;

// 第一 把传送带瞬间移动到0的位置
m_unit.style.left = 0;


// 第二 把传送带内容清除
m_unit.innerHTML = '';


// 第三 把新的两个图片拼接到传送带
m_unit.appendChild(imgs[idx].cloneNode(true));
idx++;
if(idx>imgs.length-1) idx = 0;
m_unit.appendChild(imgs[idx].cloneNode(true));




// 第四 移动left:从0到-560
animate(m_unit,{'left': -560},1000);


changeCircle();
}


// 更改小圆点
function changeCircle(){
// 排他
for(var i = 0; i < circles.length; i++){
circles[i].className = '';
}


circles[idx].className = 'current';
}
leftBtn.onclick = leftBtnHandler;
function leftBtnHandler() {


// 第0 节流
if(m_unit.isanimated) return;

// 第一 把传送带瞬间移动到0的位置
m_unit.style.right = 0;


// 第二 把传送带内容清除
m_unit.innerHTML = '';


// 第三 把新的两个图片拼接到传送带
m_unit.appendChild(imgs[idx].cloneNode(true));
idx--;
if(idx<0) idx =imgs.length-1;
m_unit.appendChild(imgs[idx].cloneNode(true));




// 第四 移动left:从0到-560
animate(m_unit,{'left': 0},1000);


changeCircle();
}




// 更改小圆点
function changeCircle(){
// 排他
for(var i = 0; i < circles.length; i++){
circles[i].className = '';
}


circles[idx].className = 'current';
}

</script>
</body>

</html>

三位置轮播图

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}


.box{
width: 560px;
height: 300px;
border: 3px solid #ddd;
margin: 100px auto;
position: relative;
/*overflow: hidden;*/
}

.imglist ul li{
list-style: none;
width: 560px;
height: 300px;
position: absolute;
top: 0px;
left: 560px;
}


.imglist ul li.current{
left: 0;
}


.btn span{
width: 55px;
height: 55px;
position: absolute;
top: 50%;
margin-top: -27px;
}


.btn .left{
background: url('images/dog/btnL.png');
left: 10px;
}


.btn .right{
background: url('images/dog/btnR.png');
right: 10px;
}
        .circle{
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -70px;

}
.circle ul li{
list-style: none;
width: 20px;
height: 20px;
margin-right: 10px;
background: orange;
border-radius: 50%;
float: left;
}


.circle ul li.current{
background: red;
}


</style>
</head>
<body>
<div class="box">
<div class="imglist" id='imlist'>
<ul>
<li class='current'><a href="#"><img src="images/dog/0.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/dog/4.jpg" alt=""></a></li>
</ul>
</div>


<div class="btn">
<span class="left" id='leftBtn'></span>
<span class="right" id='rightBtn'></span>
</div>



<div class="circle" id='circle'>
<ul>
<li class='current'></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>


</div>
</div>


<script src='js/animate-3.0.js'></script>
<script>
// 获取图片



var imgs = document.getElementById('imlist').getElementsByTagName('li');


// 获取左右按钮
var leftBtn = document.getElementById('leftBtn');
var rightBtn = document.getElementById('rightBtn');
        // 得到小圆点
var circles = document.getElementById('circle').getElementsByTagName('li');





// 信号量
var idx = 0;


// 右按钮点击事件
rightBtn.onclick = function(){
// 让当前图片从轮播图位置左移图片的宽度
animate(imgs[idx],{'left': -560},1000);


// 信号量++
idx++;


// 信号量验收
if(idx > imgs.length-1) idx = 0;


// 瞬间把下一张图片移动到右侧560的位置
imgs[idx].style.left = '560px';


// 让下一张从轮播图右侧左移到轮播图位置
animate(imgs[idx],{'left': 0},1000);
             
            changeCircle();
}


leftBtn.onclick = function(){
// 让当前图片从轮播图位置右移图片的宽度
animate(imgs[idx],{'left': 560},1000);


// 信号量++
idx--;


// 信号量验收
if(idx <0) idx = imgs.length-1; 


// 瞬间把下一张图片移动到右侧560的位置
imgs[idx].style.left = '-560px';


// 让下一张从轮播图右侧左移到轮播图位置
animate(imgs[idx],{'left': 0},1000);
             
            changeCircle();
}


           
// 小圆点点击事件  idx=0  idxx = 3
for(var i = 0; i < circles.length; i++){


// 绑定自定义属性避免闭包
circles[i].idxx = i;
circles[i].onclick = function(){


// 节流
if(imgs[idx].isanimated) return;


// 让之前的淡出
animate(imgs[idx],{'opacity':0},500);

// 把点击的小圆点的下标给idx这个全局信号量
idx = this.idxx;


// 把对应idx的图片淡入
animate(imgs[idx],{'opacity':1},500);
// 更改小圆点
changeCircle();
}
}




// 更改小圆点
function changeCircle(){
// 排他
for(var i = 0; i < circles.length; i++){
circles[i].className = '';
}


circles[idx].className = 'current';
}

</script>
</body>

</html>

间歇模型1

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
      *{
        margin:0;
        padding: 0;
      }
      .box{
          width: 100px;
          height: 50px;
          position: relative;
          border:1px solid gray;
          overflow:hidden;
      }
      .box ul li{
        list-style:none;
        line-height: 50px;
      }
      ul{
        position: absolute;
        top:0;
        left:0;
      }
    </style>
<body>
    <div class='box' id='box'>
        <ul>
            <li>今天天气真好</li>
            <li>阳光明媚</li>
            <li>空气清新</li>
        </ul>
    </div>
    <script src="js/animate-3.0.js"></script>
    <script>
       
        var ul = document.getElementsByTagName('ul')[0];
        var lis =ul.getElementsByTagName('li');
        //拼接
        ul.appendChild(lis[0].cloneNode(true));
        var idx = 0;
        setInterval (function(){
          idx++;
          animate(ul,{'top': -50*idx},1000,function(){
                  if(idx == lis.length-1){
                    idx=0;
                    ul.style.top =0;
                  }
          });
        },2000);
    </script>
</body>

</html>

间歇模型2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>


<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 200px;
background: #ddd;
margin: 100px auto;
position: relative;
overflow: hidden;
}


ul{
position: absolute;
top: 0;
left: 0;
}


li{
list-style: none;
width: 300px;
height: 50px;
line-height: 50px;
font-size: 20px;
}
</style>
</head>
<body>
<div>
<ul>
<li>沈同学 阿里**网络有限公司</li>
<li>曹同学 *度网络有限公司</li>
<li>朱同学 *讯网络有限公司</li>
<li>杨同学 *60网络有限公司</li>
<li>杨同学 *东网络有限公司</li>
<li>曹同学 *易网络有限公司</li>
</ul>
</div>


<script src='js/animate-3.0.js'></script>
<script>
var box = document.getElementsByTagName('div')[0];
var ul = box.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');


ul.innerHTML += ul.innerHTML;
var idx = 0;
setInterval(function(){
idx++;
animate(ul,{'top':-50*idx},1000,function(){
if(idx == lis.length/2){
idx =0;
ul.style.top = 0;
}
})
},2000);
</script>
</body>

</html>

间歇模型3

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 800px;
height: 130px;
border: 10px solid #ddd;
margin: 100px auto;
position: relative;
overflow: hidden;
}


ul{
list-style: none;
width: 5000px;
height: 130px;
overflow: hidden;
position: absolute;
top: 0;
left: 0;
}


li{
width: 200px;
height: 130px;
float: left;
margin-right: 10px;
}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#"><img src="images/shuzi/0.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/1.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/2.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/3.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/4.png" alt=""></a></li>
<li><a href="#"><img src="images/shuzi/5.png" alt=""></a></li>
</ul>
</div>


<script src='js/animate-3.0.js'></script>
<script>
var box = document.getElementsByTagName('div')[0];
var ul = box.getElementsByTagName('ul')[0];
var lis = ul.getElementsByTagName('li');


// 拼接
ul.innerHTML += ul.innerHTML;


move();


box.οnmοuseοver=function(){
             clearInterval(timer);
}
         
        box.οnmοuseοut=function(){
        move();
        } 


      var idx = 0 ;
      var timer;
      function move() {
      setInterval(function(){
      idx++;
      animate(ul,{'left':-210*idx},1000,'BounceEaseOut',function(){
      if(idx==lis.length/2){
      idx =0;
      ul.style.left = 0;
      }
      });
     
      },1500);
      }
</script>
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值