Jquery特效一:图片轮换显示

朴灿烈づ我的快乐病毒、 2022-10-01 00:47 169阅读 0赞

效果图及代码如下：  
![0_12976521725fdX.gif][]  
<html xmlns="[http://www.w3.org/1999/xhtml][http_www.w3.org_1999_xhtml] ">  
<head runat="server">  
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>  
<style type="text/css">  
\* \{margin:0;padding:0;font-size:12px;font-family:Verdana;\}  
img \{border:0\}  
\#pic\{margin:5px;width:300px;height:200px;overflow:hidden;cursor:pointer;\}  
\#play\{position:absolute;margin-left:200px;margin-top:-30px;\}  
\#play a\{text-decoration: none;border:1px solid \#CEDEF7;background-color:\#E8FCEB;width:20px;height:20px;color:\#2F49DF;display:block;float:left;text-align:center;line-height:20px;margin-right:3px;\}  
</style>  
<script type="text/javascript">  
    var \_c = \_h = 0;  
    $(function () \{  
        $('\#play > a').click(function () \{  
            var i = $(this).attr('alt') - 1;  
            clearInterval(\_h);  
            \_c = i;  
            play();  
            change(i);  
        \})  
        $("\#pic img").hover(function () \{ clearInterval(\_h) \}, function () \{ play() \});  
        play();  
    \})  
    function play() \{  
        \_h = setInterval("auto()", 3000);  
    \}  
    function change(i) \{  
        $('\#play > a').css('background-color', '\#E8FCEB').eq(i).css('background-color', '\#C6FF5E').blur();  
        $("\#pic img").hide().eq(i).fadeIn('slow');  
    \}  
    function auto() \{  
        \_c = \_c > 2 ? 0 : \_c + 1;  
        change(\_c);  
    \}  
</script>  
<title>js图片播放轮换</title>  
</head>

[0_12976521725fdX.gif]: /images/20220705/3965c428067a4c1f9445c26f315a08c1.png
[http_www.w3.org_1999_xhtml]: http://www.w3.org/1999/xhtml
[http_www.cssrain.cn_demo_pic_cssrain-logo.JPG]: http://www.cssrain.cn/demo/pic/cssrain-logo.JPG
[http_www.cssrain.cn_demo_pic_usbmingpian.jpg]: http://www.cssrain.cn/demo/pic/usbmingpian.jpg
[http_www.cssrain.cn_demo_pic_ganyingdeng2.jpg]: http://www.cssrain.cn/demo/pic/ganyingdeng2.jpg
[http_www.cssrain.cn_demo_pic_ganyingdeng.jpg]: http://www.cssrain.cn/demo/pic/ganyingdeng.jpg