The examples in this article share with you the effect of JS to realize the image switching effect for your reference. The specific content is as follows
Use js to realize the effect of clicking buttons and switching images:
<div id="box"> <div id="img_box"> <img src="../raw/b1.jpg" > <img src="../raw/b2.jpg" > <img src="../raw/b3.jpg" > <img src="../raw/b4.jpg" > </div> <div id="left"></div> <div id="right"></div> </div>
Structure: Use a fixed width and height div to make the outermost container, set the overflow to hidden,
Then the inner layer img_box sets the width to four times the box width and the height is the same. That is to say, the img_box contains four imgs, but only one visible one is. The two divs, left and right below act as buttons to achieve clicking to switch pictures. Switching pictures means changing the left attribute of img_box, so img_box should set position to absolute. For convenience, the position of box is set to relation, so img_box is positioned relative to box. Four images 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(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, 84, 0.5)); background: -webkit-linear-gradient(left, rgba(20%,20%,20%,0), rgba(84, 84, 84, 84, 0.5));}#left:hover{ background: -moz-linear-gradient(left, rgba(0, 0, 0,0.5), rgba(20%,20%,20%,0));}#right:hover{ background: -moz-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 Firefox browser and webkit browser are added. In addition, some IE browsers are IE and webkit dual cores such as 360 secure 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 transitions during switching, the transition property 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 currently displayed picture. When clicking the toggle button, calculate which picture should be displayed according to the count, and then calculate and set the left attribute of img_box.
The above is the code for implementing image switching effects by js introduced to you. I hope it can help you achieve image switching effects.