用dom方法写轮播图

最新推荐文章于 2022-01-01 10:10:49 发布
最新推荐文章于 2022-01-01 10:10:49 发布
阅读量822 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yllmyl/article/details/80598558
版权

传统轮播图



<!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>

柳LL
关注
DOM-轮播图
SunsetGirl的博客
05-17 215
功能：实现自动轮播，圆点切换，左右箭头切换
DOM---轮播图
weixin_57097732的博客
08-21 104
直接上代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" type="text/css" href="./css/font_2759667_f8uiz
用原生DOM写个简单轮播图
limmt2020的博客
09-07 166
用原生DOM写个简单轮播图 HTML网页的代码 <body> <main id="main"> <div id="banner"> <div id="btn-left"></div> <ul id="ul-imgs" class="transition" style="width:5000px; margin-left:0px;"> <li><a href="java
文本对象模型(DOM)
lord_of_war的博客
12-30 518
文档对象模型 文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTML和XML文档是通过说明部分定义的)。文档可以进一步被处理，处理的结果可以加入到当前的页面。DOM是一种基于树的API文档，它要求在处理...
DOM——轮播图
qq_51406158的博客
09-04 254
在学习前端的过程中总会有简单的小练习小项目，其中轮播图是里面最常见的，我在最近的学习中也学到了，在这和大伙们分享一下。 CSS部分:： <style> * { padding: 0; margin: 0; list-style: none; border: 0; } .all { width: 500px;...
vue不操作dom实现图片轮播的示例代码
11-27
以下是如何使用Vue不操作DOM实现图片轮播的详细步骤： 首先，我们需要创建一个Vue组件，该组件包含一个`<ul>`元素，用来存放图片轮播的`<li>`元素。在`<li>`元素中，我们使用`v-for`指令遍历图片列表，并根据索引...
JS轮播图的实现方法2
12-28
本文实例为大家分享了JS轮播图的实现代码，供大家参考，具体内容如下 需求： 自动轮播，鼠标移入轮播停止、移出继续，小圆点点击切图，左右箭头切图 效果图： ![轮播图] 思路： 将所有需要轮播的图片横向排列，...
jquery图片轮播图多图切换效果（带小图左右箭头）
03-16
jQuery提供了一系列的动画方法，如`fadeIn`、`fadeOut`等，可以用来实现平滑的图片切换效果。同时，Swiper也内置了丰富的过渡动画效果，可以根据需求进行设置。 总的来说，“jquery图片轮播图多图切换效果（带小图...
ASP.NET写的轮播图代码页面
最新发布
11-01
轮播图通常包含多个滑块，每个滑块可以显示一张图片、一段文字或其他多媒体内容，用户可以通过点击按钮或自动滚动来切换内容。 在这个“ASP.NET写的轮播图代码页面”中，我们可以期待找到以下关键知识点： 1. **...
每日一题_JavaScript.利用纯JavaScript Dom Core实现图片轮播效果?
weixin_34115824的博客
09-21 103
具体需求:1. 页面加载后每隔2秒自动从轮播图片2. 鼠标悬停或是点击页面中小图片时,大图片自动跟随切换,并且停止轮播3. 鼠标离开小图片时,图片重新开始轮播实现思路:具体代码:html<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> ...
原生JS撸的轮播图插件
08-10
原生JS练手手写了个轻量级的轮播图插件，无第三方依赖，开箱即用，没有过多的繁杂配置。
dom版本的轮播图
weixin_44736637的博客
01-01 349
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { m
dom实现轮播图
minjiayanm的博客
12-14 369
轮播图是网站设计常用的一种功能，请看代码。 css样式： .wraper{ width: 300px; height: 200px; position: relative; } .wraper>img{ display: none; width: 300px; height: 200px; } #pre{ width: 30px; height: 50px; background-color...
DOM手写轮播图
yesir_mao的博客
07-04 419
说明：转载需注明出处，仅供学习参考使用。特别感谢东哥无微不至的讲解。 1.需求：DOM手写轮播图 2.总共分为四部分： 第一部分：控制轮播图从当前位置移动到任意范围内的位置； 第二部分：点击向左，向右箭头控制轮播图的移动； 第三部分：当鼠标移入移出轮播图时，控制轮播图的动作； 第四部分：点击正下方小圆点，控制轮播图的移动； 具体操作内容，请参照注释，代码片段附带详细内容步骤解析。 3.css样式片...
Js原生DOM轮播图
qq_40109478的博客
07-27 372
DOM 4步 1.查找触发事件的元素 2.绑定事件处理函数 3.查找要修改的元素 4.修改元素 结构 div#banner-container(主框) ul#banner-wrapper>li>a>img(图片内容) banner-btn-left,banner-btn-right ul#banner-contorl>li(圆点) :active(选中状态) 注意: 轮播图移动的是ul而不是li 鼠标移入移出挂到主框上 步骤 1.定义函数用于切换索引显示效果(且完善切换效果) 2
DOM经典例子（轮播图）
weixin_46726346的博客
08-12 286
效果显示： 功能： 1、每两秒自动换页； 2、可以进行1,2，。。翻页； 3、可以通过>或者<进行翻页； 图片资源： 代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <
JavaScript中运用dom来制作图片轮播
plannothing的博客
08-06 336
!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #outer{ width: 500px; margin: 50px auto; padding: 10px; text-align:.
PC端原生dom轮播图
业余前端的职业经历
12-29 284
工作中有很多时候 不让你使用插件写轮播图 这个时候得用原生dom进行书写了 如果之前没有写过的话 还得花一俩个小时 去写 原生dom 写轮播图的 虽然代码可能长一点 好处就是 兼容性比较好 https://github.com/zhaoyunchong/PcCarousel.git ...
轮播图小圆点
sui_yz的博客
12-19 938
//xml中代码 xml version="1.0" encoding="utf-8"?> RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http
Js实现图片点击切换轮播图详解
"本文将详细介绍如何使用JavaScript实现一个图片点击切换的轮播效果，通过具体的代码示例，帮助读者理解并掌握相关技能。" 在网页设计中，图片轮播是一种常见的展示多张图片的方式，它能有效利用有限的空间，使用户...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值