标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>CSS+JS图片轮播切换效果原生js面向对象封装版丨芯晴网页特效丨CsrCode.Cn</title>
<style>
ul li{
list-style: none;
}
#box {
position:relative; width:480px; height:300px;}
#box .imgList{ position:relative; width:480px; height:300px; overflow:hidden;}
#box .imgList li{ position:absolute; top:0; left:0; width:480px; height:300px;}
#box .countNum{ position:absolute; right:0; bottom:5px; z-index: 999;}
#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);}
.innerText { height: 50px; font:17.93px/30px"microsoft yahei"; width:480px;line-height: 50px; z-index:100;text-align: left;position: absolute;top: 250px;opacity: 0.4;color: #fff;background: rgb(76,76,76); }
.innerText1 { height: 50px; font:17.93px/30px"microsoft yahei"; width:480px;line-height: 50px;text-align: left;position: absolute;top: 250px;color: #fff;z-index: 998;text-decoration: none;}
.innerText1 a{ text-decoration: none; color: #fff;}
.innerText1 a:hover{ color: #f00; text-decoration: none;}
.innerText1 a :visited{ color: #fff; text-decoration: none;}
-->
</style>
<script>
<!--
function runImg(){}
runImg.prototype={
bigbox:null,//最外层容器
boxul:null,//子容器ul
imglist:null,//子容器img
numlist:null,//子容器countNum
index:0,//当前显示项
timer:null,//控制图片转变效果
play:null,//控制自动播放
imgurl:[],//存放图片
count:0,//存放的个数
spanText:[],
$: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;}
},
//初始化
info:function(id){
this.count=this.count<=6?this.count:6;
this.bigbox=this.$(id);
for(var i=0;i<2;i++){
var ul=this.$("ul");
for(var j=1;j<=this.count;j++){
var li=this.$("li");
li.innerHTML=i==0?this.imgurl[j-1]:j;
var innerTexts=document.getElementsByClassName(‘innerText‘);
console.log(innerTexts[0]);
ul.appendChild(li);
}
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";
},
//封装程序入口
action:function(id){
this.autoplay();
this.mouseoverout(this.bigbox,this.numlist);
},
//图片切换效果
imgshow:function(num,numlist,imglist){
this.index=num;
var innerTexts=document.getElementsByClassName(‘innerText1‘);
spanText=["<a href=\"http://taizhou.19lou.com/forum-1635-thread-163421419813606643-1-1.html\">这辆是mini吗 表骗我</a>",
"<a href=\"http://taizhou.19lou.com/forum-1635-thread-163451420010155737-1-1.html\">服来战 男女司机谁最坑</a>",
"<a href=\"http://taizhou.19lou.com/forum-1635-thread-163331420528103083-1-1.html\">大家来找茬</a>",
"<a href=\"http://taizhou.19lou.com/forum-830-thread-163841420695084451-1-1.html\">豪定制的迈伦凯</a>",
"<a href=\"##\">第5辆车</a>",
"<a href=\"##\">第6辆车</a>"];
var a=spanText[num];
innerTexts[0].innerHTML=a;
var alpha=0;
for(var i=0;i<numlist.length;i++){
numlist[i].className="";
}
numlist[this.index].className="current";
clearInterval(this.timer);
for(var j=0;j<imglist.length;j++){
imglist[j].style.opacity=0;
imglist[j].style.filter="alpha(opacity=100)";
}
var $this=this;
//利用透明度来实现切换图片
this.timer=setInterval(function(){
alpha+=2;
if(alpha>100){alpha=100};//不能大于100
//为兼容性赋样式
imglist[$this.index].style.opacity=alpha/100;
imglist[$this.index].style.filter="alpha(opacity="+alpha+")";
if(alpha==100){clearInterval($this.timer)};//当等于100的时候就切换完成了
},20)//经测试20是我认为最合适的值
},
//自动播放
autoplay:function(){
var $this=this;
this.play=setInterval(function(){
$this.index++;
if($this.index>$this.imglist.length-1){$this.index=0};
$this.imgshow($this.index,$this.numlist,$this.imglist);
},3000)
},
//处理鼠标事件
mouseoverout:function(box,numlist){
var $this=this;
box.onmouseover=function(){
clearInterval($this.play);
}
box.onmouseout=function(){
$this.autoplay($this.index);
}
for(var i=0;i<numlist.length;i++){
numlist[i].index=i;
numlist[i].onmouseover=function(){
$this.imgshow(this.index,$this.numlist,$this.imglist);
}
}
}
}
window.onload=function(){
var runimg=new runImg();
runimg.count=6;
runimg.imgurl=[
"<img src=\"http://i.mmcdn.cn/simba/img/T117eTXmXqXXXXXXXX.jpg\"/>",
"<img src=\"http://img03.taobaocdn.com/tps/i3/T1t8eTXbBtXXXXXXXX-490-170.png\"/>",
"<img src=\"http://i.mmcdn.cn/simba/img/T1OVOUXeNjXXXXXXXX.jpg\"/>",
"<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>",
"<img src=\"http://i.mmcdn.cn/simba/img/T1J.9TXc8lXXXXXXXX.jpg\"/>",
"<img src=\"http://img03.taobaocdn.com/tps/i3/T1ITuTXbRnXXXXXXXX-490-170.png\"/>"];
runimg.info("#box");
runimg.action("#box");
}
-->
</script>
</head>
<body>
<div id="box">
<div class="innerText"> </div>
<span class="innerText1">第一辆车</span>
</div>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/Wansan/p/5552532.html
