轮播图
<!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>
*{
margin: 0;
padding: 0;
}
ul,li{
list-style: none;
}
.slider{
width: 1130px;
height: 286px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
.slider_img{
width: 1130px;
height: 286px;
}
.slider li{
position: absolute;
top: 0;
left: 0;
width: 1130px;
height: 286px;
}
.slider li img{
width: 100%;
height: 100%;
}
.slider_btn{
text-align: center;
}
.slider_btn .prev{
background: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/left_arrow.svg?v=2);
width: 52px;
height: 52px;
position: absolute;
z-index: 100;
top: 50%;
margin-top: -26px;
left: 10px;
cursor: pointer;
}
.slider_btn .next{
background: url(https://static.zcool.cn/git_z/z/widget/slider/images/svg/right_arrow.svg?v=2);
width: 52px;
height: 52px;
position: absolute;
z-index: 100;
top: 50%;
margin-top: -26px;
right: 10px;
cursor: pointer;
}
.xbtn{
position: absolute;
top: 93%;
left: 50%;
transform:translate(-50%,-50%);
}
.dot{
display: inline-block;
width: 15px;
height: 15px;
border: 1px solid yellow;
border-radius: 50%;
margin: 0 20px ;
box-shadow: 0 0 5px black;
cursor: pointer;
}
.dot_color{
background-color: red;
}
</style>
</head>
<body>
<div class="slider">
<div class="slider_img">
<ul>
<li><a href="#"><img src="https://img.zcool.cn/community/01d6405f59b89111013e3187e86597.png@1380w" alt=""></a></li>
<li><a href="#"><img src="https://img.zcool.cn/community/0102135f5c387111013e3187f5cafc.jpg@1380w" alt=""></a></li>
<li><a href="#"><img src="https://img.zcool.cn/community/018a0a5f5c31f811013e3187ce23a5.jpg@1380w" alt=""></a></li>
<li><a href="#"><img src="https://img.zcool.cn/community/01a6c05f599e5611013f1a647af2fc.jpg@1380w" alt=""></a></li>
<li><a href="#"><img src="https://img.zcool.cn/community/015e555f5c394711013f1a64a7ea3f.jpg@1380w" alt=""></a></li>
<li><a href="#"><img src="https://img.zcool.cn/community/01a2545f59b87e11013f1a645c4e01.png@1380w" alt=""></a></li>
<li><a href="#"><img src="https://img.zcool.cn/community/0160515f59b8f311013f1a649a62bc.png@1380w" alt=""></a></li>
</ul>
</div>
<div class="slider_btn">
<span class="prev"></span>
<span class="next"></span>
<div class="xbtn">
</div>
</div>
</div>
</body>
<script>
var slider = $id('.slider');
var WIDTH = slider.offsetWidth;
var ImgArr = slider.children[0].children[0].children;
var xbtn = $id('.xbtn')
var slider_btn = slider.children[1];
var prev_btn = $id('.prev');
var next_btn = $id('.next')
var index = 0;
for(var i=0 ; i<ImgArr.length ; i++){
var span = document.createElement('span');
span.className = "dot";
span.index = i;
xbtn.appendChild(span);
ImgArr[i].style.left = WIDTH + 'px';
}
var spanArr = xbtn.children;
spanArr[index].className = "dot dot_color";
ImgArr[index].style.left = 0;
slider_btn.onclick = function(e){
e = e||window.event;
var target = e.target||e.srcElement;
if(target.className=="prev"){
console.log("你点击了上一张按钮");
var newIndex = index-1;
if(newIndex<0){
newIndex = ImgArr.length-1;
}
ImgArr[newIndex].style.left = -WIDTH + "px"
animate(ImgArr[index],{left:WIDTH})
animate(ImgArr[newIndex],{left:0});
index = newIndex;
light();
}else if(target.className=="next"){
console.log("你点击了下一张按钮")
nextImg();
}else if(target.className.indexOf("dot")>-1){
console.log("你点击了小圆点,点击的小圆点的索引是"+target.index);
var newIndex = target.index;
if(newIndex>index){
ImgArr[newIndex].style.left = WIDTH + "px";
animate(ImgArr[index],{left:-WIDTH})
animate(ImgArr[newIndex],{left:0})
}
else if(newIndex<index){
ImgArr[newIndex].style.left = -WIDTH + "px"
animate(ImgArr[index],{left:WIDTH})
animate(ImgArr[newIndex],{left:0})
}
index = newIndex;
light();
}
}
var timer = setInterval(nextImg,2000);
document.onvisibilitychange = function(){
if(document.visibilityState=="hidden"){
clearInterval(timer)
}
if(document.visibilityState=="visible"){
timer = setInterval(nextImg,2000);
}
}
slider.onmouseenter = function(){
clearInterval(timer);
}
slider.onmouseleave = function(){
clearInterval(timer);
timer = setInterval(nextImg,3000)
}
function light(){
for(var i=0 ; i<ImgArr.length ;i++){
spanArr[i].className = "dot"
}
spanArr[index].className = "dot dot_color"
}
function nextImg(){
var newIndex = +index + 1;
if(newIndex>ImgArr.length-1){
newIndex = 0;
}
ImgArr[newIndex].style.left = WIDTH + "px";
animate(ImgArr[index],{left:-WIDTH})
animate(ImgArr[newIndex],{left:0})
index = newIndex;
light();
}
function $id(id){
return document.querySelector(id)
}
function $ids(id){
return document.querySelectorAll(id)
}
function getStyle(dom,attr){
if(window.getComputedStyle){
return window.getComputedStyle(dom,null)[attr];
}else{
return dom.currentStyle[attr]
}
}
function animate(dom,json,fn){
clearInterval(dom.timer)
dom.timer = setInterval(function(){
var flag = true;
for(var attr in json){
if(attr == "opacity"){
var current = parseInt(getStyle(dom,attr)*100)
}else{
var current = parseInt(getStyle(dom,attr))
}
var target = parseInt(json[attr]);
var speed = target>current?Math.ceil((target-current)/10):Math.floor((target-current)/10)
if(attr == "zIndex"){
var next = target;
}else{
var next = current + speed;
}
if(attr == "opacity"){
dom.style.opacity = next/100;
dom.style.filter = "alpha(opacity="+next+")"
}else if(attr == "zIndex"){
dom.style.zIndex = next;
}else{
dom.style[attr] = next + "px";
}
if(next != target){
flag = false;
}
}
if(flag){
clearInterval(dom.timer);
if(fn){
fn()
}
}
},1000/60)
}
</script>
</html>