html图片轮播加上切换按钮,轮播图（点击按钮切换）

结构部分：

上一张

下一张

样式部分：

margin: 0;

padding: 0;

}

#container{

width: 450px;

margin:50px auto;

padding: 20px;

text-align: center;

background-color: antiquewhite;

}

img{

width: 450px;

height: 200px;

}

.btn button{

background-color: aqua;

color: white;

border: 0;

}

js部分：

var btn1=document.getElementsByTagName("button")[0];

var btn2=document.getElementsByTagName("button")[1];

var img=document.getElementsByTagName("img")[0];

var p=document.getElementsByTagName("p")[0];

// 创建一个数组用于放图片地址

var imgArr=["./img/img1.jpg","./img/img2.jpg","./img/img3.jpg"];

// 创建一个变量用于存图片索引

var index=0;

p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";

// 点击上一张按钮

btn1.οnclick=function(){

index--;

if(index<0){

index=imgArr.length-1;

}

img.src=imgArr[index];

p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";

}

// 点击下一张按钮

btn2.οnclick=function(){

index++;

if(index>imgArr.length-1){

index=0;

}

img.src=imgArr[index];

p.innerHTML="一共有"+imgArr.length+"张图片，这是第"+(index+1)+"张";

}

效果图(不太好看)：

html图片轮播加上切换按钮,轮播图（点击按钮切换）相关推荐

pyqt5+qt desiger实例教程（1）创建含有三个按钮的窗口，点击按钮2输出消息、按钮3可退出
pyqt5+qt desiger实例教程(1)创建含有三个按钮的窗口,点击按钮三可退出目标:设计一个含有三个按钮的窗口,点击按钮2弹出消息,点击按钮3退出如果是使用的anacoda那么自带qtde ...
点击按钮创建一个表格点击按钮创建一个表格权限选择元素的value属性操作
点击按钮创建一个表格 <!DOCTYPE html> <html lang="en"> <head><meta charset=" ...
jquery粘贴按钮_实现前端点击按钮自动复制剪贴板功能
[目录] 明确需求 html分析代码实现 css分析 js分析代码实现只要是文本,长按选中就可以复制,但是需求来了挡也挡不住: 明确需求为了提升用户体验,点击[复制]按钮就自动复制到剪贴板,那 ...
【Vue实战】使用vue实现点击按钮，改变被点击按钮的样式。
1. 实现思路为每个按钮设置一个index: 为按钮设置点击事件获取到按钮点击事件以后,判断index,进而动态修改按钮的class 2. 代码实现 2.1 代码 <template> ...
echarts图点击按钮放大或者缩小
点击加号放大echarts图 ,点击减号缩小echarts图. 示意图: js代码演示: <div class="pobtn"><button @click=&q ...
工作按钮（216）:点击按钮报错--bug修复--直接写接口里面
this.title = "编辑";getAction(path.join(this.url.query, id)).then(res => {this.form = res ...
html页面点击按钮上传文件,点击按钮实现文件上传及控制文件上传类型
1.原生js实现文件上传 html部分: 上传文件 js部分: upload(event) { //代替执行上传功能 let it = event.target; $(it).next().click ...
js实现轮播图(点击小图片切换大图片+自动切换)
js实现轮播图(点击小图片切换大图片+自动切换) 实现效果如下: 点击小图切换大图和轮播标题,点击左右按钮大小图和轮播标题切换,鼠标进入清除定时器,鼠标移出恢复轮播 html代码如下: <div ...
点击按钮随机更换页面背景颜色
点击按钮随机更换页面背景颜色先准备一个按钮就像如图所示的那样然后获取到刚刚的按钮并为按钮绑定点击事件. 并且弹出警告框来证明获取并绑定成功按钮. 效果展示: 点击按钮即可弹出警告框. 在点击事件 ...
UI控件之Button(按钮）和ImageButton（图像按钮）
(一)概述 Button普通按钮跟ImageButton图像按钮的用法基本类似,至于图片相关的则和后面的ImageView相同,所以本节只对Button的用法进行讲解,另外Button是TextVie ...

html图片轮播加上切换按钮,轮播图（点击按钮切换）

html图片轮播加上切换按钮,轮播图（点击按钮切换）相关推荐

最新文章

热门文章