<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态切换图片</title>
</head>
<style>
ul{
padding:0;margin:0;
}
li{
list-style: none;
}

#pic{
position: relative;
width: 400px;
height: 400px;
background-color:red;
margin:100px auto;
background:url('image/1.jpg') no-repeat center;

}
#pic img{
width: 400px;
height: 400px;
}
#pic ul{
width: 50px;
position: absolute;
top: 0;
right: -70px;

}
li{
width: 40px;
height: 40px;
margin-bottom:10px;
background-color: pink;
float: left;
}
#pic span{

position: absolute;
bottom: 10px;
left: 0;
}
#pic p,#pic span{
width: 400px;
height: 20px;
}
#pic p{
position: absolute;
top: 10px;
left: 0;
}
.active{
background-color: red;
}

</style>

<body>
<div id="pic">
<img src="" alt="">
<p>qwrwe</p>
<span>werwer</span>
<ul>
</ul>
</div>

<script>
window.onload=function(){
//存放旧li
var oldLi=null;
var num=0;
var oPic = document.getElementById('pic');
var oImg = oPic.getElementsByTagName('img')[0];
var oUL = oPic.getElementsByTagName('ul')[0];
var oSpan= oPic.getElementsByTagName('span')[0];
var oP = oPic.getElementsByTagName('p')[0];
var oLi= oUL.getElementsByTagName('li');
var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];
var aText = ['图片1','图片2','图片3','图片4'];

for(var i=0;i<arr.length;i++){
//动态添加元素
oUL.innerHTML+='<li></li>';
}
// 旧li就等于当前的
oldLi=oLi[num];

// 初始化
oImg.src=arr[num];
oP.innerHTML=num+1+'/'+arr.length;
oSpan.innerHTML=aText[num];
oLi[num].className='active';

for(var i=0;i<arr.length;i++){
// 给元素自定义属性
//
oLi[i].index=i;
oLi[i].onclick=function(){
// 当元素被点击时图片文字信息都一起变化
oImg.src=arr[this.index];
oP.innerHTML=1+this.index+'/'+arr.length;
oSpan.innerHTML=aText[this.index];
// 清空上一个 当前添加
oldLi.className='';
//将上一个给当前
oldLi=this;
this.className='active';
}
}
}
</script>
</body>
</html>

实现效果

原生js点击按钮切换图片的更多相关文章

  1. JQuery实现点击按钮切换图片(附源码)--JQuery基础

    JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...

  2. JS解决通过按钮切换图片的问题

    我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...

  3. javascript总结36:DOM-点击按钮切换图片案例

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...

  4. JAVA Eclipse如何设置点击按钮切换图片

    右击图片文件夹,新建一个Android XML文件   设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...

  5. JQuery移动动画实现点击按钮切换图片--JQuery基础

    直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...

  6. js 点击按钮下载图片，另存为

    js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...

  7. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  8. 原生JS实现"旋转木马"效果的图片轮播插件

    一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...

  9. Android_UI_点击按钮切换背景效果实现

    实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...

随机推荐

  1. Cookie/Session的机制与安全

    转载自:https://harttle.land/2015/08/10/cookie-session.html Cookie和Session是为了在无状态的HTTP协议之上维护会话状态,使得服务器可以 ...

  2. abap 变量检查

    1:sap logon中可以对变量命名进行检查 program>check>code inspector

  3. DS1-14

    #include <stdio.h> #define MAXSIZE 10000 int MaxSubseqSum4(int List[], int N); int main() { in ...

  4. python 计算器

    import redef main(): #""代表的是空,split()方法已空格或者\t,\n进行切割,join方法是列表,元组,字典变为字符串 a = "" ...

  5. Python第3次作业--李珠霞

    习题1: **1.初始化一个数据集,包括5-10位同学的成绩数据(数据类型不限),数据格式如下: **学号 姓名 Java C语言 Python2017XXXX 小白 87 68 922017XXXX ...

  6. eclipse中tomcat的add and Remove找不到项目

    在我们运行项目前,都需要将项目部署到tomcat上,但是有时我们会遇到这种情况:项目明明存在,但是eclipse中tomcat的add and remove找不到项目,无法部署,那么这个问题该如何解决 ...

  7. 用原生js+canvas实现五子棋

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  8. CentOS7中OpenVPN的配置

    最近需要在openstack中集成openvpn功能,故熟悉了一下openvpn的搭建流程,记录下来,供参考 版本:openvpn-2.3.4.tar.gz 下载地址:http://pan.baidu ...

  9. 论文速读（Jiaming Liu——【2019】Detecting Text in the Wild with Deep Character Embedding Network ）

    Jiaming Liu--[2019]Detecting Text in the Wild with Deep Character Embedding Network 论文 Jiaming Liu-- ...

  10. SpringBoot整合Apache Shiro权限验证框架

    比较常见的权限框架有两种,一种是Spring Security,另一种是Apache Shiro,两种框架各有优劣,个人感觉Shiro更容易使用,更加灵活,也更符合RABC规则,而且是java官方更推 ...