輪播圖
功能需求：
- 鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。
- 點擊右側(cè)按鈕一次，圖片往左播放一張， 左側(cè)按鈕同理。
- 圖片播放的同時，下面小圓圈模塊跟隨一起變化。
- 點擊小圓圈，可以播放相應(yīng)圖片。
- 鼠標(biāo)不經(jīng)過輪播圖， 輪播圖也會自動播放圖片。
- 鼠標(biāo)經(jīng)過，輪播圖模塊， 自動播放停止。
輪播圖JavaScript源碼在最下面
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 這個animate.js 必須寫到 index.js的上面引入 -->
<script src='./JS/animate.js'></script>
<!-- 引入我們首頁的js文件 -->
<script src="./JS/index.js"></script>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="w">
<div class="main">
<div class="focus fl">
<!-- 左側(cè)按鈕 -->
<a href="javascript:;" class="arrow-l">
?
</a>
<!-- 右側(cè)按鈕 -->
<a href="javascript:;" class="arrow-r"> ?</a>
<!-- 核心的滾動區(qū)域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圓圈 -->
<ol class="circle">
</ol>
</div>
</div>
</div>
</body>
</html>
index.css
.w {
width: 1200px;
margin: 0 auto;
}
/*清除元素默認(rèn)的內(nèi)外邊距 */
* {
margin: 0;
padding: 0
}
/*去掉列表前面的小點*/
li {
list-style: none;
}
/*讓button 按鈕 變成小手*/
button {
cursor: pointer;
}
/*取消鏈接的下劃線*/
a {
color: #666;
text-decoration: none;
}
/*清除浮動*/
a {
color: #666;
text-decoration: none;
}
.main {
width: 900px;
height: 455px;
margin-left: 219px;
margin-top: 10px;
}
.fl {
float: left;
}
.focus {
position: relative;
width: 721px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠標(biāo)經(jīng)過顯示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
animate.js
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 調(diào)用的時候 callback()
// 先清除以前的定時器，只保留當(dāng)前的一個定時器執(zhí)行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步長值寫到定時器的里面
// 把我們步長值改為整數(shù) 不要出現(xiàn)小數(shù)的問題
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止動畫 本質(zhì)是停止定時器
clearInterval(obj.timer);
// 回調(diào)函數(shù)寫到定時器結(jié)束里面
// if (callback) {
// // 調(diào)用函數(shù)
// callback();
// }
callback && callback();
}
// 把每次加1 這個步長值改為一個慢慢變小的值 步長公式：(目標(biāo)值 - 現(xiàn)在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
輪播圖JavaScript分解
1.新建js文件， 引入頁面中。鼠標(biāo)經(jīng)過輪播圖模塊，左右按鈕顯示，離開隱藏左右按鈕。
第一步獲取左右按鈕，添加鼠標(biāo)經(jīng)過和離開事件，鼠標(biāo)經(jīng)過，顯示左右按鈕，鼠標(biāo)離開，隱藏左右按鈕
2.動態(tài)生成底部小圓圈
獲取ul和ol元素，通過創(chuàng)建元素的方式，添加li元素，然后將第一個li元素的小圓點默認(rèn)背景為白色
其中小圓點的css代碼實現(xiàn)為：
效果如下：
3.點擊哪個小圓圈，哪個小圓圈就變背景色（排他思想）
之所以在創(chuàng)建li的時候添加點擊事件是因為，每一個小li都需要添加如果將點擊事件放在for循環(huán)外面，那么只有最后一個li添加了點擊事件
4.點擊小圓圈切換圖片
- 此時用到animate動畫函數(shù)，將js文件引入（注意，因為index.js 依賴 animate.js 所以，animate.js 要寫到
index.js 上面） - 使用動畫函數(shù)的前提，該元素必須有定位
- 是ul 移動 而不是小li
- 滾動圖片的核心算法： 點擊某個小圓圈 ， 就讓圖片滾動 小圓圈的索引號乘以圖片的寬度做為ul移動距離
- 此時需要知道小圓圈的索引號， 我們可以在生成小圓圈的時候，給它設(shè)置一個自定義屬性，點擊的時候獲取這個自定義屬性即可。
5.點擊右側(cè)按鈕，圖片滾動
點擊右側(cè)按鈕一次，就讓圖片滾動一張。 聲明一個變量num， 點擊一次，自增1， 讓這個變量乘以圖片寬度，就是 ul的滾動距離。圖片無縫滾動原理：把ul 第一個li 復(fù)制一份，放到ul 的最后面 當(dāng)圖片滾動到克隆的最后一張圖片時， 讓ul快速的、不做動畫的跳到最左側(cè)： left 為0 同時num 賦值為0，可以從新開始滾動圖片了
但是這樣做會出現(xiàn)一個問題：第一個是下面的小圓圈會多一個，第二個是靈動性不好，所以我們可以把在最后添加li的方法改為克隆第一張圖片的方法
優(yōu)化方法：克隆最后一張圖片
克隆第一張圖片，克隆ul 第一個li cloneNode() 加true 深克隆 復(fù)制里面的子節(jié)點 false 淺克隆 添加到 ul 最后面 appendChild
6.點擊右側(cè)按鈕，小圓圈跟隨一起變化
7.點擊左側(cè)按鈕，實現(xiàn)翻轉(zhuǎn)（方法與右側(cè)按鈕類似）
8.實現(xiàn)自動播放功能，并且鼠標(biāo)在圖片時，不切換圖片，鼠標(biāo)離開，自動切換圖片
在上面鼠標(biāo)經(jīng)過和鼠標(biāo)離開分別添加停止和開啟定時器的功能文章來源：http://www.zghlxwxcb.cn/news/detail-776885.html
index.js完整源碼文章來源地址http://www.zghlxwxcb.cn/news/detail-776885.html
window.addEventListener('load', function () {
//獲取左右按鈕
var arrow_l = document.querySelector('.arrow-l');
var arrow_r = document.querySelector('.arrow-r');
var focus = document.querySelector('.focus');
var focusWidth = focus.offsetWidth;
//鼠標(biāo)經(jīng)過顯示左右按鈕，停止定時器
focus.addEventListener('mouseenter', function () {
arrow_l.style.display = 'block';
arrow_r.style.display = 'block';
clearInterval(timer);
timer = null;//清除定時器
})
//鼠標(biāo)離開隱藏按鈕，開啟定時器
focus.addEventListener('mouseleave', function () {
arrow_l.style.display = 'none';
arrow_r.style.display = 'none';
timer = setInterval(function(){
//手動調(diào)用點擊事件
arrow_r.click();
},2000)
})
//動態(tài)生成小圓圈，有幾張圖生成幾個小圓圈，圖的個數(shù)可以通過li的個數(shù)得到
var ul = focus.querySelector('ul');//ul很多，我們只需要fucus里面的ul
var ol = focus.querySelector('.circle')
//通過ul.children.length可以獲得ul中有幾個li，即有幾張圖片
for (var i = 0; i < ul.children.length; i++) {
//創(chuàng)建li，把li插入到ol中
var li = document.createElement('li');
li.setAttribute('index', i);//自定義設(shè)置小圓圈的索引號
ol.appendChild(li);
//生成小圓圈的同時，綁定小圓圈的點擊事件
li.addEventListener('click', function () {
//排他思想，先把所有的li全部去除類
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//點擊哪個li就設(shè)置哪個li為current類
this.className = 'current';
//點擊小圓圈移動圖片，移動的是ul，不是li
//ul的移動距離就是小圓圈的索引號乘以圖片的寬度,向左移動，是負(fù)值
//點擊哪個li，就獲得哪個li的索引號
var index = this.getAttribute('index');//獲取索引號
//當(dāng)我們點擊了某個li，就要把當(dāng)前的索引號給num
num = index;
//當(dāng)我們點擊了某個li，就要把當(dāng)前的索引號給circle
circle = index;
animate(ul, -index * focusWidth);
})
//之所以在創(chuàng)建li的時候添加點擊事件是因為，每一個小li都需要添加
//如果將點擊事件放在for循環(huán)外面，那么只有最后一個li添加了點擊事件
}
//把ol中第一個li設(shè)置current類（第一個li默認(rèn)為白色）
ol.children[0].className = 'current';
//克隆第一張圖片
//克隆不會多出一個小圓圈的原因是，我們在生成小圓圈的下面克隆了第一張圖片，因此不會在多出小圓圈
var first = ul.children[0].cloneNode(true);//深拷貝
ul.appendChild(first);
var num = 0;
//點擊右側(cè)按鈕，圖片滾動
var circle = 0;
arrow_r.addEventListener('click', function () {
//如果走到最后一張圖片，此時我們的ul要快速復(fù)原，left改為0
if (num == ul.children.length - 1) {
ul.style.left = 0;
num = 0;
}
num++;
animate(ul, -num * focusWidth);
//點擊右側(cè)按鈕，小圓圈跟隨一起變化 ，可以再聲明一個變量控制小圓圈的播放
circle++;
//如果circle ==4，說明我們走到了最后克隆的那張圖片了，此時circle要賦值為0
if (circle == ol.children.length) {
circle = 0;
}
//先清除其余小圓圈的類名，在留下當(dāng)下小圓圈的類名（排他思想）
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//左側(cè)按鈕實現(xiàn)向左滾動
arrow_l.addEventListener('click', function () {
//如果走到最后一張圖片，此時我們的ul要快速復(fù)原，left改為0
if (num == 0) {
num = ul.children.length - 1;
ul.style.left = -num * focusWidth + 'px';
}
num--;
animate(ul, -num * focusWidth);
//點擊右側(cè)按鈕，小圓圈跟隨一起變化 ，可以再聲明一個變量控制小圓圈的播放
circle--;
//如果circle <0，第一個小圓圈要改為第四個小圓圈
if (circle <0) {
circle = ol.children.length - 1;
}
//先清除其余小圓圈的類名，在留下當(dāng)下小圓圈的類名（排他思想）
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
ol.children[circle].className = 'current';
})
//實現(xiàn)自動播放功能
var timer = setInterval(function(){
//手動調(diào)用點擊事件
arrow_r.click();
},2000)
})
到了這里，關(guān)于PC端網(wǎng)頁特效：輪播圖的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
