原生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作用域与作用域链深入解析
Dec 06 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
JavaScript重载函数实例剖析
May 13 Javascript
js提交form表单,并传递参数的实现方法
May 25 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
详解vuejs之v-for列表渲染
Jun 22 Javascript
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
May 03 Javascript
微信小程序 搜索框组件代码实例
Sep 06 Javascript
Vue实现简单计算器案例
Feb 25 Javascript
Vue 禁用浏览器的前进后退操作
Sep 04 Javascript
详解JavaScript类型判断的四种方法
Oct 21 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
CodeIgniter常用知识点小结
2016/05/26 PHP
php的api数据接口书写实例(推荐)
2016/09/22 PHP
php微信公众号开发之答题连闯三关
2018/10/20 PHP
Laravel 5+ .env环境配置文件详解
2020/04/06 PHP
学习YUI.Ext 第六天--关于树TreePanel(Part 1)
2007/03/10 Javascript
javascript获取选中的文本的方法代码
2013/10/30 Javascript
jQuery自带的一些常用方法总结
2014/09/03 Javascript
全面解析多种Bootstrap图片轮播效果
2016/05/27 Javascript
vue2.0 自定义日期时间过滤器
2017/06/07 Javascript
vue过渡和animate.css结合使用详解
2017/06/14 Javascript
JS+canvas实现的五子棋游戏【人机大战版】
2017/07/19 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
Vue组件实现触底判断
2019/06/26 Javascript
[22:07]DOTA2-DPC中国联赛 正赛 iG vs Magma 选手采访
2021/03/11 DOTA
python脚本爬取字体文件的实现方法
2017/04/29 Python
Python实现绘制双柱状图并显示数值功能示例
2018/06/23 Python
Python 把序列转换为元组的函数tuple方法
2019/06/27 Python
python实现的汉诺塔算法示例
2019/10/23 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python Tkinter Entry和Text的添加与使用详解
2020/03/04 Python
Python 实现打印单词的菱形字符图案
2020/04/12 Python
Python爬虫代理池搭建的方法步骤
2020/09/28 Python
美国最流行的男士时尚网站:Touch of Modern
2018/02/05 全球购物
澳大利亚排名第一的儿童在线玩具商店:Toy Galaxy
2018/10/06 全球购物
比利时家具购买网站:Home24
2019/01/03 全球购物
KTV的创业计划书范文
2014/02/02 职场文书
新春文艺演出主持词
2014/03/27 职场文书
公司开业庆典策划方案
2014/06/04 职场文书
房屋维修协议书范本
2014/09/25 职场文书
营业用房租赁协议书
2014/11/26 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
朋友离别感言
2015/08/04 职场文书
请病假条范文
2015/08/17 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书