代码实现的功能:
1、自动轮播
2、点击左右箭头轮播
3、鼠标放上去停止定时器
4、鼠标离开,开启定时器
话不多说,上代码
换一下图就能用
HTML部分
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javacsript:;" class="arrow_l"><</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow_r">></a>
<!-- 滚动区域 -->
<ul>
<li>
<a href="javascript:;">
<img src="imgs/1.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="imgs/2.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="imgs/3.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="imgs/4.jpg" alt="">
</a>
</li>
<li>
<a href="javascript:;">
<img src="imgs/5.jpg" alt="">
</a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
css部分
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
color: #333;
}
li {
list-style: none;
}
/*按照你的图片大小修改.focus的宽度*/
.focus {
width: 800px;
height: 300px;
margin: 100px auto;
background-color: hotpink;
position: relative;
overflow: hidden;
}
.arrow_l,
.arrow_r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-size: 18px;
z-index: 2;
}
.arrow_r {
right: 0;
}
ul {
width: 600%;
/*js调动位移,移动的是ul,所以要在这里设置绝对定位*/
position: absolute;
}
ul li {
float: left;
}
.circle {
height: 20px;
position: absolute;
bottom: 5px;
left: 50%;
transform: translateX(-50%);
z-index: 1;
cursor: pointer;
}
.circle li {
width: 10px;
line-height: 20px;
height: 50%;
border: 1px solid ivory;
border-radius: 50%;
float: left;
margin: 0 10px;
}
.current {
background-color: ivory;
}
JavaScript部分
// 1.等到页面加载结束在运行js代码
window.addEventListener('load', function() {
// 2.获取标签
var focus = this.document.querySelector('.focus');
var arrow_l = this.document.querySelector('.arrow_l');
var arrow_r = this.document.querySelector('.arrow_r');
var focusWidth = focus.offsetWidth;
// 3.鼠标上去箭头显示
focus.addEventListener('mouseenter', function() {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
// 9.1鼠标放上去定时器停止
clearInterval(timer);
timer = null;
})
// 4.鼠标上去箭头显示
focus.addEventListener('mouseleave', function() {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
// 9.2鼠标放上去定时器开启
timer = setInterval(function() {
// 手动调用点击事件,不用再调用其他的,这行命令就能直接调用了
arrow_r.click();
}, 2000);
})
// 5.动态生成小圆点,点击切换
var ul = focus.children[2];
var circle = this.document.querySelector('.circle');
// console.log(ul);
for(var i = 0; i<ul.children.length; i++) {
var li = this.document.createElement('li');
li.setAttribute('index', i);
circle.appendChild(li);
li.addEventListener('click', function() {
// 排他原理
for(var i = 0; i<circle.children.length; i++) {
// 干掉所有人
circle.children[i].className = '';
}
// 保留我自己
this.className = 'current';
var index = this.getAttribute('index');
num = index;
circleNum = index;
animate(ul, -index * focusWidth);
})
}
// 第一个默认上色
circle.children[0].className = 'current';
// 克隆第一张图片放在最后
var ulFirst = ul.children[0].cloneNode(true);
ul.appendChild(ulFirst);
// 6.点击右键头向右滚动
var num = 0;
var circleNum = 0;
// 10.设置节流阀,一张过去之后,下一张才能点击
var flag = true;
arrow_r.addEventListener('click', function() {
if(flag) {
// 关闭节流阀,也就是关闭程序
flag = false;
if(num == ul.children.length -1) {
// 消除从最后一张移到第二张的动画,看起来像是无缝滚动
ul.style.left = 0;
num = 0;
}
num ++;
animate(ul, -num * focusWidth, function() {
flag = true;
});
circleNum++;
/* if(circleNum == circle.children.length) {
circleNum = 0;
} */
//与上面三行代码效果一样,只不过换成了三元表达式
circleNum = circleNum == circle.children.length ? 0 : circleNum;
circleChange();
}
})
// 7.点击左箭头向左移动
arrow_l.addEventListener('click', function() {
if(flag) {
flag = false;
if(num == 0) {
// 消除从最后一张移到第二张的动画,看起来像是无缝滚动
num = ul.children.length -1;
ul.style.left = - num * focusWidth + 'px';
}
num--;
// 大体上都是在水平移动所以这里的target必须是负值
animate(ul, -num * focusWidth, function() {
flag = true;
});
circleNum--;
// 如果小圆点位于第一个,那么它的位置就是0,circleNum就要回到最后一个
/* if(circleNum < 0) {
circleNum = circle.children.length -1;
} */
//与上面三行代码效果一样,只不过换成了三元表达式
circleNum = circleNum < 0 ? circle.children.length -1 : circleNum;
circleChange();
}
})
function circleChange() {
for(var i = 0; i < circle.children.length; i++) {
// 干掉所有人
circle.children[i].className = '';
}
// 保留我自己
circle.children[circleNum].className = 'current';
}
// 8.自动轮播
var timer = setInterval(function() {
// 手动调用点击事件,不用再调用其他的,这行命令就能直接调用了
arrow_r.click();
}, 2000)
})
动画封装部分
function animate(obj, target, callback) {
// console.log(callback); 输出的是一个函数,回调函数因该在定时器结束后执行
var step = 0;
// 先清除以前的定时器,只保留当前定时器
clearInterval(obj.timer);
// obj.timer给obj添加timer属性,防止多个对象调用混乱(var timer)
obj.timer = setInterval(function(e) {
// 为了防止步长出现小数,向前走向上取整,向后走向下取整
step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft == target) {
clearInterval(obj.timer);
// 定时器结束后就立即执行回调函数
if(callback) {
callback();
}
}
obj.style.left = step + obj.offsetLeft + 'px';
}, 15);
}
如果有更好的方法,或修改建议,欢迎评论或私聊