js如何点击左右按钮切换图片

JavaScript024

js如何点击左右按钮切换图片,第1张

这样：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>动态切换图片</title>

</head>

<style>

ul{

padding:0margin: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=0i<arr.lengthi++){

//动态添加元素

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=0i<arr.lengthi++){

// 给元素自定义属性

//

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>

扩展资料：

注意事项

1、可以通过JS删除和添加hidden属性，改用style.display="none"和style.display="inline"来实现隐藏和显示。

2、button属性，主要的问题时button样式的问题，如何才能做一个好看的button，通过查找找到了设置button相关的值。

border:none设置按钮无边框

outline:none消除按钮点击后出现的表示被点击的边框

background：url(...)按钮背景图片

text-shadow: 0 1px 1px rgba(0,0,0,.3)文字阴影

box-shadow: 0 5px 7px rgba(0,0,0,.2)按钮阴影

border-radius:15px按钮边框圆角

可以尝试以下操作：

html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312" />

<title>js控制按钮样式切换</title>

<link href="css/my.css" rel="stylesheet">

</head>

<script type="text/javascript">

//左边按钮的点击事件

window.onload = function(){

var arr = document.getElementsByTagName('button')

for(var i = 0i<arr.lengthi++){

arr[i].onclick = function(){

//this是当前激活的按钮，在这里可以写对应的操作

if(this.className == 'btn1'){

this.className = 'btn2'

var name = this.id

var btn = document.getElementsByClassName('btn2')

for(var j=0j<btn.lengthj++){

if(btn[j].id!=name){

btn[j].className = 'btn1'

}

}

}

}

}

}

</script>

<body>

<div id="main" style="margin:auto 0">

<!--四个按钮-->

<div style="margin-top:2em">

<div style="width:20%"><button id = "1" type = "button">按钮1</button></div>

<div style="width:20%"><button id = "2" type = "button">按钮2</button></div>

<div style="width:20%"><button id = "3" type = "button">按钮3</button></div>

<div style="width:20%"><button id = "4" type ="button">按钮4</button></div>

</div>

</div>

</body>

</html>

function change(obj){

var divStyle =document.getElementById('id').style.display

var src=obj.src

var c=src.lastIndexOf("/")+1

var s=src.slice(c)

if(divStyle=="block"){

document.getElementById('id').style.display="none"

obj.src=src.replace(s,"隐藏时的图片.jpg")

}

if(divStyle=="none"){

document.getElementById('id').style.display="block"

obj.src=src.replace(s,"显示时的图片.jpg")

}

}

<img src="images/resume/显示时的图片.jpg" onclick="change(this)"/>

<div id="id" style="display:block">你的代码</div>

换这个方法试试，适合只有一组需要切换的，动态就需要把div的id动态传值，赋值，其他的代码不需要变，一般情况一对隐藏显示就有一组对应的按钮，所以div的id是可以动态传过来，

<img src="images/resume/显示时的图片.jpg" onclick="change(this,'id')"/>

<div id="id" style="display:block">你的代码</div>

<img src="images/resume/显示时的图片.jpg" onclick="change(this,'id_1')"/>

<div id="id_1" style="display:block">你的代码</div>

到JS里接受这个参数就行了function change(obj,id){}