Implementation of image Switching Effect Based on javascript _ javascript skills

This article describes how to implement image Switching Based on javascript. For more information, see the examples in this article.
Click the button in js to switch the image:

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

Then, the inner img_box is set to four times the width of the box, with the same height. That is to say, four img images are contained in the img_box, but only one image is visible. The following two p, left and right are used as buttons to switch images. Switching images is to change the left attribute of img_box. Therefore, img_box should be set to absolute. For convenience, the position of box should be set to relation, in this way, img_box is located relative to box. Set float to left for the four images. The width and height are the same as those of 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));}

Left and right use the background color and transparency gradient attributes, and only Firefox and webkit browsers are added. In addition, some IE browsers are IE and webkit dual kernels, such as 360 security browsers.

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 ));

To achieve smooth transition during switchover, the transition attribute is added:

-Moz-transition: 0.5 s;

-Webkit-transition: 0.5 s;

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 number of currently displayed images. When you click the switch button, calculate the number of images to be displayed based on the count value, then, calculate and set the left attribute of img_box.

The above is the code for implementing the image Switching Effect in js. We hope it can help you achieve the image switching effect.