轮播图
时间:2019-11-20
本文章向大家介绍轮播图,主要包括轮播图使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
js部分
//插件 先引入 实例化 调用init()初始化 传入父元素 class lunbo { constructor() { this.index = 1 this.tim = null this.animated=false lunbo.liang() } // 页面布局 static liang() { let box = ' <div id="box"><div id="list" style="left: -600px;">11111<img src="5.jpg"><img src="1.jpg"><img src="2.jpg"><img src="3.jpg"><img src="4.jpg"><img src="5.jpg"><img src="1.jpg"></div><div id="controls"><span data-index="1" class="active"></span><span data-index="2"></span><span data-index="3"></span><span data-index="4"></span><span data-index="5"></span></div><a href="javascript:;" id="prev" class="arrow"> < </a><a href="javascript:;" id="next" class="arrow"> > </a></div>' lunbo.$('aa').innerHTML = box } // 获取id方法 static $(id) { return document.getElementById(id); } //初始化 init() { // this.buju() this.play() let this_ = this //鼠标移如 lunbo.$('box').onmouseover = function () { this_.stop() } //鼠标移出 lunbo.$('box').onmouseout = function () { this_.play() // this_.anniu() } //左遍 lunbo.$('prev').onclick = function () { this_.stop() this_.nextClick() this_.anniu() } // 右边 lunbo.$('next').onclick = function () { this_.stop() this_.prevClick() this_.anniu() } // this.anniu() } //移动的方法 move(dom, offset) { // console.log(this.animated) this.animated=true let this_=this var iTarget = parseInt(dom.style.left) + offset; //移动的时间 var time = 300 //间隔时间 var interval = 10 // 速度 var speed = offset / (time / interval) console.log(speed) function go() { // console.log(222) if ((speed > 0 && parseInt(dom.style.left) < iTarget) || (speed < 0 && parseInt(dom.style.left) > iTarget)) { // 动画没有完成 // console.log(iTarget) dom.style.left = parseInt(dom.style.left) + speed + 'px'; setTimeout(go, interval); } else { // 动画完成 dom.style.left = iTarget + 'px'; if (iTarget > -600) { dom.style.left = '-3000px'; } if (iTarget < -3000) { dom.style.left = '-600px'; } this_.animated=false console.log( this_.animated) } } go() } // 左边 nextClick() { if (this.animated) { return } if (this.index == 5) { this.index = 1 } else { this.index++ } this.move(list, -600) } //右边 prevClick() { if (this.animated) { return } if (this.index == 1) { this.index = 5 } else { this.index-- } this.move(list, 600) } // 开始 play() { this.tim = setInterval(() => { console.log(this) this.nextClick() this.anniu() }, 2000) } //停止 stop() { clearInterval(this.tim) } // 重置按钮 fn(index) { var spans = lunbo.$('controls').children; for (let i = 0; i < spans.length; i++) { spans[i].className = '' } spans[index - 1].className = 'active' } // 按钮 anniu() { var spans = lunbo.$('controls').children; this.fn(this.index) let this_ = this for (let i = 0; i < spans.length; i++) { spans[i].onclick = function () { if(this.className=='active'){ return; } // console.log(this.className) let indexs = this.dataset['index'] let offset = -600 * (indexs - this_.index) this_.move(list, offset) this_.index = indexs this_.fn(this_.index) } } } }
css部分
1 * { 2 margin: 0; 3 padding: 0; 4 } 5 6 a { 7 text-decoration: none; 8 } 9 10 #box { 11 margin: 100px auto; 12 width: 600px; 13 height: 400px; 14 position: relative; 15 /* border:2px solid #222; */ 16 border-radius: 50%; 17 overflow: hidden; 18 } 19 20 #list { 21 position: absolute; 22 width: 4200px; 23 height: 100%; 24 z-index: 1; 25 26 } 27 28 #list img { 29 width: 600px; 30 height: 400px; 31 float: left; 32 } 33 34 #controls { 35 position: absolute; 36 z-index: 2; 37 bottom: 8px; 38 width: 100%; 39 text-align: center; 40 } 41 42 #controls span { 43 width: 20px; 44 height: 20px; 45 border-radius: 50%; 46 background-color: #e3e3e3; 47 display: inline-block; 48 cursor: pointer; 49 } 50 51 #controls .active { 52 background-color: orange; 53 } 54 55 .arrow { 56 font-size: 60px; 57 position: absolute; 58 z-index: 2; 59 font-weight: bold; 60 top: 160px; 61 color: #f3f3f3,; 62 } 63 64 .arrow:hover { 65 color: orange; 66 } 67 68 #prev { 69 left: 0; 70 } 71 72 #next { 73 right: 0; 74 }
html部分
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <link rel="stylesheet" href="css.css"> <body> <div id="aa"></div> </body> <script src="lunbo.js"></script> <script> window.onload = function () { let a = new lunbo() a.init(document.getElementById('aa')) } </script> </html>
原文地址:https://www.cnblogs.com/huang-gua123/p/11900582.html
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法