<!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>
<title>简单实用的图片幻灯切换效果</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<style type="text/css教程">
#container{width:422px;height:200px;border:5px #000000 solid;}
#container .left{width:340px;height:200px;float:left;background-color:#999999;overflow:hidden;}
#container .left ul{padding:0;margin:0;}
#container .left ul li{list-style:none;cursor:pointer;text-align:center;}
#container .right{width:80px;height:200px;float:right;background-color:gray;}
#container .right ul{margin:0;padding:0;}
#container .right ul li{list-style:none;width:80px;height:40px;line-height:40px;text-align:center;padding-top:5px;_padding-top:0px;_margin-top:4px;cursor:pointer;}
.on{border:1px white solid;}
#container img{border:none;}
</style>
<script type="text/javascript教程" src="http://www.111cn.net/effect/images/jquery-1.3.2.js"></script>
<script type="text/javascript教程">
$(function(){
var len=$(".right li").length;
var index=0;
var time;
$(".right li").mousemove(function(){
index=$(".right li").index(this);
show(index);
}).eq(0).mousemove();
$(".left").hover(function(){
clearinterval(time);
},function(){
time=setinterval(function(){
show(index)
index++;
if(index==len){index=0;}
},2000);
}).trigger("mouseleave");
})
function show(index){
$(".left li").eq(index).fadein(100).siblings().fadeout(100);
$(".right li").removeclass("on").eq(index).addclass("on");
}
</script>
</head>
<body>
预览效果时左下角会提示错误，而且看不到效果，刷新一下就可以看到效果了；当然，在实际使用中，不会出现这样的问题。<br>
<!--把下面代码加到<body>与</body>之间-->
<div id="container">
<div class="left">
<ul>
<li>图片1<br>图片说明1</li>
<li>图片2<br>图片说明2</li>
<li>图片3<br>图片说明3</li>
<li>图片4<br>图片说明4</li>
</ul>
</div>
<div class="right">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
</div>
</body>
</html>
征集网┊锐志网络┊淘途┊找素材上91┊
交互设计
大赛征集
看酷站
当前位置：首页
> 教程 > 脚本特效
> 正文
在线编辑：angel
本文链接：
