圖片輪播

時間 2019-11-19

標籤圖片简体版

原文原文鏈接

<!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);}html

.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>app

var alpha=0;
for(var i=0;i<numlist.length;i++){
numlist[i].className="";
}
numlist[this.index].className="current";ui

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\"/>"];this

runimg.info("#box");
runimg.action("#box");
}
-->
</script>
</head>
<body>url

<div id="box">
<div class="innerText"> </div>
<span class="innerText1">第一輛車</span>
</div>

</body>
</html>spa

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。