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 相关文章推荐
js获取dom的高度和宽度(可见区域及部分等等)
Jun 13 Javascript
JavaScript动态改变HTML页面元素例如添加或删除
Aug 10 Javascript
输入框过滤非数字的js代码
Sep 18 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
jQuery实现加入收藏夹功能(主流浏览器兼职)
Dec 24 Javascript
微信小程序 天气预报开发实例代码源码
Jan 20 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
Vue 2.5 Level E 发布了: 新功能特性一览
Oct 24 Javascript
微信小程序简单实现form表单获取输入数据功能示例
Nov 30 Javascript
AngularJS发送异步Get/Post请求方法
Aug 13 Javascript
vue实现登录、注册、退出、跳转等功能
Dec 23 Vue.js
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 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
不用数据库的多用户文件自由上传投票系统(1)
2006/10/09 PHP
在JavaScript中调用php程序
2009/03/09 PHP
php 获取远程网页内容的函数
2009/09/08 PHP
TMDPHP 模板引擎使用教程
2012/03/13 PHP
PHP时间戳与日期之间转换的实例介绍
2013/04/19 PHP
如何使用“PHP” 彩蛋进行敏感信息获取
2013/08/07 PHP
PHP生成加减算法方式的验证码实例
2018/03/12 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
js中如何把字符串转化为对象、数组示例代码
2013/07/17 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
详解Jquery 遍历数组之$().each方法与$.each()方法介绍
2017/01/09 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
AngularJS service之select下拉菜单效果
2017/07/28 Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
2017/09/08 Javascript
基于vue中解决v-for使用报红并出现警告的问题
2018/03/03 Javascript
webpack4打包vue前端多页面项目
2018/09/17 Javascript
JS+CSS实现3D切割轮播图
2020/03/21 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
2020/08/07 Javascript
Python的Urllib库的基本使用教程
2015/04/30 Python
Python定时执行之Timer用法示例
2015/05/27 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python实现FTP文件传输的实例
2019/07/07 Python
python的pygal模块绘制反正切函数图像方法
2019/07/16 Python
python2爬取百度贴吧指定关键字和图片代码实例
2019/08/14 Python
用Pelican搭建一个极简静态博客系统过程解析
2019/08/22 Python
套娃式文件夹如何通过Python批量处理
2020/08/23 Python
pycharm 2020 1.1的安装流程
2020/09/29 Python
Toppik顶丰增发纤维官网:解决头发稀疏
2017/12/30 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
成功的酒店创业计划书
2013/12/27 职场文书
旅游管理专业大学生职业规划书
2014/02/27 职场文书
中国文明网向国旗敬礼活动精彩寄语2014
2014/09/27 职场文书
员工评语范文
2014/12/31 职场文书
工作时间调整通知
2015/04/24 职场文书
离婚协议书范文2016
2016/03/18 职场文书