最简单的图片轮播实现

最新推荐文章于 2022-05-25 19:00:58 发布

linux_liufuqiang

最新推荐文章于 2022-05-25 19:00:58 发布

阅读量1.4k

点赞数

分类专栏： web技术文章标签： function border scroll list float javascript

本文链接：https://blog.csdn.net/linux_liufuqiang/article/details/5317390

版权

web技术专栏收录该内容

0 篇文章 0 订阅

订阅专栏

以下代码保存为一个xx.html即可运行。

<html
   <head>
       <style>
       #banner {
   border:0 none;
   float:left;
   height:225px;
   margin:2px 16px 0 12px;
   width:270px;
   border:1px solid #CCCCCC;
   }
#banner img {
       border:0px;
       width:270px;
       height:225px;
   }
#play_text {
       position:absolute;
       margin:190px 0 0 0;
       height:24px;
       width:290px;
       z-index:1002;
   }
   #play_text ul {
       list-style-type:none;
       padding-right:24px;
       float:right;
       height:20px;
       display:block;
}
#play_text ul li {
   width:18px;
   height:18px;
   line-height:18px;
   float:left;
   background:#000;
   border:2px solid #fff;
   display:block;
   color:#fff;
   text-align:center;
   margin:1px;
   font-weight:700;
   cursor:pointer;

   background:#FFFFFF none repeat scroll 0 0;
   border:1px solid #74A8ED;
   color:#74A8ED;

}
   #play_text ul li.selected{
       background:#f00;
   background:#74A8ED none repeat scroll 0 0;
   border:1px solid #EEEEEE;
   color:#FFFFFF;
   font-size:16px;
   font-weight:700;
   }
   #play_list a {
       display:block;
       position:absolute;
       overflow:hidden
   }
       </style>
       <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
       <script language="javascript">
       $(function (){
      picAuto(4000);
      var t = setInterval('AutoScroll("#scrollDiv")',1500);

      $('#scrollDiv').hover(
        function () {
          clearInterval(t);
        },
        function () {
          t = setInterval('AutoScroll("#scrollDiv")',1500);
        }
      );
});

//首页轮播图片
function picAuto(_AutoTime) {
      var t = n = 0; count = $("#play_list a").size();
      $("#play_list a:not(:first-child)").hide();
      $("#play_text li:first-child").addClass("selected");
      $("#play_text li").click(function() {
          var i = $(this).text() - 1;
          n = i;
          if (i >= count) return;
          $("#play_list a").filter(":visible").fadeOut(500).parent().children().eq(i).fadeIn(1000);
          $(this).addClass("selected").siblings().removeClass("selected");
      });
      t = setInterval("showAuto()", _AutoTime);
      $("#pic").hover(function(){clearInterval(t)}, function(){t = setInterval("showAuto()", _AutoTime);});
      //移动到图片上后不自动跳转图片
}
function showAuto() {
      n = n >= (count - 1) ? 0 : ++n;
      $("#play_text li").eq(n).trigger('click');
}
function AutoScroll(obj){
      var myheight = $('.new_prod_box').height();
      $(obj).find("ul:first").animate({
          marginTop:'-'+myheight
          },500,function(){
          $(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
          }
      );
}
           </script>
   </head>
   <body>
       <div id="banner">
          <div id="play_text">
              <ul>
                  <li>1</li>
                  <li>2</li>
                  </ul>
                  </div>
                  <div id="play_list">
                      <a href="http://www.qihoo.com">
<img src="http://img.qihoo.com/images/2008/qihoo/logo2010.jpg"/>
</a>
<a href="http://www.yiiframework.com">
<img src="http://www.yiiframework.com/images/logo.gif"/>
</a>
                      </div>
                      </div>

   </body>
</html>