JS实战002:带点选的滑动轮播图
1、 前面我们已经实现了在设置好的时间间隔内对图片进行自动轮播，然后点击左右箭头进行图像的切换，当鼠标移入/移出控制轮播图的停止/继续，现在我们新增一个页码（有时候只是个按钮）。
2、 首先我们先来实现底下页码跟随左右切换按钮进行自动切换，这里的原理就是将span的属性进行更改，为了方便我把原来的span按钮改成了a链接，在picture下面我们添加一个page的div，里面附上和轮播图一样多的span元素，这样我们的DOM中就只有页码的span元素了，这样定位起来比较方便。
3、 当然我们也可以通过获取img的数量动态生成页码数量，首先我们需要先获取page元素，然后在page下动态添加span标签，默认第一个span给定一个class，给这个输定定义一个背景色，当我切换页码时把这个class属性动态赋给对应的span标签。
4、 接下来我们要实现的就是class=“show”属性的切换，定义一个index与move一样初始值为0，每次点击切换按钮的时候随着加减，然后把这个index带入到span中去遍历属性，将index以外的其他span标签中的class属性清空，然后将index对应的span属性添加class=“show”属性，这样对应的span就和图片一样动态的切换起来了。
5、 我写了一个showPage函数，然后把这个函数加入到animate方法中，当执行animate时就会触发showPage方法了，这样每次点击切换按钮的时候页码就会随之变换，加上自动属性这样就可以直接载入时就自动切换了，但是现在点击或者将鼠标移入标签还是无法切换到指定的页面，接下来我们开始实现这个功能。
6、 实现任意切换的方法很简单，和我们的上下切换方法很相似，只是把没点击一次将move属性自增1改成当前页的值即可，我这里是直接获取的span标签中的值，如果没有值的话就直接赋值i，当move值到了最后一张图时又回到第一张如此循环即可。
7、通过以上的新增我们就得到了前面的演示效果了，下面是完整的代码，有兴趣的可以试试：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Picture Carousel</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
a{
text-decoration: none;
}
.Carousel{
position: relative;
width:600px;
height:400px;
margin:50px auto;
overflow: hidden;
border:10px solid rgba(189, 184, 184,0.5);
z-index: 1;
}
#picture{
position: absolute;
width: 2400px;
height: 400px;
}
#picture img{
float: left;
width:600px;
height:400px;
}
.Carousel .page{
position: absolute;
left:50%;
transform: translateX(-50%);
bottom: 30px;
height: 10px;
z-index: 2;
}
.Carousel .page span{
display: inline-block;
width:30px;
line-height: 30px;
width: 30px;
margin-left:20px;
text-align: center;
font-weight: 900;
color:white;
background: rgba(111, 112, 112,0.6);
cursor: pointer;
}
.Carousel .page span.show{
background-color: rgb(15, 151, 241);
}
.Carousel .arrow{
cursor: pointer;
position:absolute;
top:40%;
padding:10px 15px;
background-color: rgba(255, 255, 255,0.8);
display: inline-block;
font-size: 50px;
z-index: 2;
color:rgb(161, 157, 157);
font-weight: bold;
display: none;
}
.Carousel .arrow_left{
left:0;
}
.Carousel .arrow_right{
right: 0;
}
.Carousel:hover .arrow{
display: block;
}
.Carousel .arrow:hover{
background-color: rgb(15, 151, 241);
font-weight: bold;
color:white;
}
</style>
</head>
<body>
<div class="Carousel">
<div id="picture">
<img src="../src/assets/images/1.png" alt="">
<img src="../src/assets/images/2.png" alt="">
<img src="../src/assets/images/3.png" alt="">
<img src="../src/assets/images/1.png" alt="">
</div>
<div class="page">
<span class="show">1</span>
<span>2</span>
<span>3</span>
</div>
<a href="javascript:;" class="arrow arrow_left"><</a>
<a href="javascript:;" class="arrow arrow_right">></a>
</div>
</body>
<script type="text/javascript">
var pic =document.getElementById('picture');
var next = document.querySelector(".arrow_right");
var prev = document.querySelector(".arrow_left");
var Carousel = document.querySelector(".Carousel");
var pages = document.getElementsByTagName('span');
var imgwidth=pic.children[0].offsetWidth;
var move= 0 ;
var index = 0;
for(var i=0;i<pages.length;i++){
pages[i].onmouseover =function(){
move=this.innerHTML-1;
index=move;
if(move==pic.children.length-1){
move=0;
pic.style.left=0+"px";
}
animate(pic,-move*imgwidth);
}
}
next.onclick=function(){
if(move==pic.children.length-1){
move=0;
pic.style.left=0+"px";
}
move++;
animate(pic,-move*imgwidth);
index++;
if(index>2){
index=0;
}
console.log("index="+index)
}
prev.onclick=function(){
if(move==0){
move=pic.children.length-1;
pic.style.left=-move*imgwidth+"px";
}
move--;
animate(pic,-move*imgwidth);
index--;
if(index<0){
index=2;
}
console.log("index="+index)
}
var timer = null;
function autoPlay () {
timer = setInterval(function () {
next.onclick();
},2000);
}
autoPlay();
Carousel.onmouseenter = function () {
clearInterval(timer);
}
Carousel.onmouseleave = function () {
autoPlay();
}
function animate(element,distance){
clearInterval(element,timer)
element.timer=setInterval(function(){
var present=element.offsetLeft;//获取元素的当前的位置
var movement=10;//每次移动的距离
movement=present<distance?movement:-movement;
present+=movement;//当前移动到位置
if(Math.abs(present-distance)>Math.abs(movement)){
element.style.left=present+"px"
}else{
clearInterval(element.timer);
element.style.left=distance+"px"
}
showPage ()
},10);
}
function showPage () {
for(var i = 0;i < pages.length; i++){
pages[i].className = '';
}
pages[index].className = 'show';
}
</script>
</html>