简单的js照片切换效果和鼠标移入显示

我们可以看到下面的效果图，怎样去实现点击左右按钮和小按钮进行照片切换，我们看一下下面的截图
简单的js照片切换效果和鼠标移入显示

<div class="showbox" id="showbox">
 <div class="imgbox" id="imgbox" style="left: 0px;">
<img src="../images/16.jpg" alt="">
<img src="../images/20.jpg" alt="">
<img src="../images/24.jpg" alt="">
<img src="../images/31.jpg" alt="">
<img src="../images/26.jpg" alt="">
</div>
<div class="prevbtn"><button class="prev" id="prev"></button></div>
 <div class="nextbtn"><button class="next" id="next"></button></div>
<div class="btnlist" id="btnlist">
<div class="btn" id="btn">
<li index="1" class="active"></li>
<li index="2"></li>
<li index="3"></li>
<li index="4"></li>
<li index="5"></li>
</div>
 </div>

给它5张照片，在给装照片的盒子的源代码写入style，因为在js里只能获取它的行内样式，设置left值为0；在css样式设置总照片的长度。然后设置左右按钮和小按钮，给一个小按钮一个类和颜色，在点击小按钮的同时颜色会跟着改变

 var transfor=false;
 var imgbox =document.getElementById("imgbox");
 var prev=document.getElementById("prev");
 var next=document.getElementById("next");
 var showbox=document.getElementById("showbox");
 var btnlist=document.getElementById("btnlist");
 var li=document.getElementById("btn").getElementsByTagName("li");
window.onload=function(){
prev.onclick=function(){
   imgbox.style.left=parseInt(imgbox.style.left)-800+"px";
  if(parseInt(imgbox.style.left)<-3200){
   imgbox.style.left=0+"px";
  } 
 };
next.onclick=function(){
   imgbox.style.left=parseInt(imgbox.style.left)-800+"px";
  if(parseInt(imgbox.style.left)<-3200){
   imgbox.style.left=-0+"px";
  }      
 };

在js中先获取到相应的id,如果没有设置到，js就会显示未定义，在window的加载事件中，给左右按钮一个点击事件，要将照片盒子的left值转换成整型，再减去一张照片的长度，记得要加”px”。再给它一个判断if，如果照片跳出盒子的长度，就将它设置为0。再给它一个左右按钮的鼠标移入移出事件，当鼠标移入按钮显示，鼠标移出按钮隐藏。
简单的js照片切换效果和鼠标移入显示
我们再看下面的小按钮点击照片切换代码，上面提到先给一个小按钮颜色和class,写一个for的遍历循环，设置value值等于i，在小按钮的点击事件里面再给它一个循环和判断，如果它的classname等于active，那么就让它为空。然后在for循环外面写入当前的classname就等于acitve,再设置index,那么盒子要移动的距离就等于1减去index再乘以照片的宽度就可以了。这样的一个照片切换和鼠标移入移出事件就做好了，如果有哪些错误的地方，欢迎指正。

for(var i=0;i<li.length;i++){
  li[i].value=i;
 li[i].onclick=function(){
  for(var m=0;m<li.length;m++){
   if(li[m].className=="active"){
    li[m].className="";
   } 
  }
  this.className="active";
  var index=this.value+1;
  imgbox.style.left=(1-index)*800+"px";  
 }; 
 }

简单的js照片切换效果和鼠标移入显示

相关推荐