简单实用的图片幻灯切换效果

<!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">

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

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

时间： 2024-10-22 22:42:55

简单实用的图片幻灯切换效果

简单实用的图片幻灯切换效果的相关文章

JS+CSS实现自动改变切换方向图片幻灯切换效果的方法

js实现同一页面可多次调用的图片幻灯切换效果

JS+CSS实现淡入式焦点图片幻灯切换效果的方法

js实现同一页面可多次调用的图片幻灯切换效果_javascript技巧

JS+CSS实现自动改变切换方向图片幻灯切换效果的方法_javascript技巧

jquery仿淘宝电器城图片幻灯切换效果

JS+CSS实现淡入式焦点图片幻灯切换效果的方法_javascript技巧

纯js+div的万网首页广告图片幻灯切换效果

jquery 左右滚动图片幻灯切换效果