如何用js实现图片切换
在写网页的时候，我们经常会遇到实现图片的切换
现在。介绍一下几种实现切换的方法
第一种：动态切换
首先现在html中将基本静态框架，样式设置好。
例：html中实现3张图片的动态切换
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片动态切换</title>
<link rel="stylesheet" href="../css/图片动态切换.css">
</head>
<body>
<div id="daTu">
<div id="lunBo">
<img src="../images/slide-3.jpg" alt="" id="lunBo1">
<img src="../images/slide-2.jpg" alt="" id="lunBo2">
<img src="../images/slide-1.jpg" alt="" id="lunBo3">
</div>
<ul id="dian">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<script src="../js/图片动态切换.js"></script>
</body>
</html>
然后在将样式设置一下
#dian{
width: 150px;
height: 30px;
list-style: none;
position: absolute;
bottom: 20px;
left: 0;
right: 0;
margin: auto;
}
#dian>li{
float: left;
width: 30px;
height: 30px;
border-radius: 30px;
background-color: rgba(255, 255, 255, 0.4);
margin-left: 10px;
cursor: pointer;
list-style: none;
}
#daTu{
position: relative;
left: 0;
top: 0;
width: 890px; //这里的使用的图片的宽为890px
height: 511px;
overflow: hidden;
margin-top: 26px;
}
#lunBo{
position: absolute;
left: 0;
top: 0;
width: 2850px;
height: 511px;
overflow: hidden;
}
#lunBo>img{
float: left;
}
此时页面中呈现的内容就应该是如下的样子：
然后再来设置js动态效果，使得这个3张图片能够实现，点击某个小圆点，就能滑动到这个小圆点所对应的图片上去。且切换的速度都是相同的
(function (){
//将装这个图片的div选取出来
var lunBoDiv=document.getElementById('lunBo');
//将3个圆点选取出来
var listOfLi=document.getElementById('dian').getElementsByTagName('li');
//点击相应的圆点，要实现将其对应的图片显示
for(var i= 0;i<listOfLi.length;i++){
listOfLi[i].index=i;
listOfLi[i].onclick=function(){
animateToImage(this.index);
}
}
//初始div离左边的距离
var left=0;
function animateToImage(imageIndex){
//分为图片向左移动，和向右移动，每向左移动一张图片，其left最终值为：
var targetLeft=imageIndex*(-950);
var animateTime=1000;
var speed=(targetLeft-left)/(animateTime/1000*60);
//console.log(speed);
var timer=setInterval(function(){
if(speed>0&&left>=targetLeft){
left=targetLeft;
lunBoDiv.style.left=left+'px';
clearInterval(timer);
}else if(speed<0&&left<=targetLeft){
left=targetLeft;
lunBoDiv.style.left=left+'px';
clearInterval(timer);
}else{
lunBoDiv.style.left=left+'px';
left=left+speed;
}
},16.67)
}
})()
此时就可以实现图片的动态切换
第二种，静态切换
如果没有要求图片实现动态的切换，只需要图片进行一个变化的话，可以采取以下方案。
将图片的地址改变，通过数组来装载所有需要切换的图片地址。
具体如下：
同样，先将基本的布局布好
html中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>图片的静态切换</title>
<link rel="stylesheet" href="../css/图片静态切换.css">
</head>
<body>
<input type="button" value="<<" id="pre">
<img src="../images/slide-1.jpg" alt="" id="img">
<input type="button" value=">>" id="next">
<script src="../js/图片静态切换.js"></script>
</body>
</html>
css中：
#pre,#next{
width: 30px;
height: 511px;
}
#pre,#next,#img{
display: block;
float: left;
}
然后进行js部分：主要的思想就是通过数组将所有需要切换的图片放在一个数组里面，然后通过数组的下标值，将图片的地址进行改变，再将图片的地址进行字符串的拼接实现。具体如下
js代码：
(function(){
var preBtn=document.getElementById('pre');
var nextBtn=document.getElementById('next');
var img=document.getElementById('img');
//将所有的图片放在一个数组里面
var imgArry=['slide-1','slide-2','slide-3'];
//当点击下一张按钮时
var i=0;
nextBtn.onclick=function(){
i++;
if(i>imgArry.length-1){
i=imgArry.length-1;
}
img.src='../images/'+imgArry[i]+'.jpg';
};
//当点击上一张图片时
preBtn.onclick=function(){
i--;
if(i<0){
i=0;
}
img.src='../images/'+imgArry[i]+'.jpg';
};
})();
这样就可以实现，点击下一张图片，图片就自动切换成为下一张图片
