<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>轮播图</title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
#outer{
margin: 50px auto;
width: 500px;
height: 340px;
background-color: pink;
padding: 10px;
position: relative;
overflow: hidden;
}
#imgList{
list-style: none; /* 去掉列表黑点 */
position: absolute;
left: 0;
}
#imgList li{
float: left; /* 左右排列 */
margin: 0px 10px;
}
#nav{
position: absolute;
bottom: 20px;
/* (520 - 25*5)/2
设置a居中
*/
/* left: 198px; */
}
#nav a{
float: left;
height: 15px;
width: 15px;
border-radius: 50%;
background-color: lightblue;
margin: 0 10px;
opacity: 0.5;
filter: alpha(opacity = 50);
}
</style>
</head>
<body>
<div id="outer">
<ul id="imgList">
<li>
<img src="./fengjing1.jpg">
</li>
<li>
<img src="./fengjing2.jpg">
</li>
<li>
<img src="./fengjing3.jpg">
</li>
<li>
<img src="./fengjing4.jpg">
</li>
<li>
<img src="./fengjing5.jpg">
</li>
<li>
<img src="./fengjing1.jpg">
</li>
</ul>
<div id="nav">
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
</div>
</div>
</body>
<script>
var imgList = document.getElementById('imgList');
var lis = document.getElementsByTagName('li');
imgList.style.width = lis.length * 520 + "px";//判断设置轮播图宽度
var nav = document.getElementById('nav');
var outer = document.getElementById('outer');
nav.style.left = (outer.offsetWidth - nav.offsetWidth)/2 + "px";//设置点击切换按钮居中
var alis = document.getElementsByTagName('a');
var index = 0;
alis[index].style.backgroundColor = 'black';//设置默认选中的样式
for(var i = 0;i<alis.length;i++){
alis[i].num = i;//存储每个a的下标
alis[i].onclick = function(){
clearInterval(timer);
// alert(this.num);
index = this.num;
setA(index)//设置a标签样式
move(imgList,'left',-520*index,20,function(){//设置点击切换动画
autoplay();
});
}
}
var index = 0;
var timer;
autoplay();
function autoplay(){//轮播图自播放
timer = setInterval(() => {
index++;
index %= lis.length;
move(imgList,'left',-520*index,30,function(){//设置点击切换动画
setA(index);
});
}, 2000);
}
function setA(){
if(index == lis.length-1){
index = 0;
imgList.style.left = 0 + "px";
}
for(var i = 0;i<alis.length;i++){
alis[i].style.backgroundColor = "";//内联样式背景取消,回复默认style标签里的样式。
}
alis[index].style.backgroundColor = "black";
}
//
function move(obj,attr,target,speed,callback){
clearInterval(obj.timer);//关闭上一个定时器,防止点击多次创建多个
var current = parseInt(getStyle(obj,attr));//当前位置
if(current > target){ //判断移动方向
speed = -speed;
}
//alert(olddis);
///设置定时器
obj.timer = setInterval(() => {
var olddis = parseInt(getStyle(obj,attr));
var newdis = olddis + speed;//
if((newdis < target && speed < 0) || (newdis > target && speed > 0)) //到边界
{
newdis = target;
}
obj.style[attr] = newdis + "px";//设置div的新的左边距
if(newdis === target){
clearInterval(obj.timer);
callback && callback();
}
}, 30);
}
function getStyle(obj,name){
return window.getComputedStyle?getComputedStyle(obj,null)[name]:obj.currentStyle[name];
}
</script>
</html>
Js原生轮播图
猜你喜欢
转载自blog.csdn.net/xsgg1234/article/details/97520564
今日推荐
周排行