我們常常會在網頁中見到輪播的圖片，如京東主頁面中圖片自動更換。我們在這里對這1技術進行實現，主要能夠使圖片自動進行輪播，數字標簽隨著圖片1同更換，鼠標移動到數字標簽上，相應的圖片停留，鼠標在全部圖片區域內時，圖片停止輪播，鼠標離開圖片區域，圖片繼續輪播的功能。請看示例代碼：
這是html結構代碼：
<!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代碼：
/*
思路：
豫備： 生成的進程
定義數據： 和輪播圖相干的數據
圖片和點擊圖片將要跳轉的路徑
數據怎樣組織？
//1組數據 1組中每項 圖片和跳轉的路徑
[{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步：當頁面加載完后，獲得所要操作的節點對象
第2步：根據數據動態生成輪播圖和控制按鈕
第3步：為每個控制按鈕添加1個鼠標浮動事件onmouseenter
當前的按鈕樣式產生變化（acitve），其他的恢復原來樣式
對應的輪播圖顯示出來（active）,其他的隱藏
第4步：開啟自動輪播
開啟1個定時器，間接性的自動的切換輪播圖
第5步：為包括輪播區域容器lunBo添加1個鼠標浮動事件
停止定時器（停止自動輪播）
為包括輪播區域容器lunBo添加1個鼠標離開事件
開啟定時器
*/
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項輪播項顯示 對應的控制按鈕被選中
div.className = "item active";
li.className = "active";
}else{ //其他項隱藏 其他的控制按鈕樣式不改變
div.className = "item";
li.className = "";
}
div.innerHTML = '<a href="' + datas[i].targetSrc + '">' +
'<img src="http://www.jyygyx.com/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();//打開頁面自動輪播
//鼠標進入停止輪播
lunBo.onmouseenter = function(){
clearInterval(termId);
}
//鼠標離開繼續輪播
lunBo.onmouseleave = function(){
autoPlay();
}
代碼中對邏輯思路進行了說明，方便理解，讀者可以自己運行代碼，設置相應的圖片，查看效果。這里附上效果圖：
程序員人生，我編程，我富裕，記住wfuyu網，php教程，php學習，php手冊，CMS模版制作
聲明：本站大部分內容是作者原創，少部分收集于互聯網供大家一起學習，原版權很多不明，如有侵權請聯系本站，謝謝！
粵ICP備14040726號-1?? 2015-2020 程序員人生 版權所有
