使用JS实现简单的图片切换功能
本文实例为大家分享了使用JS实现简单的图片切换的具体代码，供大家参考，具体内容如下
效果如图：
分析：首先为按钮添加单击响应事件，然后构造函数。
其实切换图片就是切换img标签src的属性，可以获取标签属性然后进行修改即可。
可以把属性值存放在一个数组中，通过数组的索引来获取。
附上相关代码：
css部分代码：
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#a{
margin: 50px auto;
width: 500px;
padding: 15px;
text-align: center;
background-color: #99FF99;
}
</style>
js代码：
<script>
window.onload=function(){
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
var img = document.getElementsByTagName("img")[0];
//构建一个数组存图片
var imgArr = ["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]
var index = 0;
//console.log(src);
var p = document.getElementById("b");
btn1.onclick = function(){
//alert("1");
//img.src="img/2.jpg"
index--;
if (index<0){
index = imgArr.length-1
}
img.src=imgArr[index]
p.innerHTML = "共"+ imgArr.length+"张图片，当前第"+(index+1)+"张"
};
btn2.onclick = function(){
//alert("2");
index++;
if (index>4){
index = 0;
}
img.src=imgArr[index]
p.innerHTML = "共"+imgArr.length+"张图片，当前第"+(index+1)+"张"
};
};
</script>
body部分：
<body> <div id="a"> <img src="img/1.jpg" alt="雪糕" /> <button id="btn1">上一张</button> <button id="btn2">下一张</button> <p id="b">共5张图片，当前第1张</p> </div> </body>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
纯js无flash仿搜狐女人频道FLASH图片切换效果代码
前2个星期看到一位朋友说如何用JS实现http://women.sohu.com/这个页中FLASH图片切换效果,这两天有空,做了一个,大家评评: [加载图片慢点请等会] www.jb51.net 我们 JS图片切换 :: * { margin:0; padding:0; } body { margin:0; color:#88c; background:#333; } img { margin:0; padding:0; border:0; } #js_F { position:relativ
-
最简单的js图片切换效果实现代码
无意中在网上发现的,代码非常的简单,一看就明白! 复制代码 代码如下: <script language =javascript > var curIndex=0; //时间间隔 单位毫秒 var timeInterval=5000; var arr=new Array(); arr[0]="1.jpg"; arr[1]="2.jpg"; arr[2]="3.jpg"; arr[3]="4.jpg"; arr[4]
-
javascript实现图片切换的幻灯片效果源代码
网页上有许多图片切换的幻灯片效果,它们大多用flash实现,那javascript能不能实现他们呢,当然可以,我自己写了一个,和大家一同分享 废话少说,看代码 复制代码 代码如下: sx.activex.imagefade={ init:function(imga,fadeint,fadeoutt){ var ti=new Array(); for(var i=0;i<imga.length;i++){ ti[i]=new Image(); ti[i].src=imga[i] } var div
-
简单的实现点击箭头图片切换的js代码
步骤如下: (1) 准备图片(左右箭头,以及一些示例图片) (2) JS(jquery)的代码如下: 复制代码 代码如下: <script type="text/javascript" src="JS/jquery-1.4.4.js"></script> <script type="text/javascript"> var picPath = new Array(); picPath.push("I
-
纯js实现背景图片切换效果代码
html代码 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>背景切
-
JavaScript实现图片切换效果
本文实例为大家分享了JavaScript实现图片切换效果,自定义属性的应用 供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>图片切换实例</title> <style> body{ background-color: #A9A9A9; margin:0px; } ul{ padding: 0; margi
-
js鼠标点击图片切换效果代码分享
本文实例讲述了js鼠标点击图片切换效果.分享给大家供大家参考.具体如下: 实现原理很简单,其实是多张图片叠加起来,点击图片后依次赋予图片一个class,使其看起来在表面而已,点击图片,可以实现图片的不断切换效果. 运行效果图: -------------------查看效果------------------- 小提示:浏览器中如果不能正常运行,可以尝试切换浏览模式. 为大家分享的js鼠标点击图片切换效果代码如下 <hea
-
JS实现图片切换效果
本文实例为大家分享了JS实现图片切换效果的具体代码,供大家参考,具体内容如下 <body> <button id="btn1">ON</button> <button id="btn2">OFF</button><br> <img src="images/0.jpg" alt="" id="pic"> <script
-
css图片切换效果代码[不用js]
纯css图切换 练习 教程来自snwebsite a{ display:block; border:1px solid #cccccc; width:20px; height:20px; margin:1px; } dl{ position:absolute; width:240px; height:170px; } dt{ position:absolute; right:1px; top:25px; } dd{ width:240px; height:170px; overflow:hidd
-
用html+css+js实现的一个简单的图片切换特效
如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a