_javascript technique of image switching effect based on JavaScript

This article examples for you to share the JS implementation of the picture switching effect for everyone to refer to, the specific content as follows
Use JS to achieve the click button, picture switching effect:

<div class= "box" id= "box" > <div class= "img_box" id= "
    img_box" >
      
      
      
      
    </div>
    <div id= "left" class= "switch" ></div>
    <div Id= "right" class= "switch" ></div>
  </div>

structure: Use a fixed width high div to make the outermost container, set overflow as hidden,

Then the inner layer Img_box set width of four times times box width, the height of the same, that is, img_box inside four pieces of IMG, but visible only one, the following two div,left and right is to act as a button to achieve click Switch picture, switch picture is to change img_ Box left property, so Img_box should set position for absolute, for convenience, box position set to relation, so img_box is relative to box positioning. Four pictures set float to left with the same width and height as 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 (0.50), Rgba (20%,20%,20%,0));
Background:-webkit-linear-gradient (left, Rgba (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));

 }

Left and right use the background color and transparency gradient properties, only add Firefox browser and WebKit browser, and now some IE browser is IE and WebKit dual core such as 360 Security browser

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

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

To achieve a 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;
}

Use the global variable count to record the first few pictures that are currently displayed, and then calculate and set the left property of the Img_box, depending on the count when you click the toggle button.

The above is for you to introduce the JS implementation of the picture switch effect code, I hope to help you realize the picture switch effect.