提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
首尾设置假图片,利用平移,过渡实现动画效果
一、HTML
<!-- 轮播图 -->
<div class="jd-banner">
<ul class="clearfix">
<!-- 注意: 由于移动是可以左右滑动的, 所以需要两张假图片,为了动画过渡自然-->
<li><a href="#"><img src="./images/banner08.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner01.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner02.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner03.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner04.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner05.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner06.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner07.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner08.jpg" alt=""></a></li>
<li><a href="#"><img src="./images/banner01.jpg" alt=""></a></li>
</ul>
<div class="previousBtn">
<!--jd-sprites:添加的精灵图图标,可自行添加箭头-->
<span class="jd-sprites"></span>
</div>
<div class="nextBtn">
<span class="jd-sprites"></span>
</div>
<!--轮播点-->
<ol>
<li class="current"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
二、css
.jd-banner {
position: relative;
overflow: hidden;
}
.jd-banner .previousBtn {
position: absolute;
width: 40px;
height: 40px;
background-color: rgba(210, 210, 210, 0.4);
border-radius: 50%;
transform: translateY(-50%);
top: 50%;
left: 12px;
}
.jd-banner .previousBtn span {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background-position: -22px 0px;
}
.jd-banner .previousBtn:hover {
border: 1px solid #fff;
background-color: transparent;
}
.jd-banner .nextBtn {
position: absolute;
width: 40px;
height: 40px;
background-color: rgba(210, 210, 210, 0.4);
border-radius: 50%;
transform: translateY(-50%);
top: 50%;
right: 12px;
}
.jd-banner .nextBtn span {
position: absolute;
left: 10px;
top: 10px;
width: 20px;
height: 20px;
background-position: -22px 0px;
transform: scaleX(-1);/*镜像*/
}
.jd-banner .nextBtn:hover {
border: 1px solid #fff;
background-color: transparent;
}
.jd-banner ul {
width: 1000%;
-webkit-transform: translateX(-10%);
transform: translateX(-10%);
}
.jd-banner ul li {
width: 10%;
float: left;
}
.jd-banner ul li img {
width: 100%;
height: 100%;
}
.jd-banner ol {
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
}
.jd-banner ol li {
float: left;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1px solid #fff;
margin: 0 4px;
}
.jd-banner ol .current {
background-color: #fff;
}
三、js
; (function bannerToggle() {
var banner = document.querySelector('.jd-banner')
var ul = banner.querySelector('.jd-banner ul'); //获取ul
var olLis = document.querySelectorAll('.jd-banner ol li')//获取小圆点
var previousBtn = document.querySelector('.previousBtn')
var nextBtn = document.querySelector('.nextBtn')
var length = ul.children.length
// 前面有张假图片,因此index=1
var index = 1
var width = banner.offsetWidth
nextBtn.onclick = function () {
nextImg()
}
previousBtn.onclick = function () {
previousImg()
}
/* 切换到下一张图 */
function nextImg() {
index++
addAnimation()
moveImg(-index * width)
}
/* 切换到上一张图 */
function previousImg() {
index--
addAnimation()
moveImg(-index * width)
}
/*transitionend事件:过渡完成后触发 */
ul.addEventListener('transitionend', function () {
// 往左跑的判断, 当抵达最后一张假图时, 需要瞬间跳到第一张真图的位置
if (index >= length - 1) {
index = 1
removeAnimation()
moveImg(-index * width)
}
// 往右跑的判断, 当抵达第一张假图的时候, 应该瞬间跳转到最后一张真图(图8的位置)
if (index <= 0) {
index = length - 2
removeAnimation()
moveImg(-index * width)
}
location()
})
/**封装的一些小方法 */
/*排他思维,添加小圆点*/
function location() {
olLis.forEach(function (item, index) {
item.classList.remove('current')
})
olLis[index - 1].classList.add('current')
}
/*图片移动 */
function moveImg(x) {
ul.style.transform = 'translateX(' + x + 'px)'
}
/*移除动画 */
function removeAnimation() {
ul.style.transition = 'none'//移除过渡
}
/*添加动画 */
function addAnimation() {
ul.style.transition = 'all .4s'//添加过渡
}
/*自动播放 */
var timerId = null
function autoPlay() {
timerId = setInterval(nextImg, 1000)
}
autoPlay()
/*鼠标移入停止播放 */
banner.onmouseenter = function () {
clearInterval(timerId)
}
/*鼠标移出开始播放 */
banner.onmouseleave = function () {
autoPlay()
}
// 如果屏幕大小变换了, width 需要动态更新
// resize: 屏幕大小改变时触发
window.addEventListener("resize", function () {
// 重新获取 li 的宽度即可
width = banner.offsetWidth;
})
})()