原生JavaScript实现轮播图


Posted in Javascript onJanuary 10, 2021

本文实例为大家分享了JavaScript实现轮播图的具体代码,供大家参考,具体内容如下

效果:

原生JavaScript实现轮播图

代码:

<!DOCTYPE html>
<html>

 <head>
 <meta charset="UTF-8">
 <title></title>
 <style>
 * {
 margin: 0;
 padding: 0;
 }
 
 ul,
 li {
 list-style: none;
 }
 
 .banner {
 width: 1200px;
 height: 535px;
 border: 1px solid red;
 margin: 0 auto;
 position: relative;
 }
 
 .slider li {
 position: absolute;
 left: 0;
 top: 0;
 }
 
 a {
 width: 40px;
 height: 50px;
 background-color: rgba(0, 0, 0, 0.1);
 font-size: 50px;
 text-align: center;
 line-height: 50px;
 position: absolute;
 text-decoration: none;
 color: gray;
 }
 
 .btnl {
 left: 0;
 top: 50%;
 margin-top: -15px;
 }
 
 .btnr {
 right: 0;
 top: 50%;
 margin-top: -25px;
 }
 
 .tabs {
 position: absolute;
 bottom: 20px;
 left: 50%;
 margin-left: -75px;
 }
 
 .tabs li {
 width: 15px;
 height: 15px;
 background-color: #ccc;
 border-radius: 50%;
 float: left;
 margin-right: 10px;
 }
 </style>
 </head>

 <body>
 <div class="banner">
 <ul class="slider">
 <li><img src="img/b1.jpg" alt="" /></li>
 <li><img src="img/b2.jpg" alt="" /></li>
 <li><img src="img/b3.jpg" alt="" /></li>
 <li><img src="img/b4.jpg" alt="" /></li>
 <li><img src="img/b5.jpg" alt="" /></li>
 <li><img src="img/b6.jpg" alt="" /></li>
 </ul>
 <a href="javascript:void(0);" class="btnl">
 <</a>
 <a href="javascript:void(0);" class="btnr">></a>
 <ul class="tabs">
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
 <script type="text/javascript">
 var banner = document.getElementsByClassName("banner")[0];
 var slider = document.getElementsByClassName("slider")[0];
 var li = slider.getElementsByTagName("li");
 var btnl = document.getElementsByClassName("btnl")[0];
 var btnr = document.getElementsByClassName("btnr")[0];
 var tabs = document.getElementsByClassName("tabs")[0];
 var btns = tabs.getElementsByTagName("li");

 //初始化
 btns[0].style.backgroundColor = "red";

 for(var i = 0; i < li.length; i++) {
 if(i == 0) {
 continue;
 } else {
 li[i].style.opacity = 0;
 }
 }

 var timer = setInterval(mover, 1000);

 //声明一个变量,代表当前图片的下标
 var num = 0;

 function mover() {
 num++;
 if(num == li.length) {
 num = 0;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "red";

 }

 function movel() {
 num--;
 if(num == -1) {
 num = li.length - 1;
 }
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[num].style.opacity = 1;
 btns[num].style.backgroundColor = "red";
 }

 banner.onmouseover = function() {
 clearInterval(timer)
 }

 banner.onmouseout = function() {
 timer = setInterval(mover, 1000)
 }

 btnl.onclick = function(e) {
 movel();
 }
 btnr.onclick = function(e) {
 mover();
 }

 // 小圆点效果
 for(var i = 0; i < btns.length; i++) {
 btns[i].index = i;
 btns[i].onmouseover = function() {
 if(this.index == num) {
 return;
 } else {
 for(var i = 0; i < li.length; i++) {
 li[i].style.opacity = 0;
 btns[i].style.backgroundColor = "#ccc";
 }
 li[this.index].style.opacity = 1;
 btns[this.index].style.background="red";
 num=this.index;
 }
 }
 }
 </script>
 </body>

</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
使弱类型的语言JavaScript变强势
Jun 22 Javascript
基于jquery的分页控件(C#)
Jan 06 Javascript
JavaScript中的对象与JSON
Jul 03 Javascript
jquery插件jquery.LightBox.js实现点击放大图片并左右点击切换效果(附demo源码下载)
Feb 25 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
详解jQuery uploadify文件上传插件的使用方法
Dec 16 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
Mar 30 Javascript
JQuery.dataTables表格插件添加跳转到指定页
Jun 09 jQuery
Vue Socket.io源码解读
Feb 07 Javascript
浅谈在Vue.js中如何实现时间转换指令
Jan 06 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
ES6 新增的创建数组的方法(小结)
Aug 01 Javascript
原生JavaScript实现留言板
Jan 10 #Javascript
JavaScript实现点击切换验证码及校验
Jan 10 #Javascript
JavaScript canvas实现雨滴特效
Jan 10 #Javascript
多种类型jQuery网页验证码插件代码实例
Jan 09 #jQuery
利用JS判断元素是否为数组的方法示例
Jan 08 #Javascript
JS实现页面侧边栏效果探究
Jan 08 #Javascript
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 #Vue.js
You might like
php模仿asp Application对象在线人数统计实现方法
2015/01/04 PHP
Yii2框架使用计划任务的方法
2016/05/25 PHP
PHP正则判断一个变量是否为正整数的方法
2019/02/27 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
php和js实现根据子网掩码和ip计算子网功能示例
2019/11/09 PHP
javascript面向对象编程代码
2011/12/19 Javascript
jquery获取div距离窗口和父级dv的距离示例
2013/10/10 Javascript
JS格式化数字保留两位小数点示例代码
2013/10/15 Javascript
小结Node.js中非阻塞IO和事件循环
2014/09/18 Javascript
JavaScript使用Math.Min返回两个数中较小数的方法
2015/04/06 Javascript
TypeScript 中接口详解
2015/06/19 Javascript
js实现图片无缝滚动
2015/12/23 Javascript
JS匿名函数和匿名自执行函数概念与用法分析
2018/03/16 Javascript
浅谈jquery fullpage 插件增加头部和版权的方法
2018/03/20 jQuery
vue父组件异步获取数据传给子组件的方法
2018/07/26 Javascript
「中高级前端面试」JavaScript手写代码无敌秘籍(推荐)
2019/04/08 Javascript
javascript面向对象三大特征之继承实例详解
2019/07/24 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
[10:24]郎朗助力完美“圣”典,天籁交织奏响序曲
2016/12/18 DOTA
[53:13]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第三场 1月18日
2021/03/11 DOTA
python进阶教程之文本文件的读取和写入
2014/08/29 Python
浅析Python中的getattr(),setattr(),delattr(),hasattr()
2016/06/14 Python
mac下pycharm设置python版本的图文教程
2018/06/13 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
Python正则表达式和re库知识点总结
2019/02/11 Python
opencv3/C++实现视频背景去除建模(BSM)
2019/12/11 Python
Python截图并保存的具体实例
2021/01/14 Python
Python爬虫+Tkinter制作一个翻译软件的示例
2021/02/20 Python
选购世界上最好的美妆品:Cult Beauty
2017/11/03 全球购物
新加坡领先的在线生活方式和杂货购物网站:EAMART
2019/04/02 全球购物
任课老师推荐信范文
2013/11/24 职场文书
瞿秋白纪念馆观后感
2015/06/10 职场文书
再也不用花钱买漫画!Python爬取某漫画的脚本及源码
2021/06/09 Python
恶魔之树最顶端的三颗果实 震震果实上榜,第一可以制造岩浆
2022/03/18 日漫