原生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 大数据相加的问题
Aug 03 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
实例代码详解jquery.slides.js
Nov 16 Javascript
javascript用正则表达式过滤空格的实现代码
Jun 14 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
详释JavaScript执行环境与执行栈
Apr 02 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
Mar 09 Javascript
js实现经典贪吃蛇小游戏
Mar 19 Javascript
js实现点击上传图片并设为模糊背景
Aug 02 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执行zip与rar解压缩方法实现代码
2010/12/05 PHP
深入php var_dump()函数的详解
2013/06/05 PHP
PHP中set_include_path()函数相关用法分析
2016/07/18 PHP
点击按钮自动加关注的代码(sina微博/QQ空间/人人网/腾讯微博)
2014/01/02 Javascript
javascript删除字符串最后一个字符
2014/01/14 Javascript
用js正确判断用户名cookie是否存在的方法
2014/01/28 Javascript
JS动态创建DOM元素的方法
2015/06/09 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
2015/08/22 Javascript
基于jquery实现省市区三级联动效果
2015/12/25 Javascript
使用jQuery判断浏览器滚动条位置的方法
2016/05/30 Javascript
jquery动态创建div与input的实例代码
2016/10/12 Javascript
angular ngClick阻止冒泡使用默认行为的方法
2016/11/03 Javascript
BootStrap导航栏问题记录
2017/07/31 Javascript
详解vue-cli构建项目反向代理配置
2017/09/07 Javascript
Vue组件通信的四种方式汇总
2018/02/08 Javascript
关于TypeScript模块导入的那些事
2018/06/12 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
Echarts地图添加引导线效果(labelLine)
2019/09/30 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue.config.js常用配置详解
2019/11/14 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
react组件基本用法示例小结
2020/04/27 Javascript
解决ant design vue 表格a-table二次封装,slots渲染的问题
2020/10/28 Javascript
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
python如何实现word批量转HTML
2020/09/30 Python
利用python绘制正态分布曲线
2021/01/04 Python
如何使用localstorage代替cookie实现跨域共享数据问题
2018/04/18 HTML / CSS
校园安全广播稿
2014/02/08 职场文书
企业优秀员工事迹材料
2014/05/28 职场文书
优秀研究生主要事迹
2014/06/03 职场文书
先进教师个人总结
2015/02/11 职场文书
个人道歉信大全
2019/04/11 职场文书