轮播
2019-10-12 本文已影响0人
lacduang
css
<style>
html, body, div, ul, li {
margin: 0;
padding: 0;
}
ul, ol {
list-style: none;
}
a {
text-decoration: none;
color: #000;
}
.slidshow {
width: 600px;
height: 300px;
margin: 100px auto;
overflow: hidden;
border: 1px solid #CCC;
position: relative;
}
.slidshow .slide-img-wrap {
width: 2400px;
position: absolute;
left: 0;
z-index: 1;
}
.slidshow .slide-img-wrap li{
float: left;
width: 600px;
height: 300px;
}
.slidshow .slide-img-wrap li img {
width: 600px;
height: 300px;
}
/* 设置下一个和上一个的按钮 */
.slidshow .slide-btn-wrap {
position: absolute;
z-index: 100;
top: 50%;
left: 0;
width: 600px;
height: 30px;
margin-top: -15px;
}
.slidshow .slide-btn-wrap a {
display: block;
height: 30px;
text-align: center;
color: #999;
font-size: 30px;
line-height: 25px;
font-weight: bold;
background: rgba(99, 99, 99, 0.5);
margin: 0 10px;
}
.slidshow .slide-btn-wrap a:hover {
background: rgb(99, 99, 99, 0.8)
}
.slidshow .slide-btn-wrap .next {
float: right;
}
.slidshow .slide-btn-wrap .prev {
float: left;
}
/* 设置圆点选择 */
.slidshow .slide-sel-btn {
position: absolute;
top: 90%;
height: 10px;
width: 64px;
z-index: 100;
margin-left: 268px;
}
.slidshow .slide-sel-btn a.on {
background: orange;
}
.slidshow .slide-sel-btn a {
width: 8px;
height: 8px;
margin-right: 8px;
border-radius: 50%;
background-color: #fff;
float:left;
}
</style>
html
<body>
<div class="slidshow">
<!-- 滑动的图片 -->
<ul class="slide-img-wrap">
<li index="0" class="on"><a href="#"><img src="./img/1.jpg" alt=""></a></li>
<li index="1"><a href="#"><img src="./img/2.jpg" alt=""></a></li>
<li index="2"><a href="#"><img src="./img/3.jpg" alt=""></a></li>
<li index="3"><a href="#"><img src="./img/4.jpg" alt=""></a></li>
</ul>
<!-- 上一张和下一张的按钮 -->
<div class="slide-btn-wrap">
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
<div class="slide-sel-btn">
<a index="0" href="javascript:;" class="on"></a>
<a index="1" href="javascript:;"></a>
<a index="2" href="javascript:;"></a>
<a index="3" href="javascript:;"></a>
</div>
</div>
</body>
js
<script>
window.onload = function() {
let btnPrev = document.querySelector('.slide-btn-wrap .prev')
let btnNext = document.querySelector('.slide-btn-wrap .next')
btnPrev.onclick = function(e) {
slideShowPrev()
autoSlide()
}
btnNext.onclick = function(e) {
slideShowNext()
// 当再一次点击按钮时, 速度会加快 应重新调用autoSlide方法
autoSlide()
}
// 具体选中圆圈的跳转的具体页面
let selBtnDiv = document.querySelector('.slide-sel-btn')
selBtnDiv.onclick = function(e) {
e = e || window.event
let target = e.target || e.srcElement
if(target === this) {
return
}
// 如果是点击子元素的a标签
let nextIndex = target.getAttribute('index')
nextIndex = parseInt(nextIndex)
// 之前设置样式类的a标签
let curA = document.querySelector('.slide-sel-btn .on')
let curIndex = parseInt(curA.getAttribute('index'))
slide(curIndex, nextIndex)
//
autoSlide()
}
// 实现自动滚动效果
autoSlide()
}
// 执行上一张图片
function slideShowPrev() {
// 滑动下一张图片
let curLi = document.querySelector('.slide-img-wrap .on')
let curIndex = curLi.getAttribute('index')
curIndex = parseInt(curIndex)
let nextIndex = (curIndex -1 + 4) % 4
slide(curIndex, nextIndex)
}
// 执行下一张图片
function slideShowNext() {
// 滑动下一张图片
let curLi = document.querySelector('.slide-img-wrap .on')
let curIndex = curLi.getAttribute('index')
curIndex = parseInt(curIndex)
// 让索引进行循环 0，1，2，3，0，1，2，3。。。
let nextIndex = (curIndex + 1) % 4
slide(curIndex, nextIndex)
}
var timer
// 自动轮播
function autoSlide() {
// 先去掉时钟
if(timer) {
clearInterval(timer)
timer = null;
}
timer = setInterval(function() {
slideShowNext()
}, 2000)
}
function slide(curIndex, nextIndex) {
// 0 left: 0
// 1 left: -600px;
// 2 left: -1200px;
// 3 left: -1800px;
let nextLeft = nextIndex * (-600)
// 要让下一张图片的左放到盒子的最左侧
let imgList= document.querySelector('.slide-img-wrap')
let curLeft = imgList.offsetLeft
// 进行动画的轮播
slideAnimation(curLeft, nextLeft, imgList, 300)
// imgList.style.left = nextLeft + 'px'
// 把li标签和span标签的选中的那个标签的 class 的 on 设置一下
let liArray = document.querySelectorAll('.slide-img-wrap li')
liArray[curIndex].className = ' '
liArray[nextIndex].className = 'on'
// slid-sel-btn 下面的 a 标签 重新设置 on
let slideSelBtnArray = document.querySelectorAll('.slide-sel-btn a')
slideSelBtnArray[curIndex].className = ''
slideSelBtnArray[nextIndex].className = 'on'
}
function slideAnimation(curLeft, endLeft, element, duration) {
let distance = endLeft - curLeft // 总的滑动距离
let wPerMs = distance / duration // 没毫秒需要移动的距离
let startTime = Date.now()
let animateTimer = setInterval(function() {
let curTime = Date.now()
let delateTime = curTime - startTime
element.style.left = (element.offsetLeft + delateTime * wPerMs) + 'px'
duration = duration - delateTime
if(duration <= 0){
element.style.left = endLeft + 'px'
clearInterval(animateTimer)
return
}
// 把当前时间设置成起始时间
startTime = curTime
}, 1000/60)
}
</script>
