头条新闻的轮播图制作

最新推荐文章于 2021-11-27 18:00:00 发布

s_psycho

最新推荐文章于 2021-11-27 18:00:00 发布

阅读量1.1k

点赞数

本文链接：https://blog.csdn.net/weixin_42413689/article/details/80924406

版权

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
   *{
       margin:0;
       padding:0;
       list-style: none;
   }
        .box{
            width: 665px;
            height: 362px;
            border: solid;
            margin: 100px auto;
            position:relative ;
        }
        .left{
            width: 50px;
            height: 50px;
            border: solid white;
            border-radius: 50%;
            position: absolute;
            line-height: 50px;
            text-align: center;
            font-size: 50px;
            left:0px;
            top:180px;
            cursor: pointer;
            color: white;
        }
   .right {
       width: 50px;
       height: 50px;
       border: solid white;
       border-radius: 50%;
       position: absolute;
       line-height: 50px;
       text-align: center;
       font-size: 50px;
       right: 0px;
       top: 180px;
       cursor: pointer;
       color: white;
   }
      ul{
          width: 400px;
          height: 50px;
          margin:307px 188px;
          position: absolute;
          left:30px;
          top:24px;
      }
li{
    width: 30px;
    height: 30px;
    border: solid 1px white;
    border-radius: 50%;
    float: left;
    cursor: pointer;
    line-height: 30px;
    text-align: center;
    color: white;
}
        img{
            display: none;
            width: 665px;
            height: 362px;
        }
        .act{display: block;
        }
        .active{
            background: black;
        }
    </style>
</head>
<body>
<div class="box" id="box">
    <img src="img/1.jpg" alt="" class="act">
    <img src="img/2.jpg" alt="">
    <img src="img/3.jpg" alt="">
    <img src="img/4.jpg" alt="">
    <img src="img/5.jpg" alt="">
    <img src="img/6.jpg" alt="">
    <img src="img/7.jpg" alt="">
    <img src="img/8.jpg" alt="">
    <div class="left" id="left"> < </div>
    <div class="right" id="right"> > </div>
    <ul>
        <li class="active">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</div>
<script>
    window.onload=function () {
        var arrLi=document.getElementsByTagName("li");
        var arrImg=document.getElementsByTagName("img");
        var oLeft=document.getElementById("left");
        var oRight=document.getElementById("right");
        var oBox=document.getElementById("box");
        var num=0;
        f=setInterval(abc,1000);
        oBox.onmouseover=function () {
            clearInterval(f)
        }
        oBox.onmouseout=function () {
            f=setInterval(abc,1000);
        }

        for(x=0;x<arrLi.length;x++) {
            arrLi[x].index=x;
            arrLi[x].onmouseover=function () {
                for(j=0;j<arrLi.length;j++){
                    arrLi[j].className="";
                    arrImg[j].className="";
                }
                this.className="active";
                arrImg[this.index].className="act";
            }
        }
           oLeft.onclick=function () {
               num=num-1;
               if(num<0){
                   num=arrImg.length-1
               }
               for(j=0;j<arrImg.length;j++){
                   arrImg[j].className="";
                   arrLi[j].className="";
               }arrImg[num].className="act";
               arrLi[num].className="active";
           }
        oRight.onclick=abc
                function abc() {
            num=num+1;
            if(num>arrImg.length-1){
                num=0
            }
            for(j=0;j<arrImg.length;j++){
                arrImg[j].className="";
                arrLi[j].className="";
            }arrImg[num].className="act";
            arrLi[num].className="active";
        }
    }
</script>
</body>
</html>