Code666 (代码贴、代码片段)

[JavaScript] [jQuery] 实现图片轮播 →→→→→进入此内容的聊天室

来自 , 2020-05-05, 写在 JavaScript, 查看 133 次.
URL http://www.code666.cn/view/c82b0133
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4.     <title>jQuery 图片轮播</title>
  5.     <style type="text/css">
  6.         body {  
  7.             background-color:#EEE;
  8.                 margin:0;
  9.                 padding:0;
  10.             font-family:微软雅黑;
  11.         }
  12.         h1{color:Green;}
  13.         #show{margin:0 auto;width:701px;}
  14.  
  15.         .main{
  16.             background:#333;
  17.             color:#FFF;
  18.             float:left;
  19.             height:333px;
  20.             overflow:hidden;
  21.             position:relative;
  22.             width:500px;
  23.         }
  24.         .main .block{
  25.             background:#111;
  26.             border-top:1px solid #000;
  27.             width:100%;
  28.         }
  29.         .main h2{
  30.             font-size:18px;
  31.             margin:0 0 5px;
  32.             padding:5px;
  33.         }
  34.         .main p{
  35.             font-size:14px;
  36.             line-height:14px;
  37.             margin:0;
  38.             padding:5px;
  39.         }
  40.         .main .desc{
  41.             position: absolute;
  42.             bottom: 0;
  43.             left: 0;
  44.             width: 100%;
  45.             display: none;
  46.         }
  47.         .main .block{
  48.             width: 100%;
  49.             background: #111;
  50.             border-top: 1px solid #000;
  51.         }
  52.         .thumb{
  53.             background:#f0f0f0;
  54.             border-right:1px solid #fff;
  55.             border-top:1px solid #ccc;
  56.             float:left;
  57.             width:200px;
  58.         }
  59.         .thumb img{
  60.             border:none;
  61.             float:left;
  62.             padding:5px;
  63.         }
  64.         .thumb ul {
  65.             margin: 0;
  66.             padding: 0;
  67.             list-style: none;
  68.         }
  69.         .thumb ul li{
  70.             border-bottom:1px solid #ccc;
  71.             border-top:1px solid #fff;
  72.             float:left;
  73.             padding:2px 4px;
  74.             width:190px;
  75.         }
  76.         .thumb ul li:hover{
  77.             background:#ddd;
  78.             cursor:pointer;
  79.         }
  80.  
  81.         .thumb ul li h2 {
  82.             font-size:14px;
  83.             margin: 5px 0;
  84.         }
  85.         .thumb ul li .block {
  86.             float: left;
  87.             margin-left: 10px;
  88.             margin-top:10px;
  89.             width: 60px;
  90.         }
  91.         .thumb ul li p{display: none;}
  92.     </style>
  93.     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
  94.     <script type="text/javascript">
  95.         $(document).ready(function () {
  96.             $(".main .desc").show();
  97.             $(".main .block").animate({ opacity: 0.8 }, 1);
  98.  
  99.             $(".thumb ul li").click(function () {
  100.                 var alt = $(this).find("img").attr("alt");
  101.                 var href = $(this).find("a").attr("href");
  102.                 var desc = $(this).find(".block").html();
  103.  
  104.                 $(".main img").fadeOut(100, function () {
  105.                     $(this).attr({ src: href, alt: alt })
  106.                                 .fadeIn(500);
  107.                 });
  108.                 $(".main .block").html(desc);
  109.                 return false;
  110.             });
  111.         });
  112.     </script>
  113. </head>
  114. <body>
  115.     <h1>jQuery 图片轮播</h1>
  116.     <div id="show">
  117.         <div class="main">
  118.             <img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332641.jpg" alt="" />
  119.             <div class="desc">
  120.                 <div class="block">
  121.                     <h2>安以轩1</h2>
  122.                     <p>安以轩1，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
  123.                 </div>
  124.             </div>
  125.         </div>
  126.         <div class="thumb">
  127.             <ul>
  128.                 <li>
  129.                     <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332641.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332180.jpg" alt="安以轩" /></a>
  130.                     <div class="block">
  131.                         <h2>安以轩1</h2>
  132.                         <p>安以轩1，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
  133.                     </div>
  134.                 </li>
  135.                 <li>
  136.                     <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332842.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332412.jpg" alt="安以轩" /></a>
  137.                     <div class="block">
  138.                         <h2>安以轩2</h2>
  139.                         <p>安以轩2，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
  140.                     </div>
  141.                 </li>
  142.                 <li>
  143.                     <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332666.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332434.jpg" alt="安以轩" /></a>
  144.                     <div class="block">
  145.                         <h2>安以轩3</h2>
  146.                         <p>安以轩3，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
  147.                     </div>
  148.                 </li>
  149.                 <li>
  150.                     <a href=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332544.jpg"><img src=http://www.ijingxuan.com/uploadfile/2011/1229/20111229080332565.jpg" alt="安以轩" /></a>
  151.                     <div class="block">
  152.                         <h2>安以轩4</h2>
  153.                         <p>安以轩4，希望大家喜欢！<a href="http://hyipaying.com/">jQuery 学习</a>站，将继续努力为大家提供帮助，感谢大家支持！</p>
  154.                     </div>
  155.                 </li>
  156.             </ul>
  157.         </div>
  158.     </div>
  159. </body>
  160. </html>
  161. /
  162.  
  163. //javascript/1042

回复 "[jQuery] 实现图片轮播"

这儿你可以回复上面这条便签

captcha

贴代码片段 - Code666