輪播圖效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#back {
width: 500px;
height: 300px;
/*讓卷軸相對于視窗進(jìn)行定位*/
position: relative;
/*所有顯示在視窗外部外的東西隱藏*/
overflow: hidden;
border: 1px solid black;
}
/*卷軸樣式*/
#content {
/*width: 800%;*/
height: 300px;
position: absolute;
/*用來設(shè)置css樣式變化時火的，過渡效果拗盒，第一個值表示需要讓哪個值產(chǎn)生過度抒抬，（all表示該標(biāo)簽全部的css樣式，第二個值表示過渡效果的持續(xù)時間）*/
transition: all 0.5s;
/*left:0;*/
}
/*切記 加 浮動*/
#content div {
width: 500px;
height: 300px;
float: left;
}
#content div img {
width: 99%;
}
</style>
</head>
<body>
<!--第一部分炬藤，頂部六個控制按鈕-->
<div id="buttons">
<input type="button" name="" id="last" value="上一個" />
<input type="button" name="" class="btn" value="button1" />
<input type="button" name="" class="btn" value="button2" />
<input type="button" name="" class="btn" value="button3" />
<input type="button" name="" class="btn" value="button4" />
<input type="button" name="" id="next" value="下一個" />
</div>
<!--第二部分，輪播圖展示區(qū)-->
<!--輪播圖可視區(qū)域-->
<div id="back">
<!--展示圖片的背板-->
<div id="content">
<!--四張輪播圖片-->
<div class="div"><img src="img/1 (1).jpg"></div>
<div class="div"><img src="img/1 (2).jpg"></div>
<div class="div"><img src="img/1 (3).jpg"></div>
<div class="div"><img src="img/1 (4).jpg"></div>
</div>
</div>
</body>
<script type="text/javascript">
//按鈕標(biāo)簽
var last = document.getElementById("last")
var next = document.getElementById("next")
var btns = document.getElementsByClassName("btn");
//輪播圖組件
var back = document.getElementById("back");
var content = document.getElementById("content");
var divs = document.getElementsByClassName("div");
//定義用來記錄當(dāng)前輪到第幾張圖片顯示的 計數(shù)器 index等同于圖片數(shù)組的下標(biāo)
var index = 0; // 設(shè)置初始圖片
//定義用來保存定時器的變量
var timer;
//把卷軸寬度設(shè)置為輪播圖片的總寬豪嚎；
content.style.width = divs.length * 500 + "px";
//定義函數(shù) 執(zhí)行函數(shù)细卧，卷軸被抽動向左一個輪播圖片的距離， 封裝實現(xiàn)顯示下一張的函數(shù)
function nextFun() {
//獲取當(dāng)前顯示的圖片
index++;
//判斷計數(shù)器+1后是否超過圖片總張數(shù)郊闯，超過妻献，則總第一張開始
/*if(index>divs.length-1){
index = 0;
}*/
index = index % 4;
//修改卷軸的左側(cè)left值 向左移動所以值為負(fù)
content.style.left = index * 500 * -1 + "px";
}
content.style.left = "0px"
//設(shè)置定時器蛛株，調(diào)用下一張函數(shù)實現(xiàn)圖片的輪播
timer = setInterval(nextFun, 2000);
//當(dāng)鼠標(biāo)移入卷軸時，定時器停止計時
content.onmouseover = function() {
clearInterval(timer);
}
//鼠標(biāo)離開育拨，調(diào)用定時器
content.onmouseout = function() {
timer = setInterval(nextFun, 2000);
}
//定義封裝函數(shù)谨履，主要控制安妮切換頁面時使用
function resetTimer() {
//清理舊版定時器
clearInterval(timer);
//假期新定時器
timer = setInterval(nextFun, 2000);
}
next.onclick = function() {
//不下表示加一，表示圖片向后輪播一張
index++;
//判斷邊界問題
if(index > 3) {
index = 0;
}
//根據(jù)indexd的值得到第幾張圖片至朗，屉符，進(jìn)而修改卷軸的左偏移量
content.style.left = index * 500 * -1 + "px";
resetTimer();
}
last.onclick = function() {
index--;
if(index < 0) {
index = 3;
}
content.style.left = index * 500 * -1 + "px";
resetTimer();
}
//給1-4這四個按鈕添加對應(yīng)的頁面切換效果
for(var i = 0; i < btns.length; i++) {
//給每一而btn對象添加一個新屬性剧浸，锹引，用來保存i的值
btns[i].index = i;
//添加點擊事件
btns[i].onclick = function() {
//取出當(dāng)前按鈕中index的值，該值就是這個按鈕對應(yīng)的圖片編號
index = this.index;
//手動干預(yù)當(dāng)前輪播圖片的位置
content.style.left = index * 500 * -1 + "px";
//清理原有定時器,并開啟新定時器
resetTimer();
}
}
</script>
</html>來源： http://10.0.88.88:8083/forum.php?mod=viewthread&tid=44632
