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 相关文章推荐
实现复选框全选/全不选切换
Dec 23 Javascript
地震发生中逃生十大法则
May 12 Javascript
js限制文本框只能输入整数或者带小数点的数字
Apr 27 Javascript
jQuery动画效果实现图片无缝连续滚动
Jan 12 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
jQuery Pagination分页插件使用方法详解
Feb 28 Javascript
基于HTML5+JS实现本地图片裁剪并上传功能
Mar 24 Javascript
深入理解jquery的$.extend()、$.fn和$.fn.extend()
Jul 08 jQuery
详解如何优雅地在React项目中使用Redux
Dec 28 Javascript
vuex + keep-alive实现tab标签页面缓存功能
Oct 17 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
Jan 18 Javascript
浅谈vue权限管理实现及流程
Apr 23 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 生成文字png图片的代码
2011/04/17 PHP
php中array_column函数简单实现方法
2016/07/11 PHP
浅谈Laravel队列实现原理解决问题记录
2017/08/19 PHP
php+redis实现消息队列功能示例
2019/09/19 PHP
js弹出层之1:JQuery.Boxy (二)
2011/10/06 Javascript
JS Jquery 遍历,筛选页面元素 自动完成(实现代码)
2013/07/08 Javascript
javascript中全局对象的parseInt()方法使用介绍
2013/12/19 Javascript
JQuery表单验证插件EasyValidator用法分析
2014/11/15 Javascript
javascript中数组的定义及使用实例
2015/01/21 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
javascript每日必学之循环
2016/02/19 Javascript
详解Vue-基本标签和自定义控件
2017/03/24 Javascript
Vue.js 实现数据展示全部和收起功能
2018/09/05 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
py中的目录与文件判别代码
2008/07/16 Python
python非递归全排列实现方法
2017/04/10 Python
python 列表删除所有指定元素的方法
2018/04/19 Python
python3 遍历删除特定后缀名文件的方法
2018/04/23 Python
python 寻找list中最大元素对应的索引方法
2018/06/28 Python
Django Aggregation聚合使用方法解析
2019/08/01 Python
Django中使用haystack+whoosh实现搜索功能
2019/10/08 Python
浅析Python 简单工厂模式和工厂方法模式的优缺点
2020/07/13 Python
Python+OpenCV检测灯光亮点的实现方法
2020/11/02 Python
美国鞋类购物网站:Shiekh Shoes
2016/08/21 全球购物
洛杉矶生活休闲而精致的基础品牌:Mika Jaymes
2018/01/07 全球购物
Linux如何压缩可执行文件
2014/03/27 面试题
师范生实习自我鉴定
2013/11/01 职场文书
运动会跳远加油稿
2014/02/20 职场文书
蟋蟀的住宅教学反思
2014/04/26 职场文书
服装设计专业求职信
2014/06/16 职场文书
扬州个园导游词
2015/02/06 职场文书
个人收入证明范本
2015/06/12 职场文书
2016年“节能宣传周”活动总结
2016/04/05 职场文书
导游词之无锡唐城
2019/12/12 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
windows10 家庭版下FTP服务器搭建教程
2022/08/05 Servers