我們在瀏覽網(wǎng)頁的時候撒遣,大部分都會看見中間有幾張圖片在自己走動,今天就教一下大家怎么實現(xiàn)
首先我們要在html中排個版,在body里邊
<div class="box">
<ul>
<li><img src="../imgs/1.jpg" alt=""></li>
<li><img src="../imgs/2.jpg" alt=""></li>
<li><img src="../imgs/3.jpg" alt=""></li>
<li><img src="../imgs/4.jpg" alt=""></li>
<li><img src="../imgs/5.jpg" alt=""></li>
<li><img src="../imgs/6.jpg" alt=""></li>
<li><img src="../imgs/7.jpg" alt=""></li>
</ul>
<button id="left"><</button>
<button id="right">></button>
<ol>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
接下來我們在scss里邊給設(shè)置一下樣式
.box {
width:800px;
height:380px ;
position: relative;
margin: 0 auto;
ul {
width:800px;
height:380px ;
overflow: hidden;
li {
width:800px;
height:380px ;
img {
width:800px;
height:380px ;
}
}
}
button {
width:60px;
height:80px
position: absolute;
top: 50%;
margin-top: -40px;
background-color: rgba(0, 0, 0, 0.4);
color: #fff;
font-size: 40px;
border: none;
}
#right{
position: absolute;
right: 0px;
}
ol{
position: absolute;
bottom:50px;
left:135px;
li{
width: 20px;
height: 20px;
background-color: #fff;
border-radius: 50%;
margin:0px 30px;
float: left;
}
.active{
background-color: pink;
}
}
}
接下來就是js部分
var list = document.querySelectorAll('ul li') //獲取圖片列表
var rgt = document.getElementById("right") //右側(cè)點擊
var left = document.getElementById("left") //左側(cè)點擊
var box = document.getElementsByClassName("box")[0] //大盒子
var ol_list = document.querySelectorAll('ol>li'); //下面的原點
var timer = null, 定義一個計時器
ind = 0; //定義一個下標(biāo)
// 封裝排他 (只顯示自己)
function getpaita() {
for (var i = 0; i < list.length; i++) {
list[i].style = "display:none"; //所有圖片不顯示
ol_list[i].style = ''; //所有原點不顯示
}
list[ind].style = "display:block" //當(dāng)前圖片
ol_list[ind].style = "background:pink"; //當(dāng)前原點
}
// 開始輪播
function tim() {
ind++; //下標(biāo)增加
if (ind > list.length - 1) { //判斷 如果下標(biāo)到了最后臨界點則返回第一張
ind = 0;
}
getpaita() //排他
}
timer = setInterval(tim, 1000);
// 劃過停止輪播 清除定時器
box.onmouseover = function () {
clearInterval(timer);
}
// 劃出繼續(xù)執(zhí)行定時器
box.onmouseout = function () {
timer = setInterval(tim, 1000);
}
// 右擊換下一張
rgt.onclick = function () {
ind++;
if (ind > list.length - 1) {
ind = 0;
}
getpaita()
}
// 左擊換上一張
left.onclick = function () {
ind--;
console.log(ind)
if (ind < 0) {
ind = list.length - 1; //如果下標(biāo)到了前面臨界點則返回最后一張
}
getpaita()
}
// 原點 劃過顯示相對應(yīng)圖片
for (var j = 0; j < ol_list.length; j++) {
ol_list[j].ind = j;
ol_list[j].onmouseover = function () {
ind=this.ind; 跟圖片下標(biāo)同步
getpaita();
}
}
這就是一個簡單輪播肌似,可以放幾張圖片試試