JavaScript實現(xiàn)帶有子菜單和控件的slider輪播圖效果
更新時間：2017年11月01日 08:47:05 作者：Dragonir
本文通過實例代碼給大家介紹了基于js實現(xiàn)帶有子菜單和控件的slider輪播圖效果，本文附有圖片和示例代碼，非常不錯，具有參考借鑒價值，需要的朋友參考下吧
大家或許做過（照片輪播）無限滾動圖片的項目，但是，如果使用普通的滾動，當(dāng)?shù)竭_(dá)最后一張時，便會滾動回第一張，這是一個非常不好的用戶體驗。下面通過本文給大家分享基于JavaScript實現(xiàn)帶有子菜單和控件的slider輪播圖效果，具體實現(xiàn)代碼如下所示：
實現(xiàn)效果：
實現(xiàn)原理：
// 步驟
// 1. 獲取事件源以及相關(guān)元素
// 2. 復(fù)制第一張圖片所在的li，添加到ul的最后面
// 3. 給ol添加li，ul中的個數(shù)-1個，并點亮第一個按鈕
// 4. 鼠標(biāo)放到ol的li上切換圖片
// 5. 添加定時器
// 6. 左右切換圖片（鼠標(biāo)放上去隱藏，移開顯示）
實現(xiàn)代碼：
<!DOCTYPE html>
<html>
<head>
<title>輪播圖</title>
<meta charset="utf-8">
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
border: 0;
}
.all{
width: 500px;
height: 200px;
padding: 7px;
margin: 100px auto;
position: relative;
box-shadow: 1px 1px 5px #2d2d2d;
}
.screen{
width: 500px;
height: 200px;
overflow: hidden;
position: relative;
}
.screen li{
width: 500px;
height: 200px;
overflow: hidden;
float: left;
}
.screen ul{
position: absolute;
left: 0;
top: 0;
width: 3000px;
}
.all ol{
position: absolute;
right: 10px;
bottom: 10px;
line-height: 20px;
text-align: center;
}
.all ol li{
float: left;
width: 20px;
height: 20px;
text-align: center;
background-color: #fff;
border: 1px solid #ccc;
margin-left: 10px;
cursor: pointer;
}
.all ol li.current{
background-color: #03c03c;
}
#arr{
display: none;
}
#arr span{
width: 40px;
height: 40px;
left: 5px;
top: 50%;
position: absolute;
margin-top: -20px;
background-color: #000;
cursor: pointer;
line-height: 35px;
text-align: center;
font-weight: bold;
font-family: "微軟雅黑";
font-size: 30px;
color: #fff;
opacity: 0.3;
border-radius: 50%;
box-shadow: 1px 1px 3px #2d2d2d;
}
#arr #right{
right: 5px;
left: auto;
}
</style>
</head>
<body>
<div class="all" id="all">
<div class="screen" id="screen">
<ul id="ul">
<li><img src="./images/01.jpg" width="500" height="200"></li>
<li><img src="./images/02.jpg" width="500" height="200"></li>
<li><img src="./images/03.jpg" width="500" height="200"></li>
<li><img src="./images/04.jpg" width="500" height="200"></li>
<li><img src="./images/05.jpg" width="500" height="200"></li>
</ul>
<!-- 圖片子菜單 -->
<ol>
</ol>
<!-- 左右切換按鈕 -->
<div id="arr">
<span id="left"><</span>
<span id="right">></span>
</div>
</div>
</div>
<!-- script -->
<script type="text/javascript">
// 賦值第一張圖片放到ul的最后，當(dāng)圖片切換到第五張的時候，直接切換第六張，再從第一張切換到第二張的時候先瞬間切換到第一張圖片，然后滑倒第二張
// 步驟
// 1. 獲取事件源以及相關(guān)元素
// 2. 復(fù)制第一張圖片所在的li，添加到ul的最后面
// 3. 給ol添加li，ul中的個數(shù)-1個，并點亮第一個按鈕
// 4. 鼠標(biāo)放到ol的li上切換圖片
// 5. 添加定時器
// 6. 左右切換圖片（鼠標(biāo)放上去隱藏，移開顯示）
// 1. 獲取事件源以及相關(guān)元素
var all = document.getElementById("all");
var screen = all.firstElementChild || all.firstChild;
var imgWidth = screen.offsetWidth;
var ul = screen.firstElementChild || screen.firstChild;
var ol = screen.children[1];
var div = screen.lastElementChild || screen.lastChild;
var spanArr = div.children;
// 2. 復(fù)制第一張圖片所在的li，添加到ul的最后面
var ulNewLi = ul.children[0].cloneNode(true);
ul.appendChild(ulNewLi);
// 3. 給ol添加li，ul中的個數(shù)-1個，并點亮第一個按鈕
for(var i=0; i<ul.children.length-1; i++){
var olNewLi = document.createElement("li");
olNewLi.innerHTML = i+1;
ol.appendChild(olNewLi);
}
var olLiArr = ol.children;
olLiArr[0].className = "current";
// 4. 鼠標(biāo)放到ol的li上切換圖片
for(var i=0; i<olLiArr.length; i++){
// 自定義屬性，把索引值綁定到元素的index屬性上
olLiArr[i].index = i;
olLiArr[i].onmouseover = function(){
// 排他思想
for(var j=0; j<olLiArr.length; j++){
olLiArr[j].className = "";
}
this.className = "current"
// 鼠標(biāo)放到小方塊上時，索引值和key以及square同步
// key = this.index;
// square = this.index;
key = square = this.index;
// 移動盒子
animate(ul, -this.index*imgWidth);
}
}
// 5. 添加定時器
var timer = setInterval(autoPlay, 1000);
// 固定向右切換圖片
// 兩個定時器（一個記錄圖片，一個記錄子菜單欄）
var key = 0;
var square = 0;
function autoPlay(){
// 通過key的自增來模擬圖片的索引值，然后移動ul
key++;
if(key > olLiArr.length){
// 圖片已經(jīng)滑到最后一張，接下來應(yīng)該跳轉(zhuǎn)到第一張，然后滑動到第二張
ul.style.left = 0;
key = 1;
}
animate(ul, -key*imgWidth);
// 通過控制square的自增來模擬小方塊的索引值，然后點亮盒子
// 排他思想做小方塊
square++;
if(square > olLiArr.length-1){
// 索引值不能大于5，如果大于5則立即變?yōu)?；
square = 0;
}
for(var i=0; i<olLiArr.length; i++){
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
}
// 鼠標(biāo)放上去清除定時器，移開啟動定時器
all.onmouseover = function(){
div.style.display = "block";
clearInterval(timer);
}
all.onmouseout = function(){
div.style.display = "none";
timer = setInterval(autoPlay,1000);
}
// 6. 左右切換圖片（鼠標(biāo)放上去顯示，移開隱藏）
spanArr[0].onclick = function(){
// 通過控制key的自增來模擬圖片的索引值，然后移動ul
key--;
if(key<0){
// 先移到最后一張，然后key的值取前一張的索引值，然后向前移動
ul.style.left = -imgWidth*(olLiArr.length) + "px";
key = olLiArr.length-1;
}
animate(ul, -key*imgWidth);
// 通過控制square的自增來模擬小方塊的索引值，然后點亮小方塊
square--;
if(square<0){
// 索引值不能大于等于5，如果為5，立即變?yōu)?
square = olLiArr.length-1;
}
for(var i=0; i<olLiArr.length; i++){
olLiArr[i].className = "";
}
olLiArr[square].className = "current";
}
spanArr[1].onclick = function(){
// 右側(cè)的和定時器一模一樣
autoPlay();
}
// 動畫封裝
var absSpeed = 10; //設(shè)定步長
function animate(ele, target){
clearInterval(ele.timer);
var speed = target > ele.offsetLeft ? absSpeed : -absSpeed;
ele.timer = setInterval(function(){
var val = target - ele.offsetLeft;
ele.style.left = ele.offsetLeft + speed + "px";
if(Math.abs(val) < Math.abs(speed)){
ele.style.left = target + "px";
clearInterval(ele.timer);
}
}, 10)
}
</script>
</body>
</html>
總結(jié)
以上所述是小編給大家介紹的JavaScript實現(xiàn)帶有子菜單和控件的slider輪播圖效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
今天小編就為大家分享一篇LayerClose彈窗關(guān)閉刷新方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)九宮格布局效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
javascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法
下面小編就為大家?guī)硪黄猨avascript十六進(jìn)制數(shù)字和ASCII字符之間的轉(zhuǎn)換方法。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-12-12
Javascript中call，apply，bind方法的詳解與總結(jié)
本文主要Javascript中call，apply，bind方法的進(jìn)行全面分析，并在文章結(jié)尾對call，apply，bind方法的聯(lián)系和區(qū)別做了總結(jié)，具有很好的參考價值，需要的朋友一起來看下吧2016-12-12
JS向上取整、向下取整、四舍五入、取絕對值、取較大較小值及隨機(jī)數(shù)代碼示例
在Js中對數(shù)值進(jìn)行操作的場景有,向上取整、向下取整、四舍五入、固定精度、固定長度、取整,這篇文章主要給大家介紹了關(guān)于JS向上取整、向下取整、四舍五入、取絕對值、取較大較小值及隨機(jī)數(shù)的相關(guān)資料,需要的朋友可以參考下2024-04-04
荷蘭程序員Gabor de Mooij提出了一種比Object.create()更好的新方法，他稱這種方法為"極簡主義法"（minimalist approach）。下面通過本文給大家分享極簡主義法編寫JavaScript類的相關(guān)知識，一起看看吧2017-11-11
計數(shù)排序是一種高效的線性排序，它通過計算一個集合中元素楚翔的次數(shù)來確定集合如何排列，計數(shù)排序不需要進(jìn)行數(shù)據(jù)的比較，所有他的運行效率前面介紹的都高2014-04-04
JS組件Bootstrap Table表格行拖拽效果實現(xiàn)代碼
這篇文章分享了JS組件Bootstrap Table表格行拖拽效果實現(xiàn)代碼，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2015-12-12
DOM節(jié)點深度克隆函數(shù)cloneNode()用法實例
這篇文章主要介紹了DOM節(jié)點深度克隆函數(shù)cloneNode()用法,實例分析了cloneNode()函數(shù)深度復(fù)制的操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-01-01
這篇文章主要介紹了js獲得參數(shù)的getParameter使用示例,需要的朋友可以參考下2014-02-02