- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a >
- 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="<a href="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js">http://ajax.googleapis.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="<a href="http://hyipaying.com/images/demo/2010/anyixuan01.jpg">http://hyipaying.com/images/demo/2010/anyixuan01.jpg" alt="" />
- <div class="desc">
- <div class="block">
- <h2>安以轩1</h2>
- <p>安以轩1,希望大家喜欢!<a href="<a href="http://hyipaying.com/">http://hyipaying.com/">jQuery 学习</a>站,将继续努力为大家提供帮助,感谢大家支持!</p>
- </div>
- </div>
- </div>
- <div class="thumb">
- <ul>
- <li>
- <a href="<a href="http://hyipaying.com/images/demo/2010/anyixuan01.jpg">http://hyipaying.com/images/demo/2010/anyixuan01.jpg"><img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan1.jpg">http://hyipaying.com/images/demo/2010/anyixuan1.jpg" alt="安以轩" /></a>
- <div class="block">
- <h2>安以轩1</h2>
- <p>安以轩1,希望大家喜欢!<a href="<a href="http://hyipaying.com/">http://hyipaying.com/">jQuery 学习</a>站,将继续努力为大家提供帮助,感谢大家支持!</p>
- </div>
- </li>
- <li>
- <a href="<a href="http://hyipaying.com/images/demo/2010/anyixuan02.jpg">http://hyipaying.com/images/demo/2010/anyixuan02.jpg"><img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan2.jpg">http://hyipaying.com/images/demo/2010/anyixuan2.jpg" alt="安以轩" /></a>
- <div class="block">
- <h2>安以轩2</h2>
- <p>安以轩2,希望大家喜欢!<a href="<a href="http://hyipaying.com/">http://hyipaying.com/">jQuery 学习</a>站,将继续努力为大家提供帮助,感谢大家支持!</p>
- </div>
- </li>
- <li>
- <a href="<a href="http://hyipaying.com/images/demo/2010/anyixuan03.jpg">http://hyipaying.com/images/demo/2010/anyixuan03.jpg"><img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan3.jpg">http://hyipaying.com/images/demo/2010/anyixuan3.jpg" alt="安以轩" /></a>
- <div class="block">
- <h2>安以轩3</h2>
- <p>安以轩3,希望大家喜欢!<a href="<a href="http://hyipaying.com/">http://hyipaying.com/">jQuery 学习</a>站,将继续努力为大家提供帮助,感谢大家支持!</p>
- </div>
- </li>
- <li>
- <a href="<a href="http://hyipaying.com/images/demo/2010/anyixuan04.jpg">http://hyipaying.com/images/demo/2010/anyixuan04.jpg"><img src="<a href="http://hyipaying.com/images/demo/2010/anyixuan4.jpg">http://hyipaying.com/images/demo/2010/anyixuan4.jpg" alt="安以轩" /></a>
- <div class="block">
- <h2>安以轩4</h2>
- <p>安以轩4,希望大家喜欢!<a href="<a href="http://hyipaying.com/">http://hyipaying.com/">jQuery 学习</a>站,将继续努力为大家提供帮助,感谢大家支持!</p>
- </div>
- </li>
- </ul>
- </div>
- </div>
- </body>
- </html>
- /
- //该片段来自于http://www.codesnippet.cn/detail/080520133184.html
来源: http://www.codesnippet.cn/detail/080520133184.html