资讯专栏INFORMATION COLUMN

js实现新闻轮播效果

3403771864 / 465人阅读

  如何利用JS实现新闻自动轮播效果,现在看看具体代码:这是原生js实现新闻轮播效果,且附详细注释

</>复制代码

  1.   <!DOCTYPE html>
  2.   <html>
  3.   <head>
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <title>Document</title>
  7.   </head>
  8.   <body>
  9.   <input type="text" id="input">
  10.   <button id="btn">插入</button>
  11.   <ul id="box"></ul>
  12.   <script>
  13.   // 定义数组
  14.   var news = ['111111111111','2222222222222222222','33333333333333'];
  15.   // 获取元素
  16.   var input = document.getElementById('input');
  17.   var btn = document.getElementById('btn');
  18.   var box = document.getElementById('box');
  19.   // 把原有的新闻显示在页面中
  20.   carousel();
  21.   // 把渲染结构的内容封装为一个函数
  22.   function carousel(){
  23.   // 定义一个空字符串
  24.   var str = '';
  25.   // 遍历数组,把数组里面的每一个值都重复拿出来添加到 li 标签里再赋值给str
  26.   news.forEach(function(item){
  27.   str +=`<li>${item}</li>`;
  28.   });
  29.   // 把 str 的内容给到 box 结构里
  30.   box.innerHTML = str;
  31.   }
  32.   // 点击添加的时候 把 用户输入的内容添加到数组中,再次渲染结构
  33.   btn.onclick = function(){
  34.   // 为了良好的用户体验 输入框中的值不能为空
  35.   if(!input.value){
  36.   // 弹出提示框
  37.   alert('输入框不能为空');
  38.   // 这里 return 是中断循环的意思
  39.   return;
  40.   }
  41.   // 把内容添加到数组中
  42.   news.unshift(input.value);
  43.   // 页面中新闻只能为5条,如果超过5条,把5条之后的数据删除
  44.   if(news.length>5){
  45.   // 只截取页面最新的5条新闻
  46.   news.splice(5);
  47.   }
  48.   // 调用 渲染结构
  49.   carousel();
  50.   // 插入新闻完成后输入框赋空
  51.   input.value = '';
  52.   }
  53.   /*
  54.   【1】间隔执行函数,每隔多少时间去执行一次函数,这里 1000 指的是 1s
  55.   setInterval(function(){
  56.   你需要执行的代码
  57.   },1000)
  58.   */
  59.   // 设置定时器 新闻的滚动切换(把数组中的最后一条数据 截取出来放入数组中第一条),再次循环 渲染结构
  60.   setInterval(function(){
  61.   // pop() 在删除数组的最后一个元素 把删除的数据赋值给res
  62.   var res = news.pop();
  63.   // unshift() 在数组的最前面添加一个元素
  64.   news.unshift(res);
  65.   // 调用函数,再次渲染结构
  66.   carousel();
  67.   // 定时,时长设置为2s
  68.   },2000);
  69.   </script>
  70.   </body>
  71.   </html>

  效果:

  初始:

  如下图所示,当插入数据(因为我们设置了轮播效果,所以新闻会一直滚动):

  插入大于5条:

  我们看到插入只显示数组的最新的五条数据,后面的为什么会不显示那?极有可能是插入的数据类型为整型,因为在遍历数组的时候跑到前面位置所以不显示

  以上就是IS实现新闻轮播的全部内容,欢迎大家更多关注后续内容。


文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/127797.html

相关文章

  • VUE实例图解

    摘要:案例品牌列表构建基本结构利用的样式数据要双向更新,所以要用到,同时在后面的中要进行初始化为添加按钮绑定事件的中,绑定值为关键字删除标签绑定函数,传入参数的时候,需要用括号事件修饰符,表示阻止默认事件实例对象新建一个实例函数中初始化需要双向 VUE案例 品牌列表 构建基本结构 利用bootstrap的样式 showImg(https://segmentfault.com/img/bVbf...

    wqj97 评论0 收藏0
  • 当大多数人对Vue理解到炉火纯青的时候,是不是该思考一下怎么让vue页面骚气起来

    写在前面 当大多数人Vue理解的炉火纯青的时候,你应该思考怎么让vue页面骚气起来,下面就我个人在接触Vue两年的时间里,在实际工作中门户网站在前端页面交互应用和技巧,炒几道小菜给大家分享一哈,我把它封装成一个项目vue-portal-webUI(github源码),不敢说是UI,但也是各种常见常遇到的情景吧,看懂代码需要一些vue、axios、es6、scss基础、数据基本上是mock,功能和场...

    lingdududu 评论0 收藏0
  • 一个App完成入门篇(五)- 完成新闻页面

    摘要:订阅事件,在其中做更新数据的操作需要特殊注意的是,自定义事件的订阅和触发可以不在同一个页面的脚本环境中完成,只需要保证自定义事件的触发在订阅之后即可。 本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面。 导入项目数据模板分离MVVM模型自定义事件展示新闻九宫格展示将要学习的demo效果图如下所示showImg(https://segmentfault.com/img/...

    AZmake 评论0 收藏0
  • 一个App完成入门篇(五)- 完成新闻页面

    摘要:订阅事件,在其中做更新数据的操作需要特殊注意的是,自定义事件的订阅和触发可以不在同一个页面的脚本环境中完成,只需要保证自定义事件的触发在订阅之后即可。 本节教程将介绍如何用DeviceOne简单而高效的完成一个新闻页面。 导入项目数据模板分离MVVM模型自定义事件展示新闻九宫格展示将要学习的demo效果图如下所示showImg(https://segmentfault.com/img/...

    DesGemini 评论0 收藏0
  • 腾讯新闻中心首页改版啦

    摘要:本人博客正式地址腾讯新闻中心的首页改版啦,欢迎访问。这次新闻首页的改版,是从零开始写的一个新页面。除要闻页卡外,其他页卡的新闻均是通过的方式获取的。总结新页面上线后,还会有很多后续的功能需要添加。 本人博客:http://www.xiabingbao.com 正式地址:http://www.xiabingbao.com/news/2016/05/16/qq-news-revision ...

    MadPecker 评论0 收藏0

发表评论

0条评论

3403771864

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<