轮播图

最新推荐文章于 2024-05-17 14:37:34 发布

Guo小阳*

最新推荐文章于 2024-05-17 14:37:34 发布

阅读量80

点赞数

本文链接：https://blog.csdn.net/weixin_41602101/article/details/89491762

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>轮播图</title>
    <style type="text/css">
    *{
        margin: 0;
        padding:0;
        list-style: none;
        font-family: "微软雅黑";
        cursor:pointer;
    }
      .bigbox{
        width:730px;
        height:454px;
        margin:0 auto;
        position: relative;
         
      }
      .box{
           width:730px;
          height:454px;
          position:relative;
          
      }
      .box a {
        display:block;
        position:absolute;
        top:0;
        left:0;
      }
      .items{
         width:160px;
         position:absolute;
         bottom: 20px;
        left:300px;
        height:16px;
      }
      .items .item{
        float:left;
        width:16px;
        margin-right: 10px;
        text-align: center;
        line-height: 16px;
       background: #fff;
       border-radius: 50%;
       font-size: 12px;
      }
   
    .btnbox{
        width:730px;
        height:100px;
        position:absolute;
        top:50%;
        margin-top: -50px;
        z-index: 3;
    }
    .btn{
       width:50px;
       height:100px;
        font-size: 30px;
        text-align: center;;
        line-height: 100px;
        color: gray;
        background:rgba(0, 0, 0, 0.5);
    }
    .fl{
        float:left;
    }
    .fr{
        float:right;
    }
    
    </style>
</head>
<body>
    <div class="bigbox">
       <div class="box">
            <a href="javascript:;" style="z-index:1"><img src="images/1.jpg" height="454" width="730" alt="" /></a>
            <a href="javascript:;"><img src="images/2.jpg" height="454" width="730" alt="" /></a>
            <a href="javascript:;" ><img src="images/3.jpg" height="454" width="730" alt="" /></a>
            <a href="javascript:;"><img src="images/4.jpg" height="454" width="730" alt="" /></a>
            <a href="javascript:;" ><img src="images/5.jpg" height="454" width="730" alt="" /></a>
            <a href="javascript:;" ><img src="images/6.jpg" height="454" width="730" alt="" /></a>

       </div> 
      <ul class="items" style="z-index:99">
          <li class="item" style="background:#ed145b">1</li>
          <li class="item">2</li>
          <li class="item">3</li>
          <li class="item">4</li>
          <li class="item">5</li>
          <li class="item">6</li>
      </ul>
      <div class="btnbox">
          <div class="btn fl" id ="left">&lt;</div>
          <div class="btn fr" id="right">&gt;</div>
      </div>
   </div>
</body>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
   jQuery(document).ready(function($) {
 var num=0;
     var Img =$("a");
     var li =$(".item")
     function auto(adress){
       $(Img).hide().eq(num).show();
      $(li).css("background","#fff").eq(num).css("background","#ed145b")
   
        if(adress=="right"){
        num++;
        if(num>=Img.length){
               num=0
        }
    } else if (adress=="left"){
        num--;  
        if(num<0){
            num=Img.length-1;
        }
         
    }
  }   
  var xxx = setInterval(function(){
    auto("right")
  },1000)

$(li).click(function(){
  var i = $(this).index();
  $(li).css("background","#fff").eq(i) .css("background","#ed145b")
  $(Img).css("zIndex","0").eq(i).css("zIndex","1")
    
})
$(".bigbox").hover(function(){
  clearInterval(xxx)
   },
     function(){
      xxx=setInterval(function(){
    auto("right")
  },1000)
         }
);

 $("#left").click(function(){
    auto("left")
 })
$("#right").click(function(){
  auto("right")
})


   });


</script>
</html>