Implement image switching effect based on javascript_javascript skills-JS Tutorial-php.cn

Implement image switching effect based on javascript_javascript skills

WBOY

Release： 2016-05-16 15:05:08

Original

1374 people have browsed it

The example in this article shares with you the effect of image switching using js for your reference. The specific content is as follows
Use js to achieve the effect of clicking a button and switching images:

<div class="box" id="box">
    <div class="img_box" id="img_box">
      <img src="../raw/b1.jpg" class="image" >
      <img src="../raw/b2.jpg" class="image" >
      <img src="../raw/b3.jpg" class="image" >
      <img src="../raw/b4.jpg" class="image" >
    </div>
    <div id="left" class="switch"></div>
    <div id="right" class="switch"></div>
  </div>

Copy after login

Structure: Use a div with fixed width and height as the outermost container, set overflow to hidden,

Then the width of the inner img_box is set to four times the width of the box, and the height is the same. That is to say, there are four img in the img_box, but only one is visible. The two divs below, left and right, are implemented as buttons. Click to switch pictures. Switching pictures means changing the left attribute of img_box, so img_box should set the position to absolute. For convenience, the position of the box is set to relation, so that the img_box is positioned relative to the box. The four pictures are set to float as left, and the width and height are the same as the box.

CSS code:

*{
  margin: 0;
  padding: 0;
}
.box{
  width: 800px;
  height: 400px;
  margin: 20px auto;
  position: relative;
  overflow: hidden;
}
.img_box{
  height: 400px;
  width: 3200px;
  position: absolute;
  -moz-transition: 0.5s;
  -webkit-transition: 0.5s;
}
img{
  width: 800px;
  height: 400px;
  float: left;
}
.switch{
  width: 200px;
  height: 100%;
  position: absolute;

}
#left{
  left: 0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));
}
#right{
  right:0px;
  top: 0px;
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84,0.5));
}
#left:hover{
  background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
  background: -webkit-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));
}
#right:hover{
  background: -moz-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
  background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(0, 0, 0,0.5));
}

Copy after login

Left and right use the background color and transparency gradient attributes, and only add Firefox and webkit browsers. In addition, some IE browsers now have dual cores of IE and webkit, such as 360 Safe Browser

Background: -moz-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

Background: -webkit-linear-gradient(left, rgba(84, 84, 84, 0.50), rgba(20%,20%,20%,0));

In order to achieve smooth transition when switching, the transition attribute is added:

　-moz-transition: 0.5s;

　-webkit-transition: 0.5s;

js code:

var box;
var count=1;
window.onload=function(){
  box=document.getElementById("img_box");
  var left=document.getElementById("left");
  var right=document.getElementById("right");
  left.addEventListener("click",_left);
  right.addEventListener("click",_right);
  document.body.addEventListener("mouseover",demo);
}
function _right(){
  var dis=0;
  if(count<4){
    dis=count*800;
  }else{
    dis=0;
    count=0;
  }
  box.style.left="-"+dis+"px";
  count+=1;
}
function _left(event){
  var dis=0;
  if(count>1){
    dis=(2-count)*800;
  }else{
    dis=-3*800;
    count=5;
  }
  box.style.left=dis+"px";
  count-=1;
}

Copy after login

Use the global variable count to record which picture is currently displayed. When the switch button is clicked, calculate which picture should be displayed based on count, and then calculate and set the left attribute of img_box.

The above is the js code introduced to you to achieve the image switching effect. I hope it can help you achieve the image switching effect.