html
head
meta http-equiv=Content-Type content=text/html; charset=gbk /
title/title
style
!--
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:492px;
height:172px;
margin:10px auto;
}
#box .imgList{
position:relative;
width:490px;
height:170px;
overflow:hidden;
}
#box .imgList li{
position:absolute;
top:0;
left:0;
width:490px;
height:170px;
}
#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 {
background:#f60;
font-weight:bold;
opacity:1;
filter:alpha(opacity=70);
}
--
/style
script
!--
function runImg(){}
={
bigbox:null,//最外层容器
boxul:null,//子容器ul
imglist:null,//子容器img
numlist:null,//子容器countNum
prov:0,//上次显示项
index:0,//当前显示项
timer:null,//控制图片转变效果
play:null,//控制自动播放
imgurl:[],//存放图片
count:0,//存放的个数
$:function(obj)
{
if(typeof(obj)==string)
{
if((#)=0)
{
obj=(#,);
if((obj))
{
return (obj);
}
else
{
alert(没有容器+obj);
return null;
}
}
else
{
return (obj);
}
}
else
{
return obj;
}
},
//初始化
info:function(id)
{
==5?:5;
=this.$(id);
for(var i=0;i2;i++)
{
var ul=this.$(ul);
for(var j=1;j=;j++)
{
var li=this.$(li);
=i==0?[j-1]:j;
(li);
}
(ul);
}
=(ul);
[0].className=imgList;
[1].className=countNum;
=[0].getElementsByTagName(li);
=[1].getElementsByTagName(li);
for(var j=0;;j++)
{
(j,0);
}
(0,100);
[0].className=current;
},
//封装程序入口
action:function(id)
{
();
(,);
},
//图片切换效果
imgshow:function(num,numlist,imglist)
{
=num;
var pralpha=100;
var inalpha=0;
for(var i=0;;i++)
{
numlist[i].className=;
}
numlist[].className=current;
clearInterval();
for(var j=0;;j++)
{
(j,0);
}
(,100);
(,0);
var $this=this;
//利用透明度来实现切换图片
=setInterval(function(){
inalpha+=2;
pralpha-=2;
if(inalpha100){inalpha=100};//不能大于100
if(pralpha0){pralpha=100};
//为兼容性赋样式
$($,pralpha);
$($,inalpha);
if(inalpha==100&&pralpha==0){clearInterval($)};//当等于100的时候就切换完成了
},20)//经测试20是我认为最合适的值
},
//设置透明度
alpha:function(i,opacity){
[i].=opacity/100;
[i].=alpha(opacity=+opacity+);
},
//自动播放
autoplay:function(){
var $this=this;
=setInterval(function(){
$=$;
$++;
if($$-1){$=0};
$($,$,$);
},2000)
},
//处理鼠标事件
mouseoverout:function(box,numlist)
{
var $this=this;
box.οnmοuseοver=function()
{
clearInterval($);
}
box.οnmοuseοut=function()
{
$($);
}
for(var i=0;;i++)
{
numlist[i].index=i;
numlist[i].οnmοuseοver=function(){
$=$;
$(,$,$);
}
}
}
}
window.οnlοad=function(){
var runimg=new runImg();
=5;
=[
img src=\/simba/img/\/,
img src=\/tps/i3/\/,
img src=\/simba/img/\/,
img src=\/simba/img/T1J.\/,
img src=\/tps/i3/\/];
(#box);
(#box);
}
--
/script
/head
body
div id=box/div
/body
/html
图片链接在最下面的img src下修改 你也懂
取消
评论