標籤：time tle width jpg 建議 實現 過渡 屬性 classname
1.js實現輪播圖效果<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Author" content="奇客藝術">
<meta name="keyword" content="關鍵字">
<meta name="description" content="描述">
<title>js實現輪播圖效果</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#box{width: 1024px;height: 280px;margin: 0 auto;position: relative;overflow: hidden}
#box ul{width:6144px;margin-left: 0;transition: 0.2s;}/*transition為css3屬性實現過渡效果*/
#box ul li{list-style-type: none;width: 1024px;height: 280px;float: left}
#box .btn #left,#box .btn #right{width: 30px;height: 40px;background: rgba(0,0,0,.4);position: absolute;top: calc(50% - 20px);cursor: pointer; }
#left{left: 0;}
#right{right: 0;}
#box .btn #left img,#box .btn #right img {width: 100%;height: 100%}
#box #nav{position: absolute;left: calc(50% - 43px);bottom:10px;width:86px;height: 10px;}
#box #nav span{background:#cccccc;width: 10px;height: 10px;float: left;border-radius: 50%;margin-left: 6px;cursor: pointer}
#box #nav .on{background: #f50}
</style>
</head>
<body>
<div id="box">
<ul>
<li><img src="images/1.jpg"></li>
<li><img src="images/2.jpg"></li>
<li><img src="images/3.jpg"></li>
<li><img src="images/4.jpg"></li>
<li><img src="images/5.jpg"></li>
</ul>
<div class="btn">
<div id="left"><img src="images/left.png"></div>
<div id="right"><img src="images/right.png"></div>
</div>
<div id="nav">
<span class="on"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
<script language="JavaScript">
var oSpan=document.getElementsByTagName(‘span‘);
var oUL=document.getElementsByTagName(‘ul‘)[0];//擷取ul標籤
var oBtn=document.getElementsByClassName(‘btn‘)[0];
var oDiv=oBtn.getElementsByTagName(‘div‘);
var oBox=document.getElementById(‘box‘);
var index=0;
var number=0;
var timer;//定義定時器變數
play();
for(var i=0;i<oSpan.length;i++){
oSpan[i].nxl=i;//自訂屬性 i=0,1,2,3,4
oSpan[i].onclick=function () {
oSpan[index].className=‘‘;//index初始為0，將第一個span屬性清空，即去掉了on裡的屬性
index=this.nxl;//儲存擷取的被點擊的序號
this.className=‘on‘;
oUL.style.marginLeft=-1024*index+‘px‘;
}
}
//點擊按鈕實現圖片變換
for(var j=0;j<oDiv.length;j++){
oDiv[j].nxl=j;
oDiv[j].onclick=function () {
number=this.nxl;
oSpan[index].className=‘‘;
if (number){
index++;
if(index>4) {
index=0;
}
}else {index--;
if (index<0){
index=4;
}
}
oSpan[index].className=‘on‘;
oUL.style.marginLeft=-1024*index+‘px‘;
}
}
//滑鼠滑在id為box的div上
oBox.onmouseover = function () {
clearInterval(timer);
}
//滑鼠滑出id為box的div
oBox.onmouseout = function () {//onmouseleave同onmouseout 滑鼠滑出
play();//調用play函數
}
//使用定時器實現圖片自動變換
function play() {
timer = setInterval(function () {
oSpan[index].className=‘‘;
index++;
if(index>4){index=0;}
oSpan[index].className=‘on‘;
oUL.style.marginLeft = -1024*index+‘px‘;
},2000)//每2秒執行一次
}
</script>
</body>
</html>2.
源碼：js實現輪播圖效果.zip備忘： 文章為本人原創 轉載請註明出處 文章難免會有紕漏之處 還望大家多多包含 如有意見或者建議可與本人聯絡 本人QQ：2187093468（非誠請勿擾，加好友請備忘在哪裡看到的）
js實現輪播圖效果(附源碼)--原生js的應用
