jquery 实现图片切换

ming071ming · 发表于 2013-2-8 00:36:13

1、在初始化的时候只显示第一张图片,并在显示标题的地方显示第一张图片的 alt 等。
$("#playShow a:not(:first-child)").hide();
$("#playText").html($("#playShow a:first-child").find("img").attr('alt'));
$("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});
$("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});

2、为下面的数字设置一个点击的事件
$("#playNum a").click(function(){
            var i=$(this).text()-1;
            n=i;
            if(i>=count)return ;
            $("#playText").html($("#playShow a").eq(i).find("img").attr("alt"));
            $("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")});
            $("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
            $(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});
        });

3、为了使它能够自动的切换设置定时切换
t=setInterval("autoShow()",1000);

4、当鼠标在图片上的时候就不自动切换
$("#play").hover(function(){clearInterval(t)},function(){t=setInterval("autoShow()",1000);});

具体代码：
<style type="text/css">
    #play{width:500px;height:230px; border:#ccc 1px solid;}
    #playBg{margin-top:200px;z-index:1;filter:alpha(opacity=70);opacity:0.7;width:500px;position:absolute;height:30px;background:#000;}
    #playText{margin-top:200px;z-index:2;padding-left:10px;font-size:14px;font-weight:bold;width:340px;color:#fff;line-height:30px; overflow:hidden;position:absolute;cursor:pointer;}
    #playNum{margin:205px 5px 0 350px;z-index:3;width:145px; text-align:right;position:absolute;height:25px;}
    #playNum a{margin:0 2px;width:20px;height:20px;font-size:14px; font-weight:bold;line-height:20px;cursor:pointer;color:#000;padding:0 5px;background:#D7D6D7;text-align:center}
    #playShow img{width:500px;height:230px;}
    </style>

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

<body>
    <div id="play">
    <ul>
        <li id="playBg"></li>
        <li id="playText"></li>
        <li id="playNum"><a>1</a><a>2</a><a>3</a><a>4</a><a>5</a><a>6</a></li>
        <li id="playShow">
            <a href="#" target="_blank"><img src="images/01.jpg" alt="description about picture"></a>
            <a href="#" target="_blank"><img src="images/02.jpg" alt="description about picture"></a>
            <a href="#" target="_blank"><img src="images/03.jpg" alt="description about picture"></a>
            <a href="#" target="_blank"><img src="images/04.jpg" alt="description about picture"></a>
            <a href="#" target="_blank"><img src="images/05.jpg" alt="description about picture"></a>
            <a href="#" target="_blank"><img src="images/03.jpg" alt="description about picture"></a>
        </li>
    </ul>
</div>
<script type="text/javascript">
    var t=n=0,count=$("#playShow a").size();
    $(function(){
        $("#playShow a:not(:first-child)").hide();
        $("#playText").html($("#playShow a:first-child").find("img").attr('alt'));
        $("#playNum a:first").css({"background":"#FFD116",'color':'#A8471C'});
        $("#playText").click(function(){window.open($("#playShow a:first-child").attr('href'), "_blank")});
        $("#playNum a").click(function(){
            var i=$(this).text()-1;
            n=i;
            if(i>=count)return ;
            $("#playText").html($("#playShow a").eq(i).find("img").attr("alt"));
            $("#playText").unbind().click(function(){window.open($("#playShow a").eq(i).attr('href'), "_blank")});
            $("#playShow a").filter(":visible").hide().parent().children().eq(i).fadeIn(1200);
            $(this).css({"background":"#FFD116",'color':'#A8471C'}).siblings().css({"background":"#D7D6D7",'color':'#000'});
        });
        t=setInterval("autoShow()",1000);
        $("#play").hover(function(){clearInterval(t)},function(){t=setInterval("autoShow()",1000);});

    });

        function autoShow(){
            n=n>=(count-1) ? 0: ++n ;
            $("#playNum a").eq(n).trigger('click');
        }
</script>

</body>

		自动登录	找回密码
密码			立即注册