带有缩略图和文字提示的轮播图

最新推荐文章于 2021-06-27 02:20:46 发布

angliliu2521

最新推荐文章于 2021-06-27 02:20:46 发布

阅读量381

点赞数 1

文章标签：游戏 javascript 前端 ViewUI

原文链接：http://www.cnblogs.com/yf-html/p/5674337.html

版权

这也是轮播图做了好久，还是刚进入前端岗位工作不久，自己空余时间写的。

下面是代码：

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>lubo</title>
   <script type="text/javascript" src="js/jquery-1.12.3.js"></script>
   <!--<script type="text/javascript" src="js/headerBg.js"></script>-->
   <style>
      a, img { border: none; }
      #headerBg { position: relative; margin: 40px auto 0 auto; width: 750px; height: 460px; overflow: hidden; border-radius: 10px 10px;}
      #headerBg .imgbox { width: 4500px; height: 380px; position: absolute; left: 5px; top: 4px; }
      #headerBg .imgbox img { float: left; width: 750px; height: 380px; }
      #headerBg .btnbox { width: 750px; height: 120px; position: absolute; top: 395px; bottom: 0px;}
      #headerBg .btnbox a { cursor: pointer; display: inline-block; float: left; width: 120px; height: 64px; margin: 0 0 0 4px;}
      #headerBg .btnbox a img { position: relative; display: inline; width: 116px; height: 58px; float: left; border: 3px solid gray; border-radius: 5px 5px; }
      #headerBg .btnbox a .img_hover { border: 3px solid ghostwhite; border-radius: 5px 5px; }
      #headerBg .btn {
         width: 40px;
         height: 90px;
         ">rgba(0, 0, 0, 0.5);
         position: absolute;
         font-size: 80px;
         color: white;
         font-family: "å®‹ä½“";
         margin-top: 250px;
         display: none;
      }
      #headerBg .btn:hover { ">rgba(0, 0, 0, 0.7); cursor: pointer; }
      #headerBg .btn_left { left: 0px; top: -105px; }
      #headerBg .btn_right { left: 710px; top: -105px; }
      body{ background: black  ; }

      #headerBg .move_text{overflow:hidden;width:750px;height:40px;position:absolute;top:345px;">rgba(0, 0, 0, 0.5); }
      #headerBg .move_text h3{margin:10px 0 10px 0;font-size:20px;text-indent: 3em;Letter-spacing: 1em;color:ghostwhite;}
   </style>
</head>
<body>
   <div id="headerBg">
      <div class="imgbox">
         <img alt="Danx" src="img/1.jpg" width="750" height="380"/>
         <img alt="Danx" src="img/2.jpg" width="750" height="380"/>
         <img alt="Danx" src="img/3.jpg" width="750" height="380"/>
         <img alt="Danx" src="img/4.jpg" width="750" height="380"/>
         <img alt="Danx" src="img/5.jpg" width="750" height="380"/>
         <img alt="Danx" src="img/6.jpg" width="750" height="380"/>
      </div>

      <div class="move_text">

         <div id="move_text0" class="move_text_div">
            <h3>标题1</h3>
         </div>

         <div id="move_text1" class="move_text_div">
            <h3>标题2</h3>
         </div>

         <div id="move_text2" class="move_text_div">
            <h3>标题3</h3>
         </div>

         <div id="move_text3" class="move_text_div">
            <h3>标题4</h3>
         </div>

         <div id="move_text4" class="move_text_div">
            <h3>标题5</h3>
         </div>
         <div id="move_text5" class="move_text_div">
            <h3>标题5</h3>
         </div>
      </div>

      <div class="btnbox">
         <a οnmοuseοver="btn_m_over(0)"><img alt="Danx" id="btn_img0" class="thumb img_hover" src="img/1.jpg"/></a>
         <a οnmοuseοver="btn_m_over(1)"><img alt="Danx" id="btn_img1" class="thumb" src="img/2.jpg"/></a>
         <a οnmοuseοver="btn_m_over(2)"><img alt="Danx" id="btn_img2" class="thumb" src="img/3.jpg"/></a>
         <a οnmοuseοver="btn_m_over(3)"><img alt="Danx" id="btn_img3" class="thumb" src="img/4.jpg"/></a>
         <a οnmοuseοver="btn_m_over(4)"><img alt="Danx" id="btn_img4" class="thumb" src="img/5.jpg"/></a>
         <a οnmοuseοver="btn_m_over(5)"><img alt="Danx" id="btn_img5" class="thumb" src="img/6.jpg"/></a>
      </div>

      <div class="btn btn_left">&lt;</div>
      <div class="btn btn_right">&gt;</div>
   </div>

   <script type="text/javascript">
   $( "#headerBg" ).hover( function()
   {
      $( ".btn" ).css( "display", "block" );
   }, function()
   {
      $( ".btn" ).css( "display", "none" );
   } );

   var nub=$(".imgbox img" ).size();
   var count=nub-1;
   $(".move_text_div").hide();
   $("#move_text0").show();

   $(".img_hover").animate({bottom:'10px'});
   var i=1;
   var m_over=true;

   function zx_slider(){
      if(m_over){
         if(i<0){i=count;}
         //p
         $(".move_text_div").hide();
         $("#move_text"+i).show();
         //p end
         //btn
         $(".btnbox img").stop(true,true);
         $(".btnbox img").removeClass("img_hover");
         $(".btnbox img").animate({bottom:'0px'},200);
         $("#btn_img"+i).addClass("img_hover");
         $("#btn_img"+i).animate({bottom:'10px'},200);
         //btn end
         $(".imgbox").stop();
         $(".imgbox").animate({left:'-750'*i+'px'});
         /*if(i<count){
            i++;
         }else{
            i=0;
         }*/
         i++;
         console.log( i );
         if(i ===count+1){
            i = 0;
         }
      }
   }

   $(".btn_left").click(function(){
      m_over=true;
      if(i==0){i=count-1}else{i=i-2;}
      zx_slider();
      m_over=false;
   });

   $(".btn_right").click(function(){
      m_over=true;
      zx_slider();
      m_over=false;
   });

   //鼠标悬停动画
   function btn_m_over(btn_i){
      if(i-1!=btn_i){
         m_over=true;
         i=btn_i;
         zx_slider();
         m_over=false;
      }
   }

   zx_timer = setInterval( "zx_slider();", 2000 );
   $( "#headerBg" ).mouseover( function()
   {
      m_over = false;
   } );
   $( "#headerBg" ).mouseout( function()
   {
      m_over = true;
   } );
   </script>
</body>
</html>
以上是个人写的，可供参考。