码迷,mamicode.com
首页 > Web开发 > 详细

js功能实现top轮播图

时间:2017-06-26 20:09:42      阅读:214      评论:0      收藏:0      [点我收藏+]

标签:方式   on()   interval   style   滚动   osi   src   图片   function   

 作用:向左滚动的轮播图
参数:主容器的id
调用方式:直接拷贝调用方法
function autoPlay(id){
var scroll=document.getElementById(id);
var ul=scroll.children[0]
var num=0
var timer=null;
timer=setInterval(autoGoing,20); //滚动轴方法
function autoGoing(){
num--;
num<=-1200 ? num=0:num;
ul.style.left=num+"px";
}
scroll.onmouseover=function(){ //鼠标悬停停止滚动
clearInterval(timer)
}
scroll.onmouseout=function(){ //鼠标移开 继续滚动
timer=setInterval(autoGoing,20);
}
}
 
参考标签:
<body>
<div class="box" id="scroll">
<ul>
<li><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
<li><img src="img/03.jpg"/></li>
<li><img src="img/04.jpg"/></li>
<li><img src="img/01.jpg"/></li>
<li><img src="img/02.jpg"/></li>
</ul>
</div>
 
参考样式:
*{margin: 0;padding: 0;}
ul{list-style: none;}
img{
vertical-align: top; /*取消三个图片底部像素距离*/
}
.box{
width: 600px;
height: 200px;
margin: 100px auto;
 
position: relative;
overflow: hidden;
}
.box ul li {
float: left;
}
.box ul{
width: 400%;
position: absolute;
left: 0;
top: 0;
}
------------------------------------------------------------------------------------------------------------------------

 

js功能实现top轮播图

标签:方式   on()   interval   style   滚动   osi   src   图片   function   

原文地址:http://www.cnblogs.com/EVNS/p/7082008.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!