给大家先讲一下大致思路：
1，先获取；
2，左右按钮分别给点击事件，点击下一张图片，除下一张其他图片都要隐藏，这时就要用到排他思想，
3，让他自己执行，就要用到定时器；
4，鼠标划进去，图片自执行停止，就得清除定时器；鼠标划出去，图片继续播放；
5，点击图片导航切换图片需要用到tab切换原理；
具体代码如下：
HTML部分
<body>
<div>
<ul >
<li class="active"><img src="./images/movie1.jpg" alt=""></li>
<li><img src="./images/movie10.jpg" alt=""></li>
<li><img src="./images/movie9.jpg" alt=""></li>
<li><img src="./images/movie8.jpg" alt=""></li>
<li><img src="./images/movie7.jpg" alt=""></li>
<li><img src="./images/movie6.jpg" alt=""></li>
</ul>
<ol>
<li class="sky">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ol>
<span id="zuo"><</span>
<span id="you">></span>
</div>
</body>
<script src="./js/index.js">
css样式
* {
margin: 0;
padding: 0;
list-style: none;
}
@mixin wh($w, $h, $b) {
width: $w;
height: $h;
background-color: $b;
}
div {
@include wh(1000px, 560px, none);
margin: 0 auto;
position: relative;
ul {
li {
@include wh(100%, 550px, none);
display: none;
img {
@include wh(100%, 100%, none);
}
}
.active {
display: block;
}
}
ol{
position: absolute;
bottom: 30px;
float: left;
li{
@include wh(40px,40px,#fc2);
float: left;
color: #ffffff;
border-radius: 50%;
text-align: center;
line-height: 40px;
font-size: 25px;
margin-left: 50px;
}
.sky{
background-color: red;
color: #ffffff;
}
}
span {
@include wh(80px, 120px, rgba(34, 23, 45, 0.5));
position: absolute;
top: 50% ;
margin-top:-60px;
font-size: 50px;
line-height: 120px;
text-align: center;
color: #ffffff;
&:nth-of-type(1){
position: absolute;
left: 0px;
}
&:nth-of-type(2){
position: absolute;
right: 0px;
}
}
}
js部分，我们先获取
var zuo = document.querySelector('#zuo');//获取第一个按钮
var you = document.querySelector('#you');//获取第二个按钮
var imgs = document.querySelectorAll('ul li');//获取图片
var ol_lis = document.querySelectorAll('ol li');//获取li
var divs = document.querySelector('div');//获取div
var index = 0,time = null;//下标从0开始，为了让每秒下标增加|减少，让下标对应的图片显示，其他图片隐藏；
给右边那妞点击事件
you.onclick = function () {//右按钮点击事件
index++; //图片要跟随下标增加，让下标对应的图片显示；
if (index > imgs.length - 1) { //到最后一张图片，然后下标归为0
index = 0 //下标归0
}
getauto()//排他思想调用
}
左边按钮点击事件
zuo.onclick = function () {//左边点击事件
index--;//点击跟随下标减少，让下标对应的图片显示，其他图片隐藏；
if (index < 0) {
index = imgs.length - 1;//返回最后一张图片
}
getauto();//排他调用
}
给定时器函数封装
function getrr() {
index++; //图片要跟随下标增加，让下标对应的图片显示；
if (index > imgs.length - 1) { //到最后一张图片，然后下标归为0
index = 0 //下标归0
}
for (var i = 0; i < imgs.length; i++) {
//排他思想
imgs[i].classList.remove('active');//当前项移除
ol_lis[i].classList.remove('sky');//li与图片相对应移除；
}
imgs[index].classList.add('active');//添加下一项
ol_lis[index].classList.add('sky');//li与图片相对应增加
定时器，让他自己执行
time = setInterval(getrr, 1000);//定时
divs.onmouseover = function () {//鼠标划进去
clearInterval(time);//清除定时器
time = null;//将定时器赋空
}
divs.onmouseout = function () {//鼠标划出去
time = setInterval(getrr, 1000);//定时器继续执行
}
封装排他
function getauto() {
for (var i = 0; i < imgs.length; i++) {
//排他思想
imgs[i].classList.remove('active');//当前项移除
ol_lis[i].classList.remove('sky');//li与图片相对应移除；
}
imgs[index].classList.add('active');//添加下一项
ol_lis[index].classList.add('sky');//li与图片相对应增加
}
点击图片导航让对应的图片显示出来
for (var i = 0; i < ol_lis.length; i++) {
getxia();//调用函数
}
function getxia() {//封装函数
(function (ind) {
ol_lis[ind].onclick = function () {//ol里每个li的点击事件
for (var j = 0; j < ol_lis.length; j++) {
index = ind//将原点的下标和图片同步
//排他思想
imgs[j].classList.remove('active');
ol_lis[j].classList.remove('sky');
}
imgs[ind].classList.add('active');
ol_lis[ind].classList.add('sky');
}
})(i)
}
。。。大家可以试着尝试一下
