图片会照常循环播放，当然也可以通过按钮来进行切换，当切出当前的页面时，等到你在回到当前页面时该轮播的图片还是停留在你之前所切出去的的那张图片的状态。
HTML部分：
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/slider.css"/>
<script src="js/slider.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div class="slider slider1" style="height: 100vh;width: 100vw;">
<div class="slider-wrapper">
<div class="slider-slide" style="background-image:url(img/a1.jpg) "></div>
<div class="slider-slide" style="background-image:url(img/a2.jpg) "></div>
<div class="slider-slide" style="background-image:url(img/a3.jpg) "></div>
<div class="slider-slide" style="background-image:url(img/a4.jpg) "></div>
</div>
<!--这个是左右两边的按钮-->
<div class="slide-btn slider-prev"></div>
<div class="slide-btn slider-next"></div>
</div>
<script>
slider('.slider1')
</script>
</body>
</html>
CSS部分：
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.slider{
overflow: hidden;
}
.slider .slider-wrapper{
height: 100%;
}
.slider .slider-wrapper .slider-slide{
background-size: cover;
background-position: center top;
height: 100%;
float: left;
}
.slide-btn{
width: 30px;
height: 50px;
position: absolute;
cursor: pointer;
top: 50%;
transform: translateY(-50%);
background-repeat: no-repeat;
}
.slider-prev{
left: 20px;
background-image: url(../img/left.jpg);
}
.slider-next{
right: 20px;
background-image: url(../img/right.jpg);
}
js部分：
function slider(selector){//selector就是一个选择器,接收从dom那边传来的选择器
//保存全局变量
var container
var wrapper
var slides
var index=0
var buttons
var defaluts={
speed:1000,
delay:2000
}
var flag=false
var timer
//初始化轮播图
function init(){
container=document.querySelector(selector)
wrapper=container.querySelector(".slider-wrapper")
slides=container.querySelectorAll(".slider-slide")
buttons=container.querySelectorAll('.slide-btn')
//应该在结尾和开头添加图片
clone()
//设置宽度
setWidth()
//移动wrapper
moveWrapper()
//自动播放
autoplay()
//响应式
resize()
buttons[0].addEventListener('click',function(){
buttonClick('left')
})
buttons[1].addEventListener('click',function(){
buttonClick('right')
})
//检测是否切出当前页面
visibilityChange()
}
function visibilityChange(){
console.log('321',window)
window.addEventListener("visibilityChange",function(){
//当切换回来的时候还是停留在之前切出去的时候的那张图片
if(document.hidden){
clearTimeout(timer)
}else{
clearTimeout(timer)
autoplay()
}
})
}
function buttonClick(direction){
if(!flag){
moveSlide(direction)
clearTimeout(timer)
autoplay()
}
}
//响应式
function resize(){
window.addEventListener("resize",function(){
setWidth()
wrapper.style.transitionDuration='0ms'
moveWrapper()
})
}
//自动播放
function autoplay(){
timer=setTimeout(function(){
moveSlide('left')
autoplay()
},defaluts.delay+defaluts.speed)
}
//播放滑动slider
function moveSlide(direction){
direction=='right' ? index++ : index--
wrapper.style.transitionDuration=defaluts.speed+'ms'
flag=true
setTimeout(function(){
flag=false
},defaluts.speed)
if(index<0 || index>=slides.length){
setTimeout(function(){
if(index<0){
index=slides.length-1
}
if(index>=slides.length){
index=0
}
wrapper.style.transitionDuration='1ms'
moveWrapper()
},defaluts.speed)
}
moveWrapper()
}
//复制图片
function clone(){
//firstElementChild是获取wraper下面的第一个元素
//为true的时候也可以吧孩子里面的孩子给克隆出来，也就是复制出来
var firstElement=wrapper.firstElementChild.cloneNode(true)
var lastElement=wrapper.lastElementChild.cloneNode(true)
wrapper.appendChild(firstElement)//把第一张图片添加到后边
wrapper.insertBefore(lastElement,slides[0])//把最后一张图片插入到第一个位置
}
//设置宽度
function setWidth(){
var wrapperWidth=0
var sliders=container.querySelectorAll(".slider-slide")
for(var i=0;i<sliders.length;i++){
sliders[i].style.width=container.offsetWidth+'px'
wrapperWidth+=sliders[i].offsetWidth
}
wrapper.style.width=wrapperWidth+'px'
}
//移动wrapper
function moveWrapper(){
var px=0
var sliders=container.querySelectorAll('.slider-slide')
for(var i=0;i<=index;i++){
px+=sliders[i].offsetWidth
}
wrapper.style.transform='translate3d(-'+px+'px,0,0)'
}
init()
}
174
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
