源碼： 實戰位址
相容IE，通過透明度控制圖檔的顯示。
1. 面向對象：對外統一提供調用接口的程式設計思想。
js中Prototype屬性解釋及常用方法
通過對象的原型屬性和方法建立： 在對象原型附加的屬性或者方法将成為對象執行個體化的一部分，類似一個父類，新建立的對象都繼承了prototype的屬性和方法。這是因為當一個對象被建立時，這個構造函數 将會把它的屬性prototype賦給新對象的内部屬性__proto__。這個__proto__被這個對象用來查找它的屬性。
2. 構造一個函數 ，通過在其原型屬性prototype上建立屬性和方法
function Slide (){}
Slide.prototype = function() {
count: 0,
imgurl: [],
}
window.onload = function() {
var slide = new Slide();
slide.count = 3;
slide.imgurl=[
"<img src='./images/15314528688398910.jpg'/>",
"<img src='./images/15312942915553914.jpg'/>",
"<img src='./images/15312113912538863.jpg'/>"];
}
在html頁面中建立入口：
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>面向對象實作輪播圖</title>
</head>
<body>
<div id="box"></div>
<script type="text/javascript" src="js/slide.js"></script>
</body>
</html>
變量及方法：
function runImg(){}
runImg.prototype={
bigbox:null,//最外層容器
boxul:null,//子容器ul
imglist:null,//子容器img
numlist:null,//子容器countNum
index:0,//目前顯示項
timer:null,//控制圖檔轉變效果
play:null,//控制自動播放
imgurl:[],//存放圖檔
count:0,//存放的個數
$:function(obj) //通過id擷取元素或者建立元素
{
},
//初始化
info:function(id)
{
},
//封裝程式入口
action:function(id)
{
},
//圖檔切換效果
imgshow:function(num,numlist,imglist)
{
},
//自動播放
autoplay:function(){
},
//處理滑鼠事件
mouseoverout:function(box,numlist)
{
}
}
window.onload=function(){
var runimg=new runImg();
runimg.count=5;
runimg.imgurl=[
"<img src='imgs/1.jpg'/>",
"<img src='imgs/2.jpg'/>",
"<img src='imgs/3.jpg'/>",
"<img src='imgs/4.jpg'/>",
"<img src='imgs/5.jpg'/>"];
runimg.info("#box");
runimg.action("#box");
}
3. 定義$函數
判斷是不是字元串，有沒有帶#
$: function(obj) {
if (typeof(obj) == "string") {
if (obj.indexOf("#") >= 0) {
//有#則表示取得該元素
obj = obj.replace("#", "")
if (document.getElementById(obj)) {
return document.getElementById(obj)
} else {
alert("沒有容器"+obj)
return null
}
} else {
//沒有#則表示建立元素
return document.createElement(obj);
}
} else {
// 不是字元串則直接傳回
return obj
}
},
4. 初始化：建立圖檔和下标清單，并填充内容
info: function(id) {
// 最多5個
this.count = this.count <= 5 ? this.count : 5;
this.bigbox = this.$(id)
//循環兩次建立圖檔和下标兩個清單元素
for (var i = 0; i < 2; i++) {
// 建立元素
var ul = this.$("ul");
for (var j=1; j <= this.count; j++) {
//建立li清單并添加到ul上
var li = this.$("li");
li.innerHTML = i==0 ? this.imgurl[j-1] : j;
ul.appendChild(li)
}
// 将建立好的兩個清單都添加到html中的标簽上
this.bigbox.appendChild(ul)
}
//為清單添加類名
this.boxul = this.bigbox.getElementsByTagName("ul");
this.boxul[0].className = "imglist";
this.boxul[1].className = "countNum";
this.imglist = this.boxul[0].getElementsByTagName("li");
this.numlist = this.boxul[1].getElementsByTagName("li");
this.numlist[0].className = "current"
},
5. 程式的入口
// 程式入口
action: function(id) {
this.autoplay();
this.mouseoverout(this.bigbox, this.numlist);
},
6. 圖檔和index的切換
imgshow: function(num, numlist, imglist) {
this.index = num;
// 給目前下标添加樣式
for (var i = 0; i < numlist.length; i++) {
numlist[i].className = ""
}
numlist[num].className = "current"
// 先隐藏全部圖檔
clearInterval(this.time);
for (var j=0; j < imglist.length; j++) {
imglist[j].style.opacity = 0
imglist[j].style.filter = "alpha(opacity=0)"
}
// 停止循環
// 通過setInterva增加opacity
var that = this, alpha = 0;
this.time = setInterval(function() {
alpha += 2
if (alpha > 100) {alpha = 100};
imglist[that.index].style.opacity = alpha/100;
imglist[that.index].style.filter = "alpha(opacity="+alpha+")";
// 透明度為100則完成，退出循環
if (alpha == 100) {clearInterval(that.time)};
}, 20)
},
7. 自動播放
autoplay: function() {
var that = this;
this.play = setInterval(function(){
that.index++;
if (that.index > that.imglist.length-1) {that.index = 0}
that.imgshow(that.index, that.numlist, that.imglist)
} , 2000)
},
8. 控制滑鼠進入出去事件
mouseoverout: function(box, numlist) {
var that = this;
box.onmouseover = function() {
clearInterval(that.play)
}
box.onmouseout = function() {
that.autoplay();
}
for (var i=0; i<numlist.length; i++) {
numlist[i].index = i;
numlist[i].onmouseover = function() {
that.imgshow(this.index, that.numlist, that.imglist)
}
}
}
樣式：
body, ul, li, p {
margin: 0;
padding: 0;
}
ul{
list-style-type:none;
}
body {
font-family:"Times New Roman", Times, serif;
}
#box {
position:relative;
width:500px;
height:240px;
margin:10px auto;
}
#box .imglist{
position:relative;
width:100%;
height:240px;
overflow:hidden;
}
#box .imglist li{
position:absolute;
top:0;
left:0;
width:100%;
height:240px;
}
#box .countNum{
position:absolute;
right:0;
bottom:5px;
}
#box .countNum li{
width:20px;
height:20px;
float:left;
color:#fff;
border-radius:20px;
background:#f90;
text-align:center;
margin-right:5px;
cursor:pointer;
opacity:0.7;
filter:alpha(opacity=70);
}
#box .countNum li.current{
background:#f60;
font-weight:bold;
opacity:1;
filter:alpha(opacity=70);
}
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)