html如何做banner点击按钮下一张,banner.html
你的家,听你的
- 宜家对公业务
- 厨房在线订购业务
- 仲夏特惠
- 全屋设计
- 美好假期 崭新生活
class Banner{
constructor(){
this.img = document.querySelectorAll("#banner .imgbox li");
this.left = document.querySelector(".btnL")
this.right = document.querySelector(".btnR")
this.span = document.querySelectorAll(".ind li");
// 4假设索引
// 假设当前是0
this.iNow = 0;
// 假设上一张是最后一张
this.iPrev = this.img.length-1;
// 1绑定事件
this.addEvent()
this.timer = 3000
this.timeout()
}
timeout(){
var t
clearInterval(t)
t = setInterval(()=>{
this.btnChangeIndex(-1);
// 11-2点击按钮时,也设置span的当前焦点
this.setActive(this.span[this.iNow]);
},this.timer)
}
addEvent(){
var that = this;
// 2-1左按钮事件
this.left.onclick = function(){
// 3-1改变索引
that.btnChangeIndex(1);
// 11-1点击按钮时,也设置span的当前焦点
that.setActive(that.span[that.iNow]);
}
// 2-2右按钮事件
this.right.onclick = function(){
// 3-2改变索引
that.btnChangeIndex(-1);
// 11-2点击按钮时,也设置span的当前焦点
that.setActive(that.span[that.iNow]);
}
// 6绑定span的事件
for(var i=0;i
// 7绑定span的索引
this.span[i].index = i;
this.span[i].onclick = function(){
// console.log(this.index); 当前span索引
// 8计算索引
that.listChangeIndex(this.index);
// 10设置当前焦点
that.setActive(this);
}
}
}
listChangeIndex(index){
// 计算索引功能:点击元素的索引
// 点击的比当前大,向左运动
if(index > this.iNow){
// console.log("左")
// 9-1开始运动
// jiuzhe
this.listMove(1,index)
}
// 点击的比当前小,向右运动
if(index < this.iNow){
// console.log("右")
// 9-2开始运动
this.listMove(-1,index)
}
this.iNow = index;
}
listMove(d,index){
// span的运动功能:参考btn的运动:
// 参数1:方向:1或-1
// 参数2:点击的元素的索引
this.img[this.iNow].style.left = 0;
move(this.img[this.iNow], {left:-this.img[0].offsetWidth*d})
this.img[index].style.left = this.img[0].offsetWidth*d + "px";
move(this.img[index], {left:0})
}
setActive(ele){
// 当前焦点的功能:参数:当前span
for(var i=0;i
this.span[i].className = "";
}
ele.className = "active"
// console.log(ele)
}
btnChangeIndex(d){
// 改变索引功能:方向:1或-1
if(d === 1){
if(this.iNow == 0){
this.iNow = this.img.length-1;
this.iPrev = 0;
}else{
this.iNow--;
this.iPrev = this.iNow + 1;
}
}else{
if(this.iNow == this.img.length-1){
this.iNow = 0;
this.iPrev = this.img.length-1
}else{
this.iNow++;
this.iPrev = this.iNow - 1;
}
}
// 5左右按钮的运动
this.btnMove(d);
}
btnMove(d){
// 左右按钮运动的功能:方向:1或-1
// console.log(this.iPrev, this.iNow);
// 设置从哪开始走
this.img[this.iPrev].style.left = 0;
// 走到哪
move(this.img[this.iPrev],{
left:this.img[0].offsetWidth * d
})
// 设置从哪开始进来
this.img[this.iNow].style.left = -this.img[0].offsetWidth * d+"px";
// 进到哪
move(this.img[this.iNow],{left:0});
}
}
new Banner;
一键复制
编辑
Web IDE
原始数据
按行查看
历史
html如何做banner点击按钮下一张,banner.html相关推荐
- layui表格点击按钮下方新增加空白行
layui表格点击按钮下方新增加空白行 一.先上代码 二.代码解析 三.实现业务逻辑分析 四.页面展示 一.先上代码 html界面代码 js代码 二.代码解析 这只是我个人的的代码解析,想要得到更详细 ...
- java 图片上一张 下一张_java实现预览图片,点击实现下一张
项目上需要实现图片预览功能,页面展示图片的预览小图,点击时弹出层展示原图,可以点击上一张和下一张等效果 1.本文将简单具体介绍实现的全过程,前后台代码和需要用到的插件 2.先上效果图 加载页面的效果 ...
- php点击按钮做查找,点击按钮后运行PHP功能?
我喜欢使用的方法是jQuery / ajax调用面向对象的PHP类的混合. 我有一个jQuery监听器/触发按钮按下这样的东西: $('#buttonId').live('click', functi ...
- 轮播图的实现,点击按钮切换轮播图等功能
菜单区域实现 划过主菜单显示子菜单 轮播区域实现 1.点击图片中左右箭头,分别跳转上一张与下一张 (1)点击上一张图其实就是让一个变量进行递减,点击下一张图就是让变量递增:(控制索引最大最小值) 2. ...
- 一个简单的PopupWindow做的选项菜单点击按钮会在按钮下弹出几个下拉控件
为什么80%的码农都做不了架构师?>>> 下载源码 先看效果: 下面是java代码: package com.example.cest;import android.app.A ...
- angular点击按钮弹出页面_Axure RP8:如何做出点击按钮切换页面效果?
如何利用Axure RP8做出点击按钮切换页面效果?一起来文中看看~ 先来看一下页面的效果图:点击不同的按钮,切换不同的页面.(是web端和手机端都很常见的交互效果) 实现这一效果大致要分为三个步骤: ...
- android点击按钮弹出图片,用android做的一个简单的点击按钮显示图片的程序
其实,在这之前我已经做了一个点击按钮的小程序,只不过它只是用来在界面上显示一些文字或者是用一个对话框来显示内容.按理说,做显示图片应该是不会有太大的问题了,可是问题还是来了.在我把这些个问题解决之后, ...
- unity用image做按钮,实现点击按钮,切换文字
一,实现效果: 用image做弹出框,点击按钮,切换弹出框文字的效果. 二,Text的设置: 创建脚本apph,并将脚本拖给Text: using System.Collections; using ...
- ** Vue下js点击按钮元素左右滚动效果 **
** Vue下js点击按钮元素左右滚动效果 ** 小程序.前端交流群:609690978 先上效果图 代码: <div id="classifyScroll" :class= ...
最新文章
- GNU Radio的hello world(转)
- python快速编程入门教程-python从入门到精通之30天快速学python视频教程
- wxWidgets:wxAutomationObject类用法
- shell脚本中用到的条件和循环语句
- 阿里云服务器(windows2012)
- Linux Kernel Lock types and their rules
- RPA目前在中国的发展怎么样?
- mysql回表慢sql_MySQL 的覆盖索引与回表
- 获取当前 jar 包的运行路径
- 海康威视ivms-4200图文说明
- MATLAB的人工神经网络应用
- 旧版的rust怎么老是掉线_RUST服务器进不去 RUST掉线用什么加速器解决?
- medusa--暴力破解
- Photoshop教程四:Camera RAW 批量调色
- First Order Methods in Optimization Ch5. Smoothness and Strong Convexity
- 彻底解决python关于各种文件(音乐、视屏等)读写的操作
- hdf知道这些就够了
- windows查看tomcat版本信息
- lammps计算聚合物例子_MD原理与Lammps实例.ppt
- 风力发电机组的温升问题如何解决呢?
热门文章
- 由奶粉引起的蝴蝶效应(dambolo)
- C#窗体设计SaveFileDialog的用法
- 常用jar包下载地址
- (转)我是怎么治愈鼻窦炎的
- B2B CRM服务商平台: 商户进件(关于间连新进件商家身份认证标准升级的公告)
- HW4:Unity3D中游戏场景的创建
- 苹果发布支持 AirPods Max和 App Store隐私标签的 macOs Big Sur 11.1
- [QQAI机器人]-爬虫机器人
- 快男陈楚生与其女友主唱《QQ自由幻想》主题曲事件曝光!
- 支持Office Xp/2003样式的扁平ComboBox控件