js实现新闻轮播效果

3403771864 发布于2022-09-21 06:37 / 274人阅读

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

　　<!DOCTYPE html>
　　<html>
　　<head>
　　<meta charset="UTF-8">
　　<meta name="viewport" content="width=device-width, initial-scale=1.0">
　　<title>Document</title>
　　</head>
　　<body>
　　<input type="text" id="input">
　　<button id="btn">插入</button>
　　<ul id="box"></ul>
　　<script>
　　// 定义数组
　　var news = ['111111111111','2222222222222222222','33333333333333'];
　　// 获取元素
　　var input = document.getElementById('input');
　　var btn = document.getElementById('btn');
　　var box = document.getElementById('box');
　　// 把原有的新闻显示在页面中
　　carousel();
　　// 把渲染结构的内容封装为一个函数
　　function carousel(){
　　// 定义一个空字符串
　　var str = '';
　　// 遍历数组,把数组里面的每一个值都重复拿出来添加到 li 标签里再赋值给str
　　news.forEach(function(item){
　　str +=`<li>${item}</li>`;
　　});
　　// 把 str 的内容给到 box 结构里
　　box.innerHTML = str;
　　}
　　// 点击添加的时候 把 用户输入的内容添加到数组中，再次渲染结构
　　btn.onclick = function(){
　　// 为了良好的用户体验 输入框中的值不能为空
　　if(!input.value){
　　// 弹出提示框
　　alert('输入框不能为空');
　　// 这里 return 是中断循环的意思
　　return;
　　}
　　// 把内容添加到数组中
　　news.unshift(input.value);
　　// 页面中新闻只能为5条，如果超过5条，把5条之后的数据删除
　　if(news.length>5){
　　// 只截取页面最新的5条新闻
　　news.splice(5);
　　}
　　// 调用 渲染结构
　　carousel();
　　// 插入新闻完成后输入框赋空
　　input.value = '';
　　}
　　/*
　　【1】间隔执行函数,每隔多少时间去执行一次函数，这里 1000 指的是 1s
　　setInterval(function(){
　　你需要执行的代码
　　},1000)
　　*/
　　// 设置定时器 新闻的滚动切换（把数组中的最后一条数据 截取出来放入数组中第一条），再次循环 渲染结构
　　setInterval(function(){
　　// pop() 在删除数组的最后一个元素 把删除的数据赋值给res
　　var res = news.pop();
　　// unshift() 在数组的最前面添加一个元素
　　news.unshift(res);
　　// 调用函数，再次渲染结构
　　carousel();
　　// 定时，时长设置为2s
　　},2000);
　　</script>
　　</body>
　　</html>

　　效果：

　　初始：

　　如下图所示，当插入数据（因为我们设置了轮播效果，所以新闻会一直滚动）：

　　插入大于5条：

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

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

服务器托管云服务器 js轮播效果 js图片轮播效果 js实现轮播原生JS实现轮播

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

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

VUE实例图解

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

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

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

lingdududu 2019-08-26 12:12 评论0 收藏0
一个App完成入门篇（五）- 完成新闻页面

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

AZmake 2019-08-19 18:11 评论0 收藏0
一个App完成入门篇（五）- 完成新闻页面

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

DesGemini 2019-08-01 15:12 评论0 收藏0
腾讯新闻中心首页改版啦

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

MadPecker 2019-08-02 15:54 评论0 收藏0