js图片幻灯片效果
<!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 content="text/html; charset=gbk" http-equiv="content-type" />
<title>js图片幻灯片效果 </title><script language="网页特效">
var current = 0;
var imgnum = 1;
var interval = 0;
function showcontent(index){
var oldtag = document.getelementbyid("list" + current.tostring());
var oldcon = document.getelementbyid("showcon" + current.tostring());
var newtag = document.getelementbyid("list" + index.tostring());
var newcon = document.getelementbyid("showcon" + index.tostring());
if(current != index){
oldtag.classname= " ";
oldcon.style.display = "none";
current = index;
newtag.classname="on";
newcon.style.display = "block";
}
}
function setmode(n){
if(n != null){
imgnum = n+1;
}
if(interval == 0){
interval = setinterval("showtime()", 3000); //时间调整
}
}
function showtime(){
if(imgnum > 4){
imgnum = 0;
}
showcontent(imgnum);
imgnum ++;
}
setmode();
</script>
</head>
<body>
<div class="head-pic">
<div class="big-pic" id="showcon0" >
<a title="噢买尬真没脸了 你们太疯骚了" target="_blank" href="http://www.111cn.net"><img alt="www.111cn.net" src="images/img01.jpg" /></a>
<div class="gray-bg"> </div>
<div class="to-describe">
<p>噢买尬真没脸了 你们太疯骚了</p>
</div>
</div>
<div class="big-pic" id="showcon1" style="display: none">
<a title="惊声尖叫 超q仓鼠宝贝来袭" target="_blank" href="http://www.111cn.net"><img alt="www.111cn.net" src="images/img02.jpg" /></a>
<div class="gray-bg"> </div>
<div class="to-describe">
<p>惊声尖叫 超q仓鼠宝贝来袭</p>
</div>
</div>
<div class="big-pic" id="showcon2" style="display: none">
<a title="摄影大赛——中秋家团圆开赛了" target="_blank" href="http://www.111cn.net"><img alt="www.111cn.net" src="images/img03.jpg" /></a>
<div class="gray-bg"> </div>
<div class="to-describe">
<p>摄影大赛——中秋家团圆开赛了</p>
</div>
</div>
<div class="big-pic" id="showcon3" style="display: none">
<a title="甜蜜蜜 好想走进狗狗的五彩梦境" target="_blank" href="http://www.111cn.net"><img alt="www.111cn.net" src="images/img04.jpg" /></a>
<div class="gray-bg"> </div>
<div class="to-describe">
<p>甜蜜蜜 走进狗狗的五彩梦境</p>
</div>
</div>
<div class="big-pic" id="showcon4" style="display: none">
<a title="相拥着取暖 世界末日也不怕" target="_blank" href="http://www.111cn.net"><img alt="www.111cn.net" src="images/img05.jpg" /></a>
<div class="gray-bg"> </div>
<div class="to-describe">
<p>相拥着取暖 世界末日也不怕</p>
</div>
</div><ul class="small-pic">
<li class="on" id="list0" onmouseo教程ver="showcontent(0)">
<a title="噢买尬真没脸了 你们" target="_blank" href="http://www.111cn.net"><img alt="噢买尬真没脸了 你们太疯骚了" src="images/img01.jpg" /></a>
</li>
<li class="" id="list1" onmouseover="showcontent(1)">
<a title="惊声尖叫 超q仓鼠宝贝来袭" target="_blank" href="http://www.111cn.net"><img alt="惊声尖叫 超q仓鼠宝贝来袭" src="images/img02.jpg" /></a>
</li>
<li class="" id="list2" onmouseover="showcontent(2)">
<a title="摄影大赛——中秋家团圆开赛了" target="_blank" href="http://www.111cn.net"><img alt="摄影大赛——中秋家团圆开赛了" src="images/img03.jpg" /></a>
</li>
<li class="" id="list3" onmouseover="showcontent(3)">
<a title="甜蜜蜜 好想走进狗狗的五彩梦境" target="_blank" href="http://www.111cn.net"><img alt="甜蜜蜜 好想走进狗狗的五彩梦境" src="images/img04.jpg" /></a>
</li>
<li class="" id="list4" onmouseover="showcontent(4)">
<a title="相拥着取暖 世界末日也不怕" target="_blank" href="http://www.111cn.net"><img alt="相拥着取暖 世界末日也不怕" src="images/img05.jpg" /></a>
</li>
</ul></div>
</body>
</html>
源码下载
http://down.111cn.net/down/code/js/jiaodiantu/2010/0908/20694.html
效果地址
http://g.111cn.net/javascript/js/20100907/yahoo/
