給大家先講一下大致思路：
1，先獲?。?br>
2，左右按鈕分別給點擊事件，點擊下一張圖片，除下一張其他圖片都要隱藏，這時就要用到排他思想，
3，讓他自己執(zhí)行，就要用到定時器；
4，鼠標(biāo)劃進(jìn)去，圖片自執(zhí)行停止，就得清除定時器；鼠標(biāo)劃出去，圖片繼續(xù)播放；
5，點擊圖片導(dǎo)航切換圖片需要用到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;//下標(biāo)從0開始，為了讓每秒下標(biāo)增加|減少，讓下標(biāo)對應(yīng)的圖片顯示，其他圖片隱藏；
給右邊那妞點擊事件
you.onclick = function () {//右按鈕點擊事件
index++; //圖片要跟隨下標(biāo)增加，讓下標(biāo)對應(yīng)的圖片顯示；
if (index > imgs.length - 1) { //到最后一張圖片，然后下標(biāo)歸為0
index = 0 //下標(biāo)歸0
}
getauto()//排他思想調(diào)用
}
左邊按鈕點擊事件
zuo.onclick = function () {//左邊點擊事件
index--;//點擊跟隨下標(biāo)減少，讓下標(biāo)對應(yīng)的圖片顯示，其他圖片隱藏；
if (index < 0) {
index = imgs.length - 1;//返回最后一張圖片
}
getauto();//排他調(diào)用
}
給定時器函數(shù)封裝
function getrr() {
index++; //圖片要跟隨下標(biāo)增加，讓下標(biāo)對應(yīng)的圖片顯示；
if (index > imgs.length - 1) { //到最后一張圖片，然后下標(biāo)歸為0
index = 0 //下標(biāo)歸0
}
for (var i = 0; i < imgs.length; i++) {
//排他思想
imgs[i].classList.remove('active');//當(dāng)前項移除
ol_lis[i].classList.remove('sky');//li與圖片相對應(yīng)移除；
}
imgs[index].classList.add('active');//添加下一項
ol_lis[index].classList.add('sky');//li與圖片相對應(yīng)增加
定時器，讓他自己執(zhí)行
time = setInterval(getrr, 1000);//定時
divs.onmouseover = function () {//鼠標(biāo)劃進(jìn)去
clearInterval(time);//清除定時器
time = null;//將定時器賦空
}
divs.onmouseout = function () {//鼠標(biāo)劃出去
time = setInterval(getrr, 1000);//定時器繼續(xù)執(zhí)行
}
封裝排他
function getauto() {
for (var i = 0; i < imgs.length; i++) {
//排他思想
imgs[i].classList.remove('active');//當(dāng)前項移除
ol_lis[i].classList.remove('sky');//li與圖片相對應(yīng)移除；
}
imgs[index].classList.add('active');//添加下一項
ol_lis[index].classList.add('sky');//li與圖片相對應(yīng)增加
}
點擊圖片導(dǎo)航讓對應(yīng)的圖片顯示出來
for (var i = 0; i < ol_lis.length; i++) {
getxia();//調(diào)用函數(shù)
}
function getxia() {//封裝函數(shù)
(function (ind) {
ol_lis[ind].onclick = function () {//ol里每個li的點擊事件
for (var j = 0; j < ol_lis.length; j++) {
index = ind//將原點的下標(biāo)和圖片同步
//排他思想
imgs[j].classList.remove('active');
ol_lis[j].classList.remove('sky');
}
imgs[ind].classList.add('active');
ol_lis[ind].classList.add('sky');
}
})(i)
}
。。。大家可以試著嘗試一下
