JQuery【图片轮播2】

最新推荐文章于 2024-08-27 19:30:26 发布

一直在冬眠

最新推荐文章于 2024-08-27 19:30:26 发布

阅读量974

点赞数

分类专栏： JavaScript/JQuery 文章标签： jquery function list div border html

本文链接：https://blog.csdn.net/wjr_loves/article/details/7865079

版权

JavaScript/JQuery 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>用jQuery做的图片轮播2</title>
<script type="text/javascript" src="image/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
var t = n = count = 0;
$(function(){
    count = $("#play_list a").size();
    $("#play_list a:not(:first-child)").hide();
    $("#play_info").html($("#play_list a:first-child").find("img").attr('alt'));
    $("#play_text li:first-child").css({"background":"#fff",'color':'#000'});
    $("#play_info").click(function(){window.open($("#play_list a:first-child").attr('href'), "_blank")});
    $("#play_text li").click(function() {
        var i = $(this).text() - 1;
        n = i;
        if (i >= count) return;
        $("#play_info").html($("#play_list a").eq(i).find("img").attr('alt'));
        $("#play_info").unbind().click(function(){window.open($("#play_list a").eq(i).attr('href'), "_blank")})
        $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
        $(this).css({"background":"#fff",'color':'#000'}).siblings().css({"background":"#000",'color':'#fff'});
    });
    t = setInterval("showAuto()", 2000);
    $("#play").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", 2000);});
})

function showAuto()
{
    n = n >= (count - 1) ? 0 : n + 1;
    $("#play_text li").eq(n).trigger('click');
}
</script>
<style type="text/css">
*{font-size:12px; font-family:Verdana;margin:0;padding:0}
#play img {border:0px}
#play {width:346px;height:191px;overflow:hidden;margin:50px 0 0 50px;}
#play_info{position:absolute;margin-top:141px;padding:8px 0 0 20px;height:42px;width:270px;color:#fff;z-index:1001;cursor:pointer}
#play_info b{font-size:14px;display:block}
#play_bg {position:absolute;background-color:#000;margin-top:141px;height:50px;width:346px;filter: Alpha(Opacity=30);opacity:0.3;z-index:1000}
#play_text {position:absolute;margin:171px 0 0 276px;height:50px;width:80px;z-index:1002}
#play_text ul {list-style-type:none; width:80px;height:50px;display:block;padding-top:1px;_padding-top:0px;filter: Alpha(Opacity=80);opacity:0.8;}
#play_text ul li {width:14px;height:14px;float:left;background-color:#000;display:block;color:#FFF;text-align:center;margin:1px;cursor:pointer;font-family:"Courier New";}
#play_list a{display:block;width:346px;height:191px;position:absolute;overflow:hidden}
</style>
</head>

<body>
<div id="play">
    <div id="play_bg"></div>
    <div id="play_info"></div>
    <div id="play_text">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
    <div id="play_list">
    <a href="http://koyoz.com/1.jpg" target="_blank">
        <img src="image/1.jpg" title="" width="346" height="191" alt="<b>相恋9年</b>尔冬升再婚娶相恋9年女友" />
    </a>
    <a href="http://koyoz.com/2.jpg" target="_blank">
        <img src="image/2.jpg" title="" alt="<b>恋情变贤</b>周海媚公开6年恋情变贤妇" />
    </a>
    <a href="http://koyoz.com/3.jpg" target="_blank">
        <img src="image/3.jpg" title="" alt="<b>为啥这么</b>'熊猫'阿宝为啥这么红？" />
    </a>
    <a href="http://koyoz.com/4.jpg" target="_blank">
        <img src="image/4.jpg" title="" alt="<b>男友被捕</b>安妮-海瑟薇前男友被捕" />
    </a>

    </div>
</div>
</body>
</html>