效果
代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
.content {
width: 400px; /*輪播圖的寬度*/
height: 250px; /*輪播圖的高度*/
border: 1px solid #ccc;
margin: 100px auto;
/* padding: 10px; */
}
.slideContainer{
width: 400px;
height: 250px;
position: relative;
overflow: hidden;
}
.slideContainer ul {
height: 400px;
width: 250px; /*在js中重新計算 寬度應為其中所有li的寬度之和*/
position: absolute;
list-style: none;
left:0;
top: 0;
}
.slideContainer ul li {
float: left;
width: 400px;
height: 250px;
}
.slideContainer ul li img{
height: 100%;
width: 100%;
}
.bar {
position: absolute;
height: 20px;
bottom: 20px;
left: 0;
right: 0;
text-align: center;
padding: 5px;
}
.bar li{
display: inline-block;
width: 20px;
height: 20px;
border-radius: 10px;
line-height: 20px;
background-color: rgb(141, 143, 146);
cursor: pointer;
}
ol .current{
background-color: white;
}
#change{
display: none;
}
#change span{
width: 40px;
height: 40px;
position: absolute;
left: 5px;
top: 50%;
margin-top: -20px;
background: #fff;
cursor: pointer;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: '黑體';
font-size: 30px;
color: #000;
opacity: 0.5;
border: 1px solid #fff;
}
#change #right {
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="content">
<div class="slideContainer">
<!--輪播圖-->
<ul>
<li><a href="#"><img src="images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="images/4.jpg" alt=""></a></li>
</ul>
<ol class="bar">
<li index="1">1</li>
<li index="2">2</li>
<li index="3">3</li>
<li index="4">4</li>
</ol>
<!--左右焦點-->
<div id="change">
<span id="left">
<
</span>
<span id="right">
>
</span>
</div>
</div>
</div>
<script>
/* 定義一些全域變數 獲取dom節點 */
var slideContainer=document.querySelector('.slideContainer');
var imgUlNode=document.querySelector('.slideContainer ul');
// var imgLiNodes = imgUlNode.querySelectorAll('li'); // 這樣不行
var imgLiNodes=imgUlNode.children; // 要這樣 因為后面會往ul中添加一個li
var buttonOlNode=document.querySelector('.bar');
var buttonLiNodes = document.querySelectorAll('.bar li')
var change=document.querySelector('#change');
// const width = imgLiNodes[0].style.width // 這個只能讀寫行內樣式 所以不行
var imgWidth=slideContainer.offsetWidth;
var right=document.querySelector('#right');
var left=document.querySelector('#left');
var pic=0; // 全域變數 標識當前顯示的圖片
/* 初始設定 */
buttonOlNode.children[0].className = "current"; // 設定第一個小圓點樣式
// 為了實作從最后一張圖無縫過渡到第一張圖 在最后追加一張第一張圖
imgUlNode.appendChild(imgUlNode.children[0].cloneNode(true)); // 克隆一個ul中第一個li,加入到ul中的最后
imgUlNode.style.width = imgLiNodes.length*imgWidth + 'px' // 設定圖片容器的寬度
/* 啟動輪播圖 */
var timeId=setTimeout(onmouseclickHandle,1000);
function onmouseclickHandle() {
clearTimeout(timeId)
// 如果當前在顯示最后一張圖（實際相當于顯示第一張圖）需要瞬間(無過渡)切換到第一張圖
// 因為第一張圖和最后一張圖是一樣的
if (pic == imgLiNodes.length - 1) {
pic = 0; // 先設定pic=0
imgUlNode.style.transition = ''; // 取消過渡
imgUlNode.style.left = 0 + "px"; // 設定為第一張圖
// 這里設定100ms是因為頁面的修改是異步的 并不是我們在上面設定了left的值 頁面馬上就會改變
// 而是會在瀏覽器下次頁面重繪的時候才修改 所以這里設定100ms再進行操作
timeId=setTimeout(onmouseclickHandle, 100);
}
else {
pic++;
imgUlNode.style.transition = 'left 1s' // 其他情況下是有過渡的
imgUlNode.style.left = -pic*imgWidth + 'px'
if (pic == imgLiNodes.length - 1) {
// 小圓點樣式設定
buttonLiNodes[buttonLiNodes.length - 1].className = "";
buttonLiNodes[0].className = "current";
timeId=setTimeout(onmouseclickHandle,900); // 注意這里是900ms 900ms+100ms=1000ms
} else {
// 小圓點樣式設定
for (var i = 0; i < buttonLiNodes.length; i++) {
buttonLiNodes[i].removeAttribute("class");
}
buttonLiNodes[pic].className = "current";
timeId=setTimeout(onmouseclickHandle,1000);
}
}
}
/* 系結互動事件 */
// 為小圓點系結點擊事件
for(var i=0;i<buttonLiNodes.length;i++){
//為按鈕注冊mouseover事件
buttonLiNodes[i].onclick=function () {
//先清除所有按鈕的樣式
for (var j=0;j<buttonLiNodes.length;j++){
buttonLiNodes[j].removeAttribute("class");
}
this.className="current";
pic=this.getAttribute("index");
imgUlNode.style.left = -pic*imgWidth + 'px'
}
}
// 滑鼠移入輪播圖暫停輪播
slideContainer.onmouseover=function () {
change.style.display="block";
clearTimeout(timeId);
};
// 滑鼠移出輪播圖重啟輪播
slideContainer.onmouseout=function () {
change.style.display="none";
clearTimeout(timeId)
timeId=setTimeout(onmouseclickHandle, 1000);
};
// 點擊右邊的bar
right.onclick=onmouseclickHandle;
// 點擊左邊的bar
left.onclick=function () {
if (pic==0){
pic=imgLiNodes.length-1;
imgUlNode.style.left=-pic*imgWidth+"px";
}
pic--;
imgUlNode.style.left = -pic*imgWidth + 'px'
for (var i = 0; i < buttonOlNode.children.length; i++) {
buttonOlNode.children[i].removeAttribute("class");
}
buttonOlNode.children[pic].className = "current";
};
</script>
</body>
</html>
關鍵部分
使用setTimeout來對left值進行修改，然后在回呼函式中又啟動另一次的setTimeout，
并且配合css3的過渡實作滑動的效果，只需要注意怎么從最后一張圖片滑到第一張，方案是將第一張圖片拷貝一個結點放到最后，
還需要通過js修改樣式后，實際不是馬上更新的，而是再下一次重繪的時機做的更新，頁面重繪的頻率一般可以認為是60ms，
參考
《JS實作圖片輪播效果（自動和手動）》
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/290680.html
標籤：其他
上一篇：react基本使用及其安裝