<!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. pymongo基础

    PyMongo是MongoDB数据库的python模块 MongoDB是由C++语音编写的非关系型数据库,是一个基于分布式文件存储的开源数据库系统. win10 安装 4.0 使用官网的配置 使用 n ...

  2. 学号 20175201张驰 《Java程序设计》第7周学习总结

    学号 20175201张驰 <Java程序设计>第7周学习总结 教材学习内容总结 第八章 String类能有效地处理字符序列信息,它的常用方法有: public int length()可 ...

  3. 2018-2019-2 网络对抗技术 20165236 Exp3 免杀原理与实践

    2018-2019-2 网络对抗技术 20165236 Exp3 免杀原理与实践 一.实践内容(3.5分) 1.1 正确使用msf编码器(0.5分),msfvenom生成如jar之类的其他文件(0.5 ...

  4. vue/cli3 配置相对路径

    根目录下新建 vue.config.js 文件 const path = require('path') function resolve(dir){ return path.join(__dirna ...

  5. DAX/PowerBI系列 - 玩转阿里云 Alicloud Pricing

    DAX/PowerBI系列 - 玩转 阿里云主机 Ali Cloud ECS 难度: ★★☆☆☆(1星) 适用范围: ★★★☆☆(3星) 欢迎交流与骚扰 这是啥: 双十一就到了,码农门,程序猿们有没有 ...

  6. 【Mac】-NO.161.Mac.1 -【MacOS Error running 'Tomcat 8.5.371': Cannot run program Permission denied】

    Style:Mac Series:Java Since:2018-09-10 End:2018-09-10 Total Hours:1 Degree Of Diffculty:5 Degree Of ...

  7. python多进程web爬虫-提升性能利器

    背景介绍: 小爬我最近给部门开发了一系列OA的爬虫工具,从selenium前端模拟进化到纯requests后台post请求爬取,效率逐步提升.刚开始能维持在0.5秒/笔.可惜当数据超过2000笔后,爬 ...

  8. 在Linux下如何使用openssl生成RSA公钥和私钥对

    在<Java实现RSA密钥对并在加解密.加签验签中应用的实例>中,我们有用Java代码生成RSA密钥对,其实在Linux操作系统中,用openssl也是很容易生成密钥对的. 一.如果在ub ...

  9. VUE2 项目 引入 leaflet.draw全过程

    leaflet.draw的参考文档:http://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html   这个网址不稳定,多刷新几 ...

  10. python-爬虫(3)---lxml匹配css

    百度首页  部分代码 <div class="s_tab_inner"> <b>网页</b> <a href="//www.ba ...