jQuery实现图片轮播效果，jQuery实现焦点新闻



jQuery实现图片轮播效果，jQuery实现焦点新闻

效果图：

实现代码：

 

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>图片轮播，新闻轮播，焦点新闻轮播</title>
  5.         <meta http-equiv=”content-type” content=”text/html;charset=utf-8″/>
  6.         <script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>
  7.         <script type=”text/javascript”>
  8.             $(document).ready(function(){
  9.                 var index=0;
  10.                 var slideFlag = true;
  11.                 var length=$(“.roll-news-image img”).length;
  13.                 function showImg(i){
  14.                     $(“.roll-news-image img”)
  15.                     .eq(i).stop(true,true).fadeIn(800)
  16.                     .siblings(“img”).hide();
  18.                     $(“.roll-news-index li”).removeClass(“roll-news-index-hover”);
  19.                     $(“.roll-news-index li”).eq(i).addClass(“roll-news-index-hover”);
  21.                     $(“.roll-news-title a”)
  22.                     .eq(i).stop(true,true).fadeIn(800)
  23.                     .siblings(“a”).hide();
  24.                 }
  25.                 showImg(index);
  27.                 $(“.roll-news-index li”).click(function(){
  28.                     index = $(“.roll-news-index li”).index(this);
  29.                     showImg(index);
  30.                     slideFlag = false;
  31.                 });
  33.                 function autoSlide() {
  34.                     setInterval(function() {
  35.                         if(slideFlag) {
  36.                             showImg((index+1) % length);
  37.                             index = (index+1)%length;
  38.                         }
  39.                         slideFlag = true;
  40.                     }, 3000);
  41.                 }
  43.                 autoSlide();
  45.             });
  46.         </script>
  47.         <style type=”text/css”>
  48.             * {
  49.                 padding:0px;
  50.                 margin:0px;
  51.             }
  52.             .roll-news {
  53.                 width:480px;
  54.                 height:300px;
  55.                 border:solid 1px #c1c1c1;
  56.             }
  57.             .roll-news-index-hover {
  58.                 background-color:white;
  59.             }
  60.             .roll-news-image img {
  61.                 width:480px;
  62.                 height:300px;
  63.             }
  64.             .roll-news-index {
  65.                 position:relative;
  66.                 top:-50px;
  67.                 margin-right:5px;
  68.                 float:right;
  69.             }
  70.             .roll-news-index {
  71.             }
  72.             .roll-news-index li {
  73.                 list-style:none;
  74.                 float:left;
  75.                 font-size:12px;
  76.                 font-weight:600;
  77.                 width:18px;
  78.                 height:16px;
  79.                 line-height:16px;
  80.                 cursor:pointer;
  81.                 margin:0 3px;
  82.                 background-image:url(opacity_50.png);
  83.                 text-align:center;
  84.             }
  85.             .roll-news-title {
  86.                 position:relative;
  87.                 top:-25px;
  88.                 padding-left:10px;
  89.                 height:22px;
  90.                 line-height:20px;
  91.                 background:url(opacity_50.png);
  92.             }
  93.             .roll-news-title a {
  94.                 font-size:12px;
  95.                 text-decoration:none;
  96.                 color:#222222;
  97.             }
  98.             .roll-news-title a:hover {
  99.                 color:red;
  100.             }
  101.         </style>
  102.     </head>
  103.     <body>
  104.         <div class=”roll-news”>
  105.             <div class=”roll-news-image”>
  106.                 <img src=”http://h.hiphotos.baidu.com/album/w%3D2048/sign=e952491b5243fbf2c52ca1238446ca80/d4628535e5dde711bfe12fe5a6efce1b9d1661f5.jpg”>
  107.                 <img src=”http://img2.duitang.com/uploads/item/201111/15/20111115104036_AcnUz.thumb.600_0.jpg” style=”display:none”>
  108.                 <img src=”http://img4.duitang.com/uploads/item/201202/29/20120229160925_jJ2Ei.thumb.600_0.jpg” style=”display:none”>
  109.             </div>
  110.             <div class=”roll-news-index”>
  111.                 <ul>
  112.                     <li class=”roll-news-index-hover”>1</li>
  113.                     <li>2</li>
  114.                     <li>3</li>
  115.                 </ul>
  116.             </div>
  117.             <div class=”roll-news-title”>
  118.                 <a href=”" target=”_blank”>图片1：点击后跳转</a>
  119.                 <a href=”" target=”_blank” style=”display:none”>图片2：点击后跳转</a>
  120.                 <a href=”" target=”_blank” style=”display:none”>图片3：点击后跳转</a>
  121.             </div>
  122.         </div>
  123.     </body>
  124. </html>

附件中包含一张引用的图片，其它可以直接拷贝看效果。。