码迷,mamicode.com
首页 > Web开发 > 详细

JQuery 轮播图片

时间:2016-07-20 17:33:42      阅读:216      评论:0      收藏:0      [点我收藏+]

标签:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #banner {
            position: relative;
            width: 478px;
            height: 286px;
            border: 1px solid #666;
            overflow: hidden;
        }

        #banner_list img {
            border: 0px;
        }

        #banner_bg {
            position: absolute;
            bottom: 0;
            background-color: #000;
            height: 30px;
            filter: Alpha(Opacity=30);
            opacity: 0.3;
            z-index: 1000;
            cursor: pointer;
            width: 478px;
        }

        #banner_info {
            position: absolute;
            bottom: 0;
            left: 5px;
            height: 22px;
            color: #fff;
            z-index: 1001;
            cursor: pointer;
        }

        #banner_text {
            position: absolute;
            width: 120px;
            z-index: 1002;
            right: 3px;
            bottom: 3px;
        }

        #banner ul {
            position: absolute;
            list-style-type: none;
            filter: Alpha(Opacity=80);
            opacity: 0.8;
            z-index: 1002;
            margin: 0;
            padding: 0;
            bottom: 3px;
            right: 5px;
        }

            #banner ul li {
                padding: 0px 8px;
                float: left;
                display: block;
                color: #FFF;
                background: #6f4f67;
                cursor: pointer;
                border: 1px solid #333;
            }

                #banner ul li.on {
                    background-color: #000;
                }

        #banner_list a {
            position: absolute;
        }
       
    </style>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"> </script>
    <script type="text/javascript">
        var t = n = 0, count;
        $(document).ready(function () {
            count = $("#banner_list a").length;
            $("#banner_list a:not(:first-child)").hide();
            $("#banner_info").html($("#banner_list a:first-child").find("img").attr(‘alt‘));
            $("#banner_info").click(function () { window.open($("#banner_list a:first-child").attr(‘href‘), "_blank") });
            $("#banner li").click(function () {
                var i = $(this).text() - 1;//获取Li元素内的值,即1,2,3,4
                n = i;
                if (i >= count) return;
                $("#banner_info").html($("#banner_list a").eq(i).find("img").attr(‘alt‘));
                $("#banner_info").unbind().click(function () { window.open($("#banner_list a").eq(i).attr(‘href‘), "_blank") })
                $("#banner_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
                document.getElementById("banner").style.background = "";
                $(this).toggleClass("on");
                $(this).siblings().removeAttr("class");
            });
            t = setInterval("showAuto()", 4000);
            $("#banner").hover(function () { clearInterval(t) }, function () { t = setInterval("showAuto()", 4000); });
        })

        function showAuto() {
            n = n >= (count - 1) ? 0 : ++n;
            $("#banner li").eq(n).trigger(‘click‘);
        }
    </script>

</head>
<body>
    <div id="banner">
        <div id="banner_bg"></div>
        <!--标题背景-->
        <div id="banner_info"></div>
        <!--标题-->
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <div id="banner_list">
            <a href="#" target="_blank"><img src="../images/p1.jpg" title="jquery1" alt="jquery1" /></a>
            <a href="#" target="_blank"><img src="../images/p2.jpg" title="jquery2" alt="jquery2" /></a>
            <a href="#" target="_blank"><img src="../images/p3.jpg" title="jquery3" alt="jquery3" /></a>
            <a href="#" target="_blank"><img src="../images/p1.jpg" title="jquery4" alt="jquery4" /></a>
        </div>
    </div>

</body>
</html>

  

JQuery 轮播图片

标签:

原文地址:http://www.cnblogs.com/ths0201/p/5688905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!