使用JS实现简单的图片切换功能

css部分代码:
<styletype="text/css">

*{

margin:0;

padding:0;

}

#a{

margin:50pxauto;

width:500px;

padding:15px;

text-align:center;

background-color:#99FF99;

}

</style>
<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>

<divid="a">

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

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

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

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

</div>

</body>

给TA打赏
共{{data.count}}人
人已打赏
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索