轮播图布局与交互实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qh19940911/article/details/89478268

<style type="text/css">
// 轮播图布局样式
    *{margin:0;padding:0;list-style: none;}
    .da{width:800px;height:300px;margin:0 auto;position:relative;}
    .tu{width:800px;height:300px;position:relative;}
    .tu a{display:inline-block;position:absolute;top:0;left:0;}
    .items{width:200px;height:20px;position:absolute;bottom:20px;left:300px;}
    .item{width:30px;height:20px;text-align: center;line-height: 20px;margin-left:10px;float:left;border-radius: 50%;}
    .fangx{width:800px;height:80px;position:absolute;top:50%;margin-top: -40px;}
    .left{width:100px;height:80px;text-align: center;line-height: 80px;float:left;font-size: 35px;}
    .right{width:100px;height:80px;text-align: center;line-height: 80px;float:right;font-size: 35px;}
</style>
</head>
<body>
   //布局
   <div class="da">
        <div class="tu">
            <a href=""><img src="img/11.jpg" alt="" /></a>
            <a href=""><img src="img/22.jpg" height="300" width="800" alt="" /></a>
            <a href=""><img src="img/33.jpg" alt="" /></a>
            <a href=""><img src="img/44.jpg" alt="" /></a>
            <a href=""><img src="img/55.jpg" alt="" /></a>
        </div>
        <ul class="items">
            <li class="item" style="background:pink">1</li>
            <li class="item">2</li>
            <li class="item">3</li>
            <li class="item">4</li>
            <li class="item">5</li>
        </ul>
        <div class="fangx">
            <div class="left">&lt;</div>
            <div class="right">&gt;</div>
        </div>
    </div> 
</body>
    //js jquery部分
<script type="text/javascript" src="js/jquery-3.4.0.min.js"></script>
<script type="text/javascript">
   //声明一个num为0作为下标
    var num=0;
 //一个函数，功能是让图片全部消失之后显示对应下标的   图片和序号的内容，并传入判断num++与num--的参数
    function f1(adress){
        if(adress=="r"){
        num++;
        if(num==$("a").length){num=0}}
        else if(adress=="l"){
            num--;
            if(num<0){num=$("a").length-1}
        }
        $("a").hide();
        $(".item").css("background","#fff");
        $("a").eq(num).show();
        $(".item").eq(num).css("background","pink");
            }
  // 时间函数，让上边函数每一秒执行一次
   var time=setInterval(function(){
    f1("r")
   },1000)
  //给每个li序号一个点击事件，点击后让所有图片消失，让li序号变为白色，让你点击的对应下标的图片显示，li变为粉色
     $(".item").click(function(){
         var index=$(this).index();
         $("a").hide();
         $(".item").css("background","#fff");
         $("a").eq(index).show();
         $(".item").eq(index).css("background","pink")
    //让轮播图从点击处继续轮播
         num=$(this).index()
     })
 //鼠标划上停止轮播，鼠标划出继续轮播
     $(".da").hover(
       function(){
        clearInterval(time)
       },
       function(){
        time=setInterval(function(){
    f1("r")
   },1000)
       }
        )
  //点击向左箭头，图片向左轮播
    $(".left").click(function(){
       f1("l")
    })
 //点击向右箭头，图片向右轮播
    $(".right").click(function(){
       f1("r")
    })
</script>