我們常常會在網(wǎng)頁中見到輪播的圖片，如京東主頁面中圖片自動更換。我們在這里對這1技術(shù)進(jìn)行實(shí)現(xiàn)，主要能夠使圖片自動進(jìn)行輪播，數(shù)字標(biāo)簽隨著圖片1同更換，鼠標(biāo)移動到數(shù)字標(biāo)簽上，相應(yīng)的圖片停留，鼠標(biāo)在全部圖片區(qū)域內(nèi)時，圖片停止輪播，鼠標(biāo)離開圖片區(qū)域，圖片繼續(xù)輪播的功能。請看示例代碼：
這是html結(jié)構(gòu)代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf⑻" />
<title></title>
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.container{
width:1120px;
margin: 0 auto;
}
.lunBo{
width: 730px;
margin:0 auto;
position: relative;
}
.lunBo .banner .item{
display: none;
}
.lunBo .banner .item.active{
display: block;
}
.lunBo .banner .item a{
border: none;
}
ul{
position: absolute;
overflow: hidden;
bottom: 20px;
right: 20px;
}
ul li{
float: left;
width: 30px;
font:bold 16px/30px "微軟雅黑";
background-color: #000;
color: #fff;
text-align: center;
cursor: default;
border-radius: 15px;
}
ul li+li{
margin-left: 10px;
}
ul li.active{
background-color: #fff;
color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="lunBo" id="lunBo">
<div class="banner" id="banner">
</div>
<ul id="list">
</ul>
</div>
</div>
<script src="lunBo.js"></script>
</body>
</html>這是javascript代碼：
/*
思路：
豫備： 生成的進(jìn)程
定義數(shù)據(jù)： 和輪播圖相干的數(shù)據(jù)
圖片和點(diǎn)擊圖片將要跳轉(zhuǎn)的路徑
數(shù)據(jù)怎樣組織？
//1組數(shù)據(jù) 1組中每項 圖片和跳轉(zhuǎn)的路徑
[{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"},{imgSrc:"01.jpg",targetSrc:"http://www.baidu.com"}]
//JSON
第1步：當(dāng)頁面加載完后，獲得所要操作的節(jié)點(diǎn)對象
第2步：根據(jù)數(shù)據(jù)動態(tài)生成輪播圖和控制按鈕
第3步：為每個控制按鈕添加1個鼠標(biāo)浮動事件onmouseenter
當(dāng)前的按鈕樣式產(chǎn)生變化（acitve），其他的恢復(fù)原來樣式
對應(yīng)的輪播圖顯示出來（active）,其他的隱藏
第4步：開啟自動輪播
開啟1個定時器，間接性的自動的切換輪播圖
第5步：為包括輪播區(qū)域容器lunBo添加1個鼠標(biāo)浮動事件
停止定時器（停止自動輪播）
為包括輪播區(qū)域容器lunBo添加1個鼠標(biāo)離開事件
開啟定時器
*/
var datas = [
{imgSrc:"images/01.jpg",targetSrc:"https://sale.jd.com/act/N58wisuTGyW.html?cpdad=1DLSUE"},
{imgSrc:"images/02.jpg",targetSrc:"https://sale.jd.com/act/mj8frBQAuDeCPo.html?cpdad=1DLSUE"},
{imgSrc:"images/03.jpg",targetSrc:"https://sale.jd.com/act/PbDeHkZQcKjIRCtW.html?cpdad=1DLSUE"},
{imgSrc:"images/04.jpg",targetSrc:"https://jr.jd.com/buy/index?from=jdsj_04_101182&cpdad=1DLSUE"},
{imgSrc:"images/05.jpg",targetSrc:"https://haier.jd.com/?cpdad=1DLSUE"}
];
var banner = document.getElementById("banner");
var list = document.getElementById("list");
for(var i = 0,len = datas.length;i<len;i++){
var div = document.createElement("div");
var li = document.createElement("li");
if(i==0){ //默許第1項輪播項顯示 對應(yīng)的控制按鈕被選中
div.className = "item active";
li.className = "active";
}else{ //其他項隱藏 其他的控制按鈕樣式不改變
div.className = "item";
li.className = "";
}
div.innerHTML = '<a href="' + datas[i].targetSrc + '">' +
'<img src="http://www.vxbq.cn/upload/caiji/20160922/' + datas[i].imgSrc + '" />' +
'</a>';
li.innerHTML = i + 1;
banner.appendChild(div);
list.appendChild(li);
}
var lunBo = document.getElementById("lunBo");
var items = document.querySelectorAll("#lunBo #banner .item");
var lis = document.querySelectorAll("#lunBo #list li");
var currentIndex = 0;//(控制按鈕和輪播項共同的索引)
for(var i = 0,len = lis.length;i<len;i++){
lis[i].index = i;
lis[i].onmouseenter = function(){
currentIndex = this.index;
for(var j = 0;j<len;j++){
lis[j].className = "";
items[j].className = "item";
}
this.className = "active";
items[this.index].className = "item active";
}
}
var termId; //全局變量
function autoPlay(){
termId = setInterval(function(){
currentIndex++;
if(currentIndex==lis.length){
currentIndex = 0;
}
lis[currentIndex].onmouseenter();
},1000);
}
autoPlay();//打開頁面自動輪播
//鼠標(biāo)進(jìn)入停止輪播
lunBo.onmouseenter = function(){
clearInterval(termId);
}
//鼠標(biāo)離開繼續(xù)輪播
lunBo.onmouseleave = function(){
autoPlay();
}
代碼中對邏輯思路進(jìn)行了說明，方便理解，讀者可以自己運(yùn)行代碼，設(shè)置相應(yīng)的圖片，查看效果。這里附上效果圖：
程序員人生，我編程，我富裕，記住wfuyu網(wǎng)，php教程，php學(xué)習(xí)，php手冊，CMS模版制作
聲明：本站大部分內(nèi)容是作者原創(chuàng)，少部分收集于互聯(lián)網(wǎng)供大家一起學(xué)習(xí)，原版權(quán)很多不明，如有侵權(quán)請聯(lián)系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權(quán)所有
