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 相关文章推荐
node.js中的buffer.copy方法使用说明
Dec 14 Javascript
深入理解JavaScript系列(21):S.O.L.I.D五大原则之接口隔离原则ISP详解
Mar 05 Javascript
JavaScript的RequireJS库入门指南
Jul 01 Javascript
jQuery树形下拉菜单特效代码分享
Aug 15 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
第十篇BootStrap轮播插件使用详解
Jun 21 Javascript
js字符串引用的两种方式(必看)
Sep 18 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
微信小程序实现给循环列表添加点击样式实例
Apr 26 Javascript
Vue动态组件实例解析
Aug 20 Javascript
vue中使用axios post上传头像/图片并实时显示到页面的方法
Sep 27 Javascript
Vue的路由及路由钩子函数的实现
Jul 02 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
遭遇php的in_array低性能问题
2013/09/17 PHP
php中隐形字符65279(utf-8的BOM头)问题
2014/08/16 PHP
php类的定义与继承用法实例
2015/07/07 PHP
详解Yii2.0使用AR联表查询实例
2017/06/16 PHP
自动检查并替换文本框内的字符
2006/06/30 Javascript
ASP.NET jQuery 实例10 动态修改hyperlink的URL值
2012/02/03 Javascript
使用Js让Html中特殊字符不被转义
2013/11/05 Javascript
深入理解javascript严格模式(Strict Mode)
2014/11/28 Javascript
JavaScript中this的9种应用场景及三种复合应用场景
2015/09/12 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
jquery日历插件datepicker用法分析
2016/01/22 Javascript
js获取对象、数组的实际长度,元素实际个数的实现代码
2016/06/08 Javascript
BootStrap使用file-input插件上传图片的方法
2016/09/05 Javascript
D3.js实现直方图的方法详解
2016/09/25 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
ajax异步请求详解
2017/01/06 Javascript
使用JS中的Replace()方法遇到的问题小结
2017/10/20 Javascript
Python ljust rjust center输出
2008/09/06 Python
详解Python3中的Sequence type的使用
2015/08/01 Python
Scrapy-redis爬虫分布式爬取的分析和实现
2017/02/07 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python如何以表格形式打印输出的方法示例
2019/06/21 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
Python使用lambda表达式对字典排序操作示例
2019/07/25 Python
Python hashlib模块的使用示例
2020/10/09 Python
python批量检查两个对应的txt文件的行数是否一致的实例代码
2020/10/31 Python
SNIDEL官网:日本VIVI杂志人气少女第一品牌
2020/03/12 全球购物
解释下面关于J2EE的名词
2013/11/15 面试题
工业设计专业个人求职信范文
2013/12/28 职场文书
一年级学生评语
2014/04/23 职场文书
2014年大学生村官工作总结
2014/11/19 职场文书
2014年英语教学工作总结
2014/12/17 职场文书
离婚代理词范文
2015/05/23 职场文书
python tkinter实现定时关机
2021/04/21 Python