原生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 相关文章推荐
关于恒等于(===)和非恒等于(!==)
Aug 20 Javascript
javascript中的有名函数和无名函数
Oct 17 Javascript
10个实用的脚本代码工具
May 04 Javascript
父元素与子iframe相互获取变量和元素对象的具体实现
Oct 15 Javascript
js时间戳格式化成日期格式的多种方法
Nov 11 Javascript
Bootstrap 网站实例之单页营销网站
Oct 20 Javascript
vue开发心得和技巧分享
Oct 27 Javascript
vue2.0 实现页面导航提示引导的方法
Mar 13 Javascript
详解React 服务端渲染方案完美的解决方案
Dec 14 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
vue实现侧边栏导航效果
Oct 21 Javascript
JS数组方法some、every和find的使用详情
Oct 05 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 PDOStatement:bindParam插入数据错误问题分析
2013/11/13 PHP
PHP实现的简单三角形、矩形周长面积计算器分享
2014/11/18 PHP
php下Memcached入门实例解析
2015/01/05 PHP
PHP基于GD库实现的生成图片缩略图函数示例
2017/07/05 PHP
Date对象格式化函数代码
2010/07/17 Javascript
JS OffsetParent属性深入解析
2014/01/13 Javascript
网站内容禁止复制和粘贴、另存为的js代码
2014/02/26 Javascript
javascript 拷贝节点cloneNode()使用介绍
2014/04/03 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
给html超链接设置事件不使用href来完成跳
2014/04/20 Javascript
DOM基础教程之事件对象
2015/01/20 Javascript
jquery实现标签上移、下移、置顶
2015/04/26 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
总结javascript三元运算符知识点
2018/09/28 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
python中实现将多个print输出合成一个数组
2018/04/19 Python
解决python大批量读写.doc文件的问题
2018/05/08 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
详解python websocket获取实时数据的几种常见链接方式
2019/07/01 Python
Pycharm简单使用教程(入门小结)
2019/07/04 Python
Python定时任务APScheduler的实例实例详解
2019/07/22 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
通过实例简单了解Python中yield的作用
2019/12/11 Python
python如何调用字典的key
2020/05/25 Python
如何理解Python中的变量
2020/06/01 Python
Python中logging日志的四个等级和使用
2020/11/17 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
欧洲最大的婴幼儿服装及内衣公司:Petit Bateau(小帆船)
2016/08/16 全球购物
捷克多品牌在线时尚商店:ANSWEAR.cz
2020/10/03 全球购物
九年级科学教学反思
2014/01/29 职场文书
忠诚教育心得体会
2014/09/03 职场文书
摘录式读书笔记
2015/07/01 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
nginx服务器的下载安装与使用详解
2021/08/02 Servers