原生js点击按钮切换图片
<!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点击按钮切换图片的更多相关文章
- JQuery实现点击按钮切换图片(附源码)--JQuery基础
JQuery实现切换图片相对比较简单,直接贴代码了哈,有注释噢!疑问请追加评论哈,不足之处还请大佬们指出! 1.案例代码: demo.html: <!DOCTYPE html><ht ...
- JS解决通过按钮切换图片的问题
我是JS初学者,本想通过JS解决轮播图的特效,上网看了下:大部分都是JQ解决的,对于初学者的我来说理解上有点困难.于是我自己只做了一个不那么高大上的JS轮播图,下面我简单介绍下我的步骤:在HTML中创 ...
- javascript总结36:DOM-点击按钮切换图片案例
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8& ...
- JAVA Eclipse如何设置点击按钮切换图片
右击图片文件夹,新建一个Android XML文件 设置文件的名称,注意这个新建的xml文件就是会被用作按钮的background属性的,所以名字不要太奇怪,设置Root Element为sele ...
- JQuery移动动画实现点击按钮切换图片--JQuery基础
直接贴源码了哈,这些都是自己总结的……汗水几何?希望能帮到大家. <%@ Page Language="C#" AutoEventWireup="true" ...
- js 点击按钮下载图片，另存为
js: 1 $(document).on('click',"#xiazai",function(){ 2 imgurl = $(".img-box").find ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生JS实现"旋转木马"效果的图片轮播插件
一.写在最前面 最近都忙一些杂七杂八的事情,复习软考.研读经典...好像都好久没写过博客了... 我自己写过三个图片轮播,一个是简单的原生JS实现的,没有什么动画效果的,一个是结合JQuery实现的, ...
- Android_UI_点击按钮切换背景效果实现
实现按钮按下和释放,按钮背景图片相应切换效果的方法这里介绍两种,一种是在代码里实现,另一种是在xml文件里实现 一.在xml文件里 首先现在layout的一个xml文件下定义Button如下所示: [ ...
随机推荐
- 【Solution】idea中dtd没有找到
问题: idea中dtd没有找到 解决: 一般是相关依赖没有加进来,把相关依赖添加进来即可 在pom中添加依赖
- python使用telnetlib
python使用telnetlib 1 前言 目前,本篇仅记录前段时间搜索得到的关于python使用Telnet的技术博客,由于受领新任务,未进一步验证和深入研究与应用. 参考链接: python官网 ...
- webpack基础小结。
想写写webpack的学习体验的小结,加深自己的理解和使用技能,顺便过一下文档(4.0的功能感觉还是满好玩的). 本文主简写描述webpack中对各种文件的简单处理 基本知识点 处理js 加载css文 ...
- centos7.2 Apache+PHP7.2+Mysql5.6环境搭建
yum安装PHP7.2 由于linux的yum源不存在php7.x,所以我们要更改yum源:rpm -Uvh https://dl.fedoraproject.org/pub/epel/epel-re ...
- Qt如何在QTabWidget上绘图
Qt绘图事件必须在paintEvent事件下绘图,这样导致我们在向Qt设计师界面上拖拽的控件绘图时,造成了很大的麻烦. 我们不能在拖拽的控件上写paintEvent函数,但是可以自定义一个类,继承某一 ...
- linux-git
- 怎么让微信下载APK文件包，微信内置浏览器无法打开APP下载链接的解决方案
** 做微信营销活动或者APK下载推广时候,域名被经常被封,做到微信中正常使用呢?这就要借助一些工具来实现有效的操作.** 先来认识一下微信屏蔽的原理.按原理逐个攻破,本人做防封一年来自认为得心应手, ...
- 记录心得-shiro框架demo示例
从懵懂到了解,再到熟悉,是一个进步的过程! 先撸代码,跑起来看效果,再做详细的介绍,开始干活! 1,先列出工程目录结构,自己需要创建对应层级的程序和相关配置文件. 2,导入maven依赖的jar包.打 ...
- SpringBoot缓存之redis--最简单的使用方式
第一步:配置redis 这里使用的是yml类型的配置文件 mybatis: mapper-locations: classpath:mapping/*.xml spring: datasource: ...
- Git使用和Vue项目
1.创建git排除文件,.gitignore 2.READEME.md 和 LICENSE开源协议 git init 创建仓库 , git status 查看文件状态 红色文件表示未提交. git ...