輪播圖的基本樣式代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>輪播圖效果</title>
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
li {
list-style: none;
}
.box {
position: relative;
top: 100px;
margin: 0 auto;
width: 576px;
height: 324px;
overflow: hidden;
background-color: pink;
}
.wardbtn {
display: none;
position: absolute;
top: 50%;
margin-top: -30px;
width: 30px;
height: 60px;
line-height: 60px;
text-align: center;
font-size: 20px;
color: #fff;
background-color: rgba(0 , 0 , 0 , .3);
}
.wardbtn:hover {
color: #999;
}
.left {
left: 0;
border-radius: 0 30px 30px 0;
}
.right {
right: 0;
border-radius: 30px 0 0 30px;
}
.dot {
position: absolute;
bottom: 10px;
left: 50%;
margin-left: -30px;
width: 60px;
height: 20px;
}
.dot li {
float: left;
width: 10px;
height: 10px;
margin: 5px ;
border-radius: 50%;
background-color: #fff;
cursor: pointer;
}
.dot .select {
background-color: #999;
}
.imgs {
position: absolute;
top: 0;
left: 0;
width: 2304px;
}
.box img {
display: inline-block;
float: left;
width: 576px;
}
</style>
</head>
<body>
<div class="box">
<div class="imgs">
<img src="jin.png" alt="">
<img src="Jinx.jpg" alt="">
<img src="Riven2.jpg" alt="">
<img src="jin.png" alt="">
</div>
<a href="javascript:;" class="wardbtn left"><</a>
<a href="javascript:;" class="wardbtn right">></a>
<ul class="dot">
<li class="select"></li>
<li></li>
<li></li>
</ul>
</div>
<script src="TurnRoundPic.js"></script>
<script type="text/javascript">
var box = document.querySelector('.box');
turnRoundPic(box);
</script>
</body>
</html>
輪播圖思路以及JS代碼如下：
/*
1.獲取按鈕元素
2.獲取圖片元素節點
3.獲取小圓點元素
圖片自動更換動畫效果
4.點擊左右按鈕實現圖片切換的動畫效果
5.動畫效果
獲取元素
目標位置與當前位置的差值
正值ceil
負值floor
每次調動前清除一遍動畫
6.點擊小圓點實現圖片的切換
7.圖片切換時小圓點樣式選中
*/
/*
封裝內容：
animate 動畫函數 animate(移動對象， 偏移位置， 回調函數)
count 頁面計數器
length 單個頁面寬度，即一次位移的偏移量
leftb 左按鈕
rightb 右按鈕
lis 小圓點數組
imgs 圖片數組（可選由ul實現）
*/
/*動畫函數*/
function animate(box, trapos,callback) {
clearInterval(box.move); /*點擊之後消除上一次動畫，防止未完成的動畫與當前動畫發生衝突*/
box.move = setInterval(function() {
var left = box.offsetLeft;
var step = trapos - left;
step = step > 0 ? Math.ceil(step / 10) : Math.floor(step / 10);
if( step == 0) {
clearInterval(box.move);
}
box.style.left = left + step + 'px';
}, 20)
if(callback) {
callback();
}
}
/*
小圓點被選中函數
count 當前的計數值， lis小圓點列表
*/
function getSelect(count, lis) {
if(count >= 3) {
count = 0;
} else if(count < 0) {
count = 2;
}
for(var i = 0 ;i < lis.length; i++) {
lis[i].className = '';
}
lis[count].className = 'select';
}
/*輪播圖主函數*/
function turnRoundPic(box) {
/*獲取元素節點*/
var length = 576;
var count = 0;
var leftb = box.querySelector('.left');
var rightb = box.querySelector('.right');
var lis = box.querySelectorAll('li');
var imgs = box.querySelector('.imgs');
/*設置初始定時器----全局變量*/
fn = setInterval(function() {
count++;
if(count > 3) {
imgs.style.left = 0 + 'px';
count = 1;
}
getSelect(count, lis);
animate(imgs, - length * count);
}, 3000);
/*輪播圖盒子事件監聽
鼠標放在盒子上，左右箭頭按鈕出現，自動輪播停止
*/
box.addEventListener('mouseenter', function() {
leftb.style.display = 'block';
rightb.style.display = 'block';
clearInterval(fn);
})
/*輪播圖盒子事件監聽
鼠標離開盒子，左右箭頭按鈕消失，自動輪播開始
*/
box.addEventListener('mouseleave', function() {
leftb.style.display = 'none';
rightb.style.display = 'none';
fn = setInterval(function() {
count++;
if(count > 3) {
imgs.style.left = 0 + 'px';
count = 1;
}
getSelect(count, lis);
animate(imgs, - length * count);
}, 3000);
})
/*左按鈕事件，點擊查看下一張圖片*/
leftb.addEventListener('click', function() {
clearInterval(fn);
if(count >= 3) {
imgs.style.left = 0 + 'px';
count = 0;
}
count ++;
animate(imgs, -length * count);
console.log(count);
getSelect(count, lis);
})
/*右按鈕事件，點擊查看上一張圖片*/
rightb.addEventListener('click', function() {
clearInterval(fn);
if(count <= 0) {
imgs.style.left = - length * 3 + 'px';
count = 3;
}
count --;
animate(imgs, -length * count);
console.log(count);
getSelect(count, lis);
})
/*點擊小圓點，跳轉指定圖片頁面*/
for(var i = 0; i < lis.length; i++){
lis[i].setAttribute('index', i);
lis[i].addEventListener('click', function() {
clearInterval(fn);
animate(imgs, - length * this.getAttribute('index'));
getSelect(this.getAttribute('index'), lis);
})
}
}