jQuery实现仿flash大图切换效果(带鼠标感应)

       已经很久一段时间没有写过jQuery了，感觉生疏了很多，今天在网上看到一款flash大图片切换效果很炫，想到最新的网页设计理念可能会逐渐淘汰掉flash，于是想到了用jQuery来模拟这样的效果。还是老规矩，代码贴出来如下：

css代码：

Code:

*{   

margin:0;   

padding:0;   

}   

body{background-color:white;}   

#bg{   

  

    width:650px;   

    height:400px;   

}   

#tk{   

background-color:black;   

filter:alpha(opacity=65);   

width:650px;   

height:150px;   

position:relative;   

top:-150px;   

left:0;   

}   

#tk ul{   

list-style:none;}   

#tk ul li{   

display:inline-block;   

margin-top:15px;   

margin-right:10px;   

}   

ul li img{   

border:solid 5px #000600;   

}   

ul li img:hover{   

border:solid 5px red;   

}   

.spicborder{   

border:solid 5px red;   

}   

jQuery代码：

Code:

<script src="jquery.min.js" type="text/javascript"></script>   

<script type="text/javascript">   

    $(document).ready(function(){   

            $("#s1").addClass("spicborder");   

            var pic1="1.jpg"; //声明第一张大图的地址   

            var pic2="2.jpg"; //声明第二张大图的地址   

            var pic3="3.jpg"; //声明第三张大图的地址   

             $("#s1").bind("mouseover",function(){   

             $("#bg>img").attr("src",pic1).fadeOut(0).fadeIn("slow");   

             $("#s2").removeClass("spicborder");   

            $("#s3").removeClass("spicborder");   

        }).bind("mouseout",function(){$("#s1").addClass("spicborder");});   

           

        $("#s2").bind("mouseover",function(){   

            $("#s1").removeClass("spicborder");   

            $("#s3").removeClass("spicborder");   

            $("#s2").addClass("spicborder");   

            $("#bg>img").attr("src",pic2).fadeOut(0).fadeIn("slow");    

        }).bind("mouseout",function(){$("#s2").addClass("spicborder");});   

           

           

        $("#s3").bind("mouseover",function(){   

            $("#s1").removeClass("spicborder");   

            $("#s2").removeClass("spicborder");   

            $("#s3").addClass("spicborder");   

            $("#bg>img").attr("src",pic3).fadeOut(0).fadeIn("slow");    

        }).bind("mouseout",function(){$("#s3").addClass("spicborder");});   

    });   

</script>   

html代码：

Code:

<center>  

<div id="bg"><img src="1.jpg"/>  

    <div id="tk">  

        <ul>  

            <li><img id="s1" src="s1.jpg" /></li>  

            <li><img id="s2" src="s2.jpg" /></li>  

            <li><img id="s3" src="s3.jpg" /></li>  

        </ul>  

    </div>  

</div>  

</center>  

       图片切换有过渡效果，可惜的是没能做出自动播放效果，哪位朋友有空研究一下，做出来了请通知一下我哈，在处理鼠标移出缩略图后缩略图保留边框的效果上的代码写得有点烦琐，有些地方可以简写的。

今天上午继续研究，做出了自动播放的效果。但也显示非常烦琐，性能也不是很好，代码重用性差，有需要的朋友可以多做一下封装。

附新的jQuery代码：

Code:

<script type="text/javascript">   

            var tt;//声明定时器   

            var pic1="1.jpg"; //声明第一张大图的地址   

            var pic2="2.jpg"; //声明第二张大图的地址   

            var pic3="3.jpg"; //声明第三张大图的地址   

               

    $(document).ready(function(){   

            $("#s1").addClass("spicborder");//初始页面默认第一张缩略图显示红色边框   

                       

             $("#s1").bind("mouseover",function(){    

             $("#s2").removeClass("spicborder");   

            $("#s3").removeClass("spicborder");    

            $("#s1").addClass("spicborder");   

                       clearInterval(tt);   

            $("#bg>img").attr("src",pic1).fadeOut(0).fadeIn("slow");   

        }).bind("mouseout",function(){$("#s1").addClass("spicborder");   

                   clearInterval(tt);tt=setInterval("scroll()",3000);//在重新设置定时器之前先清除原来的定时器是为了避免图片播放越来越快且无序的效果   

  

        });   

           

        $("#s2").bind("mouseover",function(){   

            $("#s1").removeClass("spicborder");   

            $("#s3").removeClass("spicborder");   

            $("#s2").addClass("spicborder");   

                       clearInterval(tt);   

            $("#bg>img").attr("src",pic2).fadeOut(0).fadeIn("slow");    

        }).bind("mouseout",function(){$("#s2").addClass("spicborder");   

                   clearInterval(tt);tt=setInterval("scroll()",3000);   

        });   

           

           

        $("#s3").bind("mouseover",function(){   

            $("#s1").removeClass("spicborder");   

            $("#s2").removeClass("spicborder");   

            $("#s3").addClass("spicborder");   

                       clearInterval(tt);   

            $("#bg>img").attr("src",pic3).fadeOut(0).fadeIn("slow");    

        }).bind("mouseout",function(){$("#s3").addClass("spicborder");   

                   clearInterval(tt);tt=setInterval("scroll()",3000);   

        });    

});   

  

var i=0;   

