您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
使用JS实现简单的图片切换功能
内容摘要: css部分代码:styletype='text/css'*{margin:0;padding:0;}#a{margin:50pxauto;width:500px;padding:15px;text-align:center;background-color:#99FF99;}/stylejs代码:scriptwindow.onload=function(){......
css部分代码:

<styletype="text/css">

*{

margin:0;

padding:0;

}

#a{

margin:50pxauto;

width:500px;

padding:15px;

text-align:center;

background-color:#99FF99;

}

</style>

js代码:

<script>

window.onload=function(){

varbtn1=document.getElementById("btn1");

varbtn2=document.getElementById("btn2");

varimg=document.getElementsByTagName("img")[0];

//构建一个数组存图片

varimgArr=["img/1.jpg","img/2.jpg","img/3.jpg","img/4.jpg","img/5.jpg"]

varindex=0;

//console.log(src);

varp=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>

<divid="a">

<imgsrc="img/1.jpg"alt="雪糕"/>

<buttonid="btn1">上一张</button>

<buttonid="btn2">下一张</button>

<pid="b">共5张图片,当前第1张</p>

</div>

</body>

上一篇:JS实现时间选择器 下一篇:js实现酷炫倒计时动画
发布日期:2022/7/13
手机扫二维码直达本页
发布时间:14:29:09
点击:107
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022