web的轮播

最新推荐文章于 2023-10-17 22:48:47 发布

0&1菜菜

最新推荐文章于 2023-10-17 22:48:47 发布

阅读量555

点赞数 1

文章标签： css html5 html javascript

本文链接：https://blog.csdn.net/Caiabcd/article/details/108944084

版权

轮播在当前的网站中还是非常使用的，在这里就将代码和大家一起分享一下

由于我是第一次学习web，如果还有其他的更好的办法，还希望大家告知

<!DOCTYPE html>
<html>
 <head>
  
  <title>轮播图</title>
  <style type="text/css">
   .box{//对盒子进行描述
    width: 800px;
    height: 460px;
    position: relative;//定义相对位置
   }
   .box_img{//设置图片类
    position: absolute;//定义为绝对位置
    top: 0;
    left: 0;
    opacity: 0;//将img类的设置为透明
    transition: all 1.5s;
   }
   .box_img:nth-child(1)//第一张图片的属性设置为不透明
   {
    opacity: 1;
   }
   .box_left{//设置左键类
    position: absolute;
    width: 40px;//设置外边框宽
    height: 60px;
    color: black;//设置内容颜色
    top: 200px;//设置键对于box的上端的距离
    text-align: center;//设计键内容在自身宽中的位置
    line-height: 60px;//设置在自身高的位置
   }
   .box_left:hover{//设置鼠标放上去的颜色
    background-color: cornsilk;
    color: black;
   }
   .box_right{
    position: absolute;
    width: 40px;
    height: 60px;
    color: black;
    top: 200px;
    text-align: center;
    line-height: 60px;
    right: 0;
   }
   .box_right:hover{
    background-color: cornsilk;
    color: black;
   }
   .box_poilt{//设置下方点对于box的位置
    position: absolute;
    bottom: 30px;
    right: 100px;
   }
   .box_poilt>ul{
    padding: 0;
    margin: 0;
    list-style: none;
   }
   .box_poilt li{
    width: 15px;//点的宽
    height: 15px;//点的高
    border-radius: 100%;//点的角百分之百代表达到圆的状态
    background-color: aliceblue;
    float: left;//将纵向排列改成横向排列
    margin-right: 8px;//间距-右   改变右间距
   }
   .box_poilt li:hover{//鼠标放上去的颜色
    background-color: aqua;
    }
  </style>
 </head>
 <body>
  <div class="box"><!--定义一个盒子-->
   <div class="box_img"><!--在盒子中插入三张图片-->
    <img src="RFC28SgLwNqhWXt.jpg" width="800" height="460">
   </div>
   <div class="box_img">
    <img src="timg1.jpg" width="800" height="460">
   </div>
   <div class="box_img">
    <img src="微信图片_20200426201326.jpg" width="800" height="460">
   </div>
   <div class="box_left"><!--体现左右键，这里使用大于小于号表示-->
    &lt;
   </div>
   <div class="box_right">
    &gt;
   </div>
   <div class="box_poilt"><!--定义下方的按钮-->
    <ul>
     <li class="box_button"></li>
     <li class="box_button"></li>
     <li class="box_button"></li>
    </ul>
   </div>
  </div>
  <script type="text/javascript" src="jquery-3.4.1.min.js"></script>
  <script type="text/javascript">
   $(function(){
    var index=0;
    var t;
    tim();
    function tim(){//定义定时器方法
     t=setInterval(function(){//定义一个定时器
     if(index==$(".box_img").length-1)//如果当前图片在最后一张图片则跳到第一张图片
     {
      index=0;
      $(".box_img").css("opacity","0");//所有图片隐藏
      $(".box_img").eq(index).css("opacity","1");//显示index对应的图片
      $(".box_button").css("background-color","aliceblue");//按钮背景色全部清除
      $(".box_button").eq(index).css("background-color","aqua");//显示图片的按钮的背景色显示
     }
     else
     {
      index++;
      $(".box_img").css("opacity","0");
      $(".box_img").eq(index).css("opacity","1");
      $(".box_button").css("background-color","aliceblue");
      $(".box_button").eq(index).css("background-color","aqua");
     }
     },2000)//定时器为2秒一次
    }
    $(".box_left").click(function(){//左右按钮
     clearInterval(t);//清除定时器，防止定时器和按钮同时或相近的图片切换
     index--;
     $(".box_img").css("opacity","0");
     $(".box_img").eq(index).css("opacity","1");
     $(".box_button").css("background-color","aliceblue");
     $(".box_button").eq(index).css("background-color","aqua");
     tim();//重启定时器方法
     
    })
    $(".box_right").click(function(){
     clearInterval(t);
     index++;
     if(index==$(".box_img").length)
     {
     index=0;
     $(".box_img").css("opacity","0");
     $(".box_img").eq(index).css("opacity","1");
     $(".box_button").css("background-color","aliceblue");
     $(".box_button").eq(index).css("background-color","aqua");
     tim();
     }
     else
     {
     $(".box_img").css("opacity","0");
     $(".box_img").eq(index).css("opacity","1");
     $(".box_button").css("background-color","aliceblue");
     $(".box_button").eq(index).css("background-color","aqua");
     tim();
     }
    })
    $(".box_button").click(function(){
     clearInterval(t);
     var indexx=$(this).index();//获取当前图片编号值
     index=indexx;
     $(".box_img").css("opacity","0");
     $(".box_img").eq(index).css("opacity","1");
     $(".box_button").css("background-color","aliceblue");
     $(".box_button").eq(index).css("background-color","aqua");
     tim();
    })
   })
  </script>
 </body>
</html>