[jQuery] 实现图片轮播_JavaScript

[jQuery] 实现图片轮播

<!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>
    <title>jQuery 图片轮播</title>
    <style type="text/css">
        body {  
            background-color:#EEE;
	        margin:0;
	        padding:0;
            font-family:微软雅黑;
        }
        h1{color:Green;}
        #show{margin:0 auto;width:701px;}
 
        .main{
            background:#333;
            color:#FFF;
            float:left;
            height:333px;
            overflow:hidden;
            position:relative;
            width:500px;
        }
        .main .block{
            background:#111;
            border-top:1px solid #000;
            width:100%;
        }
        .main h2{
            font-size:18px;
            margin:0 0 5px;
            padding:5px;
        }
        .main p{
            font-size:14px;
            line-height:14px;
            margin:0;
            padding:5px;
        }
        .main .desc{
            position: absolute;
            bottom: 0;
            left: 0; 
            width: 100%;
            display: none; 
        }
        .main .block{
            width: 100%;
            background: #111;
            border-top: 1px solid #000;
        }
        .thumb{
            background:#f0f0f0;
            border-right:1px solid #fff;
            border-top:1px solid #ccc;
            float:left;
            width:200px;
        }
        .thumb img{
            border:none;
            float:left;
            padding:5px;
        }
        .thumb ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .thumb ul li{
            border-bottom:1px solid #ccc;
            border-top:1px solid #fff;
            float:left;
            padding:2px 4px;
            width:190px;
        }
        .thumb ul li:hover{
            background:#ddd;
            cursor:pointer;
        }
 
        .thumb ul li h2 {
            font-size:14px;
            margin: 5px 0;
        }
        .thumb ul li .block {
            float: left;
            margin-left: 10px;
            margin-top:10px;
            width: 60px;
        }
        .thumb ul li p{display: none;}
    </style>
    <script type="text/javascript" src="http://ajax.useso.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".main .desc").show();
            $(".main .block").animate({ opacity: 0.8 }, 1);
 
            $(".thumb ul li").click(function () {
                var alt = $(this).find("img").attr("alt");
                var href = $(this).find("a").attr("href");
                var desc = $(this).find(".block").html();
 
                $(".main img").fadeOut(100, function () {
                    $(this).attr({ src: href, alt: alt })
                                .fadeIn(500);
                });
                $(".main .block").html(desc);
                return false;
            });
        });
    </script>
</head>
<body>
    <h1>jQuery 图片轮播</h1>
    <div id="show">
        <div class="main">
            <img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332641.jpg" alt="" />
            <div class="desc">
                <div class="block">
                    <h2>安以轩1</h2>
                    <p>安以轩1，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
                </div>
            </div>
        </div>
        <div class="thumb">
            <ul>
                <li>
                    <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332641.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332180.jpg" alt="安以轩" /></a>
                    <div class="block">
                        <h2>安以轩1</h2>
                        <p>安以轩1，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
                    </div>
                </li>
                <li>
                    <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332842.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332412.jpg" alt="安以轩" /></a>
                    <div class="block">
                        <h2>安以轩2</h2>
                        <p>安以轩2，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
                    </div>
                </li>
                <li>
                    <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332666.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332434.jpg" alt="安以轩" /></a>
                    <div class="block">
                        <h2>安以轩3</h2>
                        <p>安以轩3，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
                    </div>
                </li>
                <li>
                    <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332544.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332565.jpg" alt="安以轩" /></a>
                    <div class="block">
                        <h2>安以轩4</h2>
                        <p>安以轩4，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</body>
</html>
/