JS编写背景图切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>背景图切换</title>
<style type="text/css">
#wrap{
width: 300px;height: 225px;
margin: 100px auto 0px;
position: relative;
}
img{
display: block;
width: 300px;
height: 100%;
}
span{
font-size: 30px;
}
#last{
position: absolute;
right: 40px;bottom: 5px;
}
#next{
position: absolute;
right: 5px;bottom: 5px;
}
</style>
</head>
<body>
<div id="wrap">
<img src="img/4.jpg">
<span id="last"><</span>
<span id="next">></span>
</div>
<script type="text/javascript">
//获取元素
var img = document.getElementsByTagName('img')[0];
var btn1 = document.getElementById('last');
var btn2 = document.getElementById('next');
//图片数组
var images = ['img/4.jpg','img/5.jpeg','img/6.jpg','img/9.jpg'];
//添加事件
//定义变量用来记录当前下标
var index= 0;
btn1.onclick = function (){
index++;
if (index > 3) {
index = 0;
}
//修改图片路径
img.src = images[index];
}
btn2.onclick = function (){
index--;
if (index < 0) {
index = 3;
}
//修改图片路径
img.src = images[index];
}
</script>
</body>
</html>
JS编写背景图切换的更多相关文章
- JS实现背景图按时切换或者每次更新
首先要有一个添加背景图片的div <div id="myDiv"></div> css样式中添加背景tu图 body{height:100%;} #myD ...
- hammer.js实现背景图手势缩放调整位置
<!DOCTYPE html> <html> <head> <script> function getxy(e){ var a=new Array() ...
- JS——百度背景图
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 利用css3的多背景图属性实现幻灯片切换效果
css3里关于背景的属性增加了可以添加多背景图的特性,例如: .box{background: url(img/1.png),url(img/2.png),url(img/3.png);} 这段css ...
- 整理今天js留下的作业(点击换图片换首页背景图)
<div class="buttons"> <button id="katong">卡通</button> <b ...
- texturepacker打包图片,场景切换时背景图有黑边
在使用TexturePacker打包图片之后,背景图在场景切换(有切换动画)时,明显能看到有黑边,在百度之后解决了. 知乎上边有网友贴出了两种解决方法,我抄过来如下: 第一种: 修改 ccConfig ...
- 分享一个快速设置背景的js 自动获取背景图的长宽
我来分享一个快速设置背景的js (需要jq支持!) 快速切图铺页面用---就是不需要手动输入背景图的长宽 自动获取背景图的长宽 : <div class="wrap"> ...
- 一款jQuery特效编写的大度宽屏焦点图切换特效
一款jQuery编写的大度宽屏焦点图切换特效 焦点图显示区域有固定的宽度,当前显示宽度之外是一个半透明层显示的其它的焦点图片, 最好的是,此特效兼容IE6以及其它浏览器. 适用浏览器:IE6.IE7. ...
- js 动态生成背景图 GeoPattern
以前有个想法,能不能用JS动态创建CANVAS绘制图案当网页背景,在网络发现有现成的别人已经实现的:GeoPattern 代码如下: <!DOCTYPE html> <html> ...
随机推荐
- assert断言基础用法
Python的assert是用来检查一个条件,如果它为真,就不做任何事.如果它为假,则会抛出AssertError并且包含错误信息
- C#实用技能篇
Redis配置文件详解 如果不指定配置文件,redis也可以启动,此时,redis使用默认的内置配置.不过在正式环境,常常通过配置文件[通常叫redis.conf]来配置redis. redis.co ...
- redhat7下配置tomcat7,更改端口8080后无法访问页面
搞了一下午,居然是防火墙的事情,redhat7设置方法如下 sudo firewall-cmd --add-port=8081/tcp
- background-size拉伸背景图片
在制作页面中常需要对背景图片在容器中进行平铺,可用background-size属性对背景编辑:拉伸,压缩等~ background-size:contain; 将背景扩展到整个容器大小. 较为实用的 ...
- python中的内存管理
不像大多数编译型语言,变量必须在使用之前声明名字和类型,在python中,变量在第一次被赋值时自动声明.在变量创建时,python解释器会根据语法和右侧的操作数来决定新对象的类型,在对象创建后,一个该 ...
- 比较常用的几个maven第三方镜像
OSC的:<mirror> <id>CN</id> <name>OSChina Central</name> ...
- 向IPython Notebook中导入.py文件
IPython Notebook使用起来简洁方便,但是有时候如果需要导入一个现有的.py文件,则需要注意选择导入的方法以达到不同的效果.目前遇到3种方法. (1) 将文件保存为.ipynb格式,直接拖 ...
- Oracle数据库导入导出命令
在建立oracle客户端的前提下,Net Manager中配置了数据库的连接,使用此命令 导出数据 pauseecho 正在备份老数据库...pauseexp user/pwd@配置名称 file=d ...
- SQL Server 常用命令使用方法
(1) 数据记录筛选: sql="select * from 数据表 where 字段名=字段值 order by 字段名 [desc]" sql="select * f ...
- solrCloud的两种部署方式
solrcloud 的部署其实有两种方式可选,那么我们在实践开发中应该怎样选择呢? 第一种:当启动solr服务器时,内嵌的启动一个Zookeeper服务器,然后将这些内嵌的Zookeeper服务器组成 ...