js实现新闻轮播效果

原生js实现新闻轮播效果，附详细注释

<!DOCTYPE html>
<html lang="en">
<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 标签里再赋值给strnews.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 指的是 1ssetInterval(function(){你需要执行的代码},1000)*/// 设置定时器  新闻的滚动切换（把数组中的最后一条数据 截取出来放入数组中第一条），再次循环 渲染结构setInterval(function(){// pop() 在删除数组的最后一个元素  把删除的数据赋值给resvar res = news.pop();// unshift() 在数组的最前面添加一个元素news.unshift(res);// 调用函数，再次渲染结构carousel();// 定时，时长设置为2s},2000);</script>
</body>
</html>

效果：
初始：

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

插入大于5条：

插入只显示数组的最新的五条数据，为什么第一条插入4510202不显示呢，这是因为可能插入的数据类型为整型，在遍历数组的时候跑到前面位置所以不显示

js实现新闻轮播效果相关推荐

用原生JS实现3D轮播效果
用原生JS实现3D轮播效果实现思路: 先实现无缝轮播效果添加3D效果完善代码增加自动轮播效果效果如下: 视图中显示3张图片,并通过CSS的透视和旋转实现3D效果,当无任何操作时,图片自动循环 ...
JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
html中使用JS实现图片轮播效果
1.首先是效果图,要在网页中实现下图的轮播效果,有四张图片,每张图片有自己的标题,然后还有右下角的小方框,鼠标悬浮在小方框上,会切换到对应的图片中去. 2.先是HTML中的内容,最外层是轮播图整个的容 ...
前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下纯生js实现轮播图链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
js实现图片轮播效果
感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈. 要好好的纪念下这个东西,以后忘了再来这边看看!超赞, 当自己做出这个效果的时候,很有成就感的(ノω<.)ノ))☆.. <!DOC ...
php中实现图片自动轮播,基于vue.js实现图片轮播效果
轮播图效果: html {{sd.title}} js export default { components: { }, ready: function() { var _this=this; va ...

js实现新闻轮播效果

js实现新闻轮播效果相关推荐

最新文章

热门文章