This article example shares the specific code of JS to implement the carousel carousel for your reference. The specific content is as follows Effect: The arrangement of each picture is symmetrical with respect to the middle. The image sizes and transparency are different, but the styles of the symmetrical images are the same, presenting a three-dimensional carousel effect. Carousel dynamic effect picture: Let’s look at the code first: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>Carousel slideshow</title> <link rel="stylesheet" href="css/css.css" /> </head> <body> <div class="wrap" id="wrap"> <div class="slide" id="slide"> <ul> <li><a href="#" ><img src="images/slidepic1.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic2.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic3.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic4.jpg" alt=""/></a></li> <li><a href="#" ><img src="images/slidepic5.jpg" alt=""/></a></li> </ul> <div class="arrow" id="arrow"> <a href="javascript:void(0);" class="prev" id="arrLeft"></a> <a href="javascript:void(0);" class="next" id="arrRight"></a> </div> </div> </div> </body> <script> //Define an array and use absolute positioning to set the positions of the five li var config = [ { width: 400, top: 20, left: 50, opacity: 0.2, zIndex: 2 }, { width: 600, top: 70, left: 0, opacity: 0.8, zIndex: 3 }, { width: 800, top: 100, left: 200, opacity: 1, zIndex: 4 }, { width: 600, top: 70, left: 600, opacity: 0.8, zIndex: 3 }, { width: 400, top: 20, left: 750, opacity: 0.2, zIndex: 2 } ]; //Page loading event window.onload = function () { var flag = true; //Assume all animations are finished //The pictures are spread out var list = my$("slide").getElementsByTagName("li"); function assgin() { for (var i=0;i<list.length;i++) { //Set each li to make the wide level transparency left top reach the specified target position animate(list[i],config[i],function () { flag = true; }); } } assgin(); //Set the click event for the button //The button image on the right rotates clockwise and the first element of the array is placed at the end/* pop() deletes the last element push() adds an element to the end shift() deletes the first element unshift() adds an element to the front of the array*/ my$("arrRight").onclick = function(){ if (flag){ flag = false; config.push(config.shift()); assgin(); //Reassign } }; //The left button image rotates counterclockwise and the last element of the array is placed at the beginning my$("arrLeft").onclick = function(){ if (flag){ flag = false; config.unshift(config.pop()); assgin(); //Reassign } }; //When the mouse enters the left and right focus divs, it will display my$("wrap").onmouseover = function () { animate(my$("arrow"),{"opacity":1}); }; //When the mouse leaves the left or right focus div, it hides my$("wrap").onmouseout = function () { animate(my$("arrow"),{"opacity":0}); }; }; //Get element by id function my$(id) { return document.getElementById(id); } //Get the value of any style attribute of any element function getAttrValue(element,attr) { return element.currentStyle?element.currentStyle[attr] : window.getComputedStyle(element,null)[attr]||0; } // animation function animate(element,json,fn) { clearInterval(element.timeId); element.timeId=setInterval(function () { var flag = true; // Assume that the goal has been achieved for (var attr in json) { if(attr=="opacity"){//Determine whether the attribute is opacity var current = getAttrValue(element,attr)*100; //How many steps to move each timevar target=json[attr]*100;//Assign the value to a variable directly, and the following code does not need to be changedvar step=(target-current)/10;//(target-current)/10 step=step>0?Math.ceil(step):Math.floor(step); current=current+step; element.style[attr]=current/100; }else if(attr=="zIndex"){//Judge whether the attribute is zIndex element.style[attr]=json[attr]; }else{//Ordinary attributes//Get the current position----getAttrValue(element,attr) gets the string type var current= parseInt(getAttrValue(element,attr))||0; //How many steps to move each timevar target=json[attr];//Assign directly to a variable, no need to change the following codevar step=(target-current)/10;//(target-current)/10 step=step>0?Math.ceil(step):Math.floor(step); current=current+step; element.style[attr]=current+"px"; } if(current!=target){ flag=false; //If the target result is not reached, it will be false } } if(flag){//The result is true clearInterval(element.timeId); if(fn){//If the user passes in the callback function fn(); //Call it directly, } } console.log("target:"+target+"current:"+current+"step:"+step); },10); } </script> </html> css.css style: @charset "UTF-8"; /*Initialize reset*/ blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0} body,button,input,select,textarea{font:12px/1.5 "Microsoft YaHei", "微软雅黑", SimSun, "宋体", sans-serif;color: #666;} ol,ul{list-style:none} a{text-decoration:none} fieldset,img{border:0;vertical-align:top;} a,input,button,select,textarea{outline:none;} a,button{cursor:pointer;} .wrap{ width:1200px; margin:100px auto; } .slide { height:500px; position: relative; } .slide li{ position: absolute; left:200px; top:0; } .slide li img{ width:100%; } .arrow{ opacity: 0; } .prev,.next{ width:76px; height:112px; position: absolute; top:50%; margin-top:-56px; background: url(../images/prev.png) no-repeat; z-index: 99; } .next{ right:0; background-image: url(../images/next.png); } The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM. You may also be interested in:
|
<<: XHTML Getting Started Tutorial: Using the Frame Tag
>>: Docker intranet builds DNS and uses domain name access instead of ip:port operation
Table of contents Difference between MVC and MVVM...
Discuz! Forum has many configuration options in th...
Method 1: INSERT INTO t1(field1,field2) VALUE(v00...
FTP and SFTP are widely used as file transfer pro...
Learning Linux commands is the biggest obstacle f...
This article is original by 123WORDPRESS.COM Ligh...
This article shares the specific code of vue echa...
MySQL is a database that I like very much. Today,...
Table of contents Web Components customElements O...
Table of contents Problems Redux Toolkit solves W...
<br />For an article on a content page, if t...
XHTML is the standard website design language cur...
Whether you're trying to salvage data from a ...
Table of contents introduction MySQL High Availab...
Only show the top border <table frame=above>...