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


Posted in Javascript onJanuary 30, 2019

本文实例讲述了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>

本机测试运行效果如下:

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

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JavaScript实现点击按钮后变灰避免多次重复提交
Jul 15 Javascript
jquery插件splitScren实现页面分屏切换模板特效
Jun 16 Javascript
跟我学习javascript的垃圾回收机制与内存管理
Nov 23 Javascript
全面解析Javascript无限添加QQ好友原理
Jun 15 Javascript
jquery遍历标签中自定义的属性方法
Sep 17 Javascript
KnockoutJS 3.X API 第四章之事件event绑定
Oct 10 Javascript
js Canvas绘制圆形时钟效果
Feb 17 Javascript
vue 路由嵌套高亮问题的解决方法
May 17 Javascript
js实现购物车功能
Jun 12 Javascript
vue实现一个炫酷的日历组件
Oct 08 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
JS如何实现动态添加的元素绑定事件
Nov 12 Javascript
AJAX在JQuery中的应用详解
Jan 30 #jQuery
JS实现换肤功能的方法实例详解
Jan 30 #Javascript
js实现ATM机存取款功能
Oct 27 #Javascript
详解基于electron制作一个node压缩图片的桌面应用
Jan 29 #Javascript
JS实现鼠标拖拽盒子移动及右键点击盒子消失效果示例
Jan 29 #Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
Jan 29 #Javascript
JS实现的类似微信聊天效果示例
Jan 29 #Javascript
You might like
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
深入PHP数据缓存的使用说明
2013/05/10 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
JS 日期验证正则附asp日期格式化函数
2009/09/11 Javascript
js实现的早期滑动门菜单效果代码
2015/08/27 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
JS遍历ul下的li点击弹出li的索引的实现方法
2016/09/19 Javascript
Angular2 环境配置详细介绍
2016/09/21 Javascript
详解JavaScript对象的深浅复制
2017/03/30 Javascript
jQuery实现的弹幕效果完整实例
2017/09/06 jQuery
理解 JavaScript EventEmitter
2018/03/29 Javascript
微信小程序如何刷新当前界面的实现方法
2019/06/07 Javascript
js实现图片3D轮播效果
2019/09/21 Javascript
Vue中使用matomo进行访问流量统计的实现
2019/11/05 Javascript
[02:40]DOTA2英雄基础教程 炼金术士
2013/12/23 DOTA
Python简明入门教程
2015/08/04 Python
使用python实现rsa算法代码
2016/02/17 Python
详解Python list 与 NumPy.ndarry 切片之间的对比
2017/07/24 Python
谈谈python中GUI的选择
2018/03/01 Python
Python3 pip3 list 出现 DEPRECATION 警告的解决方法
2019/02/16 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
pytorch 使用加载训练好的模型做inference
2020/02/20 Python
python实现引用其他路径包里面的模块
2020/03/09 Python
使用python matplotlib 画图导入到word中如何保证分辨率
2020/04/16 Python
Python如何重新加载模块
2020/07/29 Python
基于Pytorch版yolov5的滑块验证码破解思路详解
2021/02/25 Python
检测用户浏览器是否支持CSS3的方法
2009/08/29 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
如何在C# winform中异步调用web services
2015/09/21 面试题
工作睡觉检讨书
2014/02/25 职场文书
英文求职信范文
2014/05/23 职场文书
机械专业求职信
2014/05/25 职场文书
个人欠条范本
2015/07/03 职场文书
2019自荐信该如何写呢?
2019/07/05 职场文书