JS实现头条新闻的经典轮播图效果示例

2019-11-19 12:11:43

字体：大中小

来源：转载

供稿：网友

本文实例讲述了JS实现头条新闻的经典轮播图效果。分享给大家供大家参考，具体如下：

<!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>

本机测试运行效果如下：