【前端】js轮播图，简洁代码，一目了然

对于很多时候，找不到写轮播的方法，都是用框架写的比较多，虽然好用，但作为程序员来说，还是要自己写，才有成就感。废话不多说，最近写了个小小的轮播代码，下面附上代码。

一.第一步写好静态网页代码

<div class="wrap"><ul class="list"><li class="item active">0</li><li class="item">1</li><li class="item">2</li><li class="item">3</li><li class="item">4</li></ul><button type="button" class="btn" id="Next-btn">> </button><button type="button" class="btn" id="Last-btn">< </button>
</div>

二.css样式

 <style>*{padding:0;margin:0;}.wrap{width: 800px;height: 400px;background: red;margin: 0 auto;position: relative;}.list{width: 800px;height: 400px;list-style: none;margin: 20px auto;position: relative;}.item{width:100%;height:100%;color:white;font-size: 20px;text-indent:2em;position: absolute;top:0;left:0;}.item:nth-child(1){background: #000;}.item:nth-child(2){background: #00ff18;}.item:nth-child(3){background: #f700ff;}.item:nth-child(4){background: #6b62ff;}.item:nth-child(5){background: #53c8ff;}.btn{width: 100px;height: 50px;line-height: 50px;color: #fff;border:none;background: rgba(0, 197, 255, 0.78);font-size:50px;position: absolute;top:180px;left:0px;z-index:12;}#Last-btn{left: 0px;}#Next-btn{margin-left: 700px;}.item.active{z-index:10;}</style>

三.关键的一部分，js代码

<script>var items=document.getElementsByClassName('item');var Next_btn=document.getElementById('Next-btn');var Last_btn=document.getElementById('Last-btn');var index=0;//初始值
//清除重复值var clearActive=function(){for(var i=0;i<items.length;i++){items[i].className='item';}}
//  清除重复值后，轮播图准确显示var goIndex=function(){clearActive();items[index].className="item active";}
//    左边按钮执行的函数var goNext=function(){if(index<4){index++;}else{index=0;}goIndex();}
//    右边按钮执行的函数var goPre=function(){if(index==0){index=4;}else{index--;}goIndex();}
//    给左右两个按钮添加监听事件，点击的时候执行Next_btn.addEventListener('click',function(){goNext();})Last_btn.addEventListener('click',function(){goPre();})</script>

【前端】js轮播图，简洁代码，一目了然相关推荐

php 走马灯轮播,Vue.js轮播图走马灯代码实例（全）
这个是html, 数据中我用了一个数组来放图片的目录, data() { return { superurl: [ { url: '', img: '../../../../static/image/ ...
JS轮播图（点击切换、自动播放、悬停控制）
JS轮播图轮播图可以说是网页上十分常见的效果,很多朋友在学习JavaScript后都迫不及待的想写一些好看对的效果出来,那么轮播图就是一个很不错的练手实例.下面就是通过JS写的轮播图效果: 功能介绍 ...
前端开发——轮播图banner
前端开发--轮播图banner 使用的是swiper.css.要修改的点: ①img的src,其中width和height也可作出相应改变 ②根据所需轮播的图片数量在class值为swiper-wra ...
JS 轮播图图片切换（定时器）
标题JS 轮播图图片切换(定时器) 这次的轮播图与上次的图片切换相比,仅仅是加上了定时器,使其可以自动切换. 上次的图片切换的链接:https://blog.csdn.net/qq_38318589 ...
JS轮播图（网易云轮播图）
JS 轮播图写在前面最聪明的人是最不愿浪费时间的人.--但丁实现功能图片自动切换鼠标移入停止自动播放,显示按钮点击按钮,实现前后翻鼠标移入小圆圈,可以跳转到对应图片点击左右两侧图片部分 ...
html5移动端轮播图特效,支持移动端的纯js轮播图插件awesome-slider
awesome-slider是一款支持移动端的纯js轮播图插件.该轮播图插件支持任何HTML标签,可以自定义分页标签和Loading效果,支持在前端框架如react中使用. 使用方法安装: /* y ...
php实现轮播图代码,微信小程序实例：轮播图的代码实现与分析
本篇文章给大家带来的内容是关于微信小程序实例:轮播图的代码实现与分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 本文来说说轮播图,最常见的一个轮播图,中间带小圆点,自动轮播. S ...
html轮播图循环效果,TremulaJS-跨设备多功能的无限循环js轮播图插件
TremulaJS是一款非常酷的跨设备多功能的无限循环js轮播图插件.TremulaJS是一个客户端javascript UI组件,它基于贝兹曲线和物理动量效应制作各种效果,可以制作无限循环的图片流, ...
html 图片轮播渐变,js轮播图自动切换和css做页面自动渐变
js轮播图自动切换和css页面自动渐变效果如下: 可以去jq官网学习:http://www.jq22.com/ 部分代码如下: *{margin: 0; padding: 0;} p{text-al ...
html 轮播切图,JS轮播图的实现方法
本文实例为大家分享了JS轮播图的实现代码,供大家参考,具体内容如下需求: 自动轮播,鼠标移入轮播停止.移出继续,小圆点点击切图,左右箭头切图效果图: 思路通过编写过渡动画实现轮播效果,图片的出现 ...

【前端】js轮播图，简洁代码，一目了然

一.第一步写好静态网页代码

二.css样式

三.关键的一部分，js代码

【前端】js轮播图，简洁代码，一目了然相关推荐

最新文章

热门文章