function scroll(){   

i+=1;   

if(i==1)   

{   

           $("#s1").removeClass("spicborder");   

           $("#s3").removeClass("spicborder");   

           $("#bg>img").attr("src",pic2).fadeOut(0).fadeIn("slow");   

           $("#s2").addClass("spicborder");   

}   

if(i==2)   

{   

           $("#s1").removeClass("spicborder");   

           $("#s2").removeClass("spicborder");   

           $("#bg>img").attr("src",pic3).fadeOut(0).fadeIn("slow");   

           $("#s3").addClass("spicborder");   

}   

if(i==3)   

{   

           $("#s2").removeClass("spicborder");   

           $("#s3").removeClass("spicborder");   

           $("#bg>img").attr("src",pic1).fadeOut(0).fadeIn("slow");   

           $("#s1").addClass("spicborder");   

           i=0;     //i值设回0使图片循环播放   

}   

}   

tt=setInterval("scroll()",3000);   

       

  

</script>  

附图：







上面的代码还存在一定不理想的效果，可以很明显地看出，缩略图和半透明背景的透明度是一样的，一直尝试才发现，在tk中的元素都被半透明化了，而且单独设置ul或者img的css半透明度为100也不能解决问题，最后想到了在tk中插入一个新的div，让这个div呈现半透明效果，且让它与ul平行，通过position的设置使得ul显示在这个新的div之上，同时设置了缩略图在未被鼠标经过或播放到的时候的透明度更低，而鼠标经过时或播放到时不透明。点击缩略图可以导航到相应的网站。

完整代码如下：

Code:

<!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>仿flash大图切换效果</title>  

<style type="text/css">  

#bg{   

  

    width:650px;   

    height:400px;   

}   

#tk{   

width:650px;   

height:150px;   

position:relative;   

top:-150px;   

left:0;   

  

}   

#tkk{   

background-color:#000000;   

filter:alpha(opacity=50);   

width:650px;   

height:150px;   

position:relative;   

top:0;   

left:0;   

  

}   

#tk ul{   

position:relative;   

top:-150px;   

left:0;   

padding-left:0;   

list-style:none;   

}   

#tk ul li{   

display:inline;   

}   

ul li img{   

border:solid 5px white;   

filter:alpha(opacity=25);   

}   

.spicborder{   

border:solid 5px red;   

filter:alpha(opacity=100);   

}   

</style>  

<script src="jquery.min.js" type="text/javascript"></script>  

<script type="text/javascript">  

            var tt;   

            var pic1="1.jpg"; //声明第一张大图的地址   

            var pic2="2.jpg"; //声明第二张大图的地址   

            var pic3="3.jpg"; //声明第三张大图的地址   

               

    $(document).ready(function(){   

            $("#s1").addClass("spicborder");   

                       

             $("#s1").bind("mouseover",function(){    

             $("#s2").removeClass("spicborder");   

            $("#s3").removeClass("spicborder");    

            $("#s1").addClass("spicborder");   

                       clearInterval(tt);   

            $("#bg>img").attr("src",pic1).fadeOut(0).fadeIn("slow");   

        }).bind("mouseout",function(){$("#s1").addClass("spicborder");   

                   clearInterval(tt);tt=setInterval("scroll()",3000);   

  

        });   

           

        $("#s2").bind("mouseover",function(){   

            $("#s1").removeClass("spicborder");   

            $("#s3").removeClass("spicborder");   

            $("#s2").addClass("spicborder");   

                       clearInterval(tt);   

            $("#bg>img").attr("src",pic2).fadeOut(0).fadeIn("slow");    

        }).bind("mouseout",function(){$("#s2").addClass("spicborder");   

                   clearInterval(tt);tt=setInterval("scroll()",3000);   

        });   

           

           

        $("#s3").bind("mouseover",function(){   

            $("#s1").removeClass("spicborder");   

            $("#s2").removeClass("spicborder");   

            $("#s3").addClass("spicborder");   

                       clearInterval(tt);   

            $("#bg>img").attr("src",pic3).fadeOut(0).fadeIn("slow");    

        }).bind("mouseout",function(){$("#s3").addClass("spicborder");   

                   clearInterval(tt);tt=setInterval("scroll()",3000);   

        });    

});   

  

var i=0;   

function scroll(){   

i+=1;   

if(i==1)   

{   

           $("#s1").removeClass("spicborder");   

           $("#s3").removeClass("spicborder");   

           $("#bg>img").attr("src",pic2).fadeOut(0).fadeIn("slow");   

           $("#s2").addClass("spicborder");   

}   

if(i==2)   

{   

           $("#s1").removeClass("spicborder");   

           $("#s2").removeClass("spicborder");   

           $("#bg>img").attr("src",pic3).fadeOut(0).fadeIn("slow");   

           $("#s3").addClass("spicborder");   

}   

if(i==3)   

{   

           $("#s2").removeClass("spicborder");   

           $("#s3").removeClass("spicborder");   

           $("#bg>img").attr("src",pic1).fadeOut(0).fadeIn("slow");   

           $("#s1").addClass("spicborder");   

           i=0;   

}   

}   

tt=setInterval("scroll()",3000);   

       

</script>  

</head>  

<center>  

<div id="bg"><img alt="" src="1.jpg"  />  

<div id="tk"><div id="tkk"></div>  

<ul>  

    <li><a href="#"><img id="s1" alt="" src="s1.jpg" /></a></li>  

    <li><a href="#"><img id="s2" alt="" src="s2.jpg" /></a></li>  

    <li><a href="#"><img id="s3" alt="" src="s3.jpg" /></a></li>  

</ul>  

</div>  

</div>  

</center>  

<body>  

</body>  

</html>  

附新图效果：