轮播
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
padding: 0;
margin: 0;
}
.banner{
overflow: hidden;
width: 1000px;
height: 340px;
position: relative;
margin: 0 auto;
}
.banner img{
display: block;
width: 1000px;
height: 340px;
float: left;
}
.banner .inner{
/*width: 10000px;*/
height: 340px;
position: absolute;
left: 0;
}
.banner ul{
position: absolute;
right: 10px;
bottom: 10px;
}
.banner ul li{
list-style: none;
float: left;
background: blue;
width: 18px;
height: 18px;
margin-left:10px;
border-radius: 50%;
cursor: pointer;
}
.banner a{
display: none;
position: absolute;
width: 30px;
height: 100px;
background:url("img/btn.png") no-repeat;
top: 50%;
margin-top: -50px;
opacity: 0.7;
}
.banner a:hover{
opacity: 1;
}
.banner li.bg{
background: red;
}
.banner .btnLeft{
left: 0;
background-position: 0 0;
}
.banner .btnRight{
right: 0;
background-position: right 0;
}
</style>
</head>
<body>
<div class="banner" id="banner">
<div class="inner">
</div>
<ul>
<li class="bg"></li>
<li></li>
<li></li>
<li></li>
</ul>
<a href="javascript:;" class="btnLeft"></a>
<a href="javascript:;" class="btnRight"></a>
</div>
<script>
var banner=document.getElementById('banner');
var inner=banner.getElementsByTagName('div')[0];
var aimg=inner.getElementsByTagName('img');
var oul=banner.getElementsByTagName('ul')[0];
var ali=oul.getElementsByTagName('li');
var leftBtn=banner.getElementsByTagName('a')[0];
var rightBtn=banner.getElementsByTagName('a')[1];
var imgWidth=aimg[0].offsetWidth;
var step=0;
var moveTimer=window.setInterval(autoMove,2000);
// 第一步改变inner的宽度
~function(){
inner.style.width=aimg.length*imgWidth+'px';
}();
// 开启定时器
function autoMove(){
if(step>=aimg.length-1){
step=0;
inner.style.left=0;
}
step++;
inner.style.left=doMove(inner,100,-step*imgWidth);
dian();
}
//运动框架
function doMove(obj,dir,itarget){
clearInterval(obj.timer);
dir=obj.offsetLeft<itarget?dir:-dir;
obj.timer=setInterval(function () {
var speed=obj.offsetLeft+dir;
if(speed>=itarget && dir>0){
speed=itarget;
}
if(speed<=itarget && dir<0){
speed=itarget;
}
obj.style.left=speed+'px';
if(speed==itarget){
clearInterval(obj.timer);
}
},30);
}
//焦点对齐
function dian(){
var tempStep=step>ali.length-1?0:step;
for(var i=0;i<ali.length;i++){
var curli=ali[i];
if(tempStep==i){
curli.className='bg';
}else{
curli.className='';
}
}
}
//点击小点点
~function () {
for(var i=0;i<ali.length;i++){
var curli=ali[i];
curli.index=i;
curli.onclick= function () {
step=this.index;
dian();
inner.style.left=doMove(inner,100,-step*imgWidth);
};
}
}();
//鼠标移入
banner.onmouseover=function(){
window.clearInterval(moveTimer);
leftBtn.style.display='block';
rightBtn.style.display='block';
};
banner.onmouseout= function () {
moveTimer=window.setInterval(autoMove,2000);
leftBtn.style.display='none';
rightBtn.style.display='none';
};
// 右按钮点击
rightBtn.onclick=autoMove;
leftBtn.onclick=function(){
if(step<=0){
step=4;
inner.style.left=-step*imgWidth+'px';
}
step--;
inner.style.left=doMove(inner,100,-step*imgWidth);
dian();
}
</script>
</body>
</html>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017.01.08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读