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

本文实例讲述了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"  class="act">
  <img src="img/2.jpg" >
  <img src="img/3.jpg" >
  <img src="img/4.jpg" >
  <img src="img/5.jpg" >
  <img src="img/6.jpg" >
  <img src="img/7.jpg" >
  <img src="img/8.jpg" >
  <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>

当前标题：JS实现头条新闻的经典轮播图效果示例-创新互联
浏览地址：https://www.cdcxhl.com/article20/cojpjo.html

成都网站建设公司_创新互联，为您提供小程序开发、响应式网站、Google、搜索引擎优化、静态网站、全网营销推广

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容