1024programmer Java Detailed explanation of JavaScript to achieve dynamic carousel effect

Detailed explanation of JavaScript to achieve dynamic carousel effect

Use Javascript to achieve common dynamic web page carousel effects, as shown in Figure 1 below:

Figure 1

There are several key points to implement this carousel:

(1) There is an arrow on the left and right sides, which refers to switching to the left and right respectively. That is, clicking on the corresponding position will switch to a picture before (or after) the picture

(2) There is a row of circular buttons below the picture. Each button has its own click event. Click any button to switch to the corresponding picture

(3) When you do not click on the picture, the picture will automatically play, that is, there will be a picture carousel effect

First, you can write the approximate HTML code as code 1:

Code 1:


  //Set the parent element of the image to be positioned 600px to the left, which is to move the width of the image to the left
 1 //It is set to automatically rotate 5 pictures. There will be 7 pictures here, and the pictures represented by red code and 1 The pictures represented by the blue code are the same.  This is because each picture has forward and backward clicks
 2 event, to make the first picture click forward to display the fifth picture, you need to add the fifth picture in front of it.
 3 pictures to avoid showing blank space when clicking left on the first picture; similarly, after the fifth picture
 4 Also add the first image after the 4 to make it a smooth transition
 5
 5

  //Set the corresponding button and add the corresponding custom attribute index to the button
 
 
 
 
 

 < //The a here represents the arrow; (right arrow)
 >
 

In the above example, the width of the image is 600px and the height is 400px;

Then set its CSS style to code 2:

Code 2:

 *{margin: 0;padding: 0;text-decoration: none;} //Set the basic style of all elements

 body{padding: 20px;}
 #container{
 position: relative; //Set the positioning of the outermost div element to relative positioning, that is, positioning relative to the position before positioning is not set.
 width: 600px;
 height: 400px;
 border: 3px solid #333;
 overflow: hidden; //Set the width and height of the container and set the overflow part to hidden
 }
 #list{
 position: absolute; //Set the positioning of the parent div where the picture is located to absolute positioning, that is, positioning relative to the positioned parent element
 z-index: 1; //Set the display level of the div
 width: 4200px; //This div is the parent element of all images, so its width and height settings should include all images
 height: 400px;
 }
 #list img{
 float: left; //Set the display mode of the image, which is floating to the left
 width: 600px;
 height: 400px;
 }
 #buttons{
 position: absolute; //Set the positioning method of all dots at the bottom of the screen, absolute positioning relative to the container element
 left: 250px; //The left distance from the parent positioned element is 250px
 bottom: 20px;
 z-index: 2; //Set the dot display level to 2, which is above the image div
 height: 10px;
 width: 100px;
 }
 #buttons span{
 float: left;
 margin-right: 5px;
 width: 10px;
 height: 10px;
 border: 1px solid #fff;
 border-radius: 50%; //The radius is 50%, which means it is set to dot display
 background: #333;
 cursor: pointer;
 }
 #buttons .on{
 background: orangered;
 }
 .arrow{
 position: absolute; //Set the positioning method of the button, that is, absolute positioning relative to the container element
 top: 180px;
 z-index: 2;
 display: none;
 width: 40px;
 height: 40px;
 font-size: 36px;
 font-weight: bold;
 line-height: 39px;
 text-align: center;
 color: #fff;
 background-color: rgba(0,0,0,.3);
 cursor: pointer;
 }
 .arrow:hover{
 background-color: rgba(0,0,0,.7);
 }
 #container:hover .arrow{
 display: block;
 }
 #prev{
 left: 20px;
 }
 #next{
 right: 20px;
 }*/

After setting the basic style, the display effect is as shown in Figure 2:

Figure 2

At this time, you need to add events to specific elements, as shown in the following code 3:

Code 3:

 window.Onload=function(){
 var list=document.getElementById('list'); //Get the parent element of the picture element and name it list
 var prev=document.getElementById('prev'); //Get the left arrow
 var next=document.getElementById('next'); //Get the right arrow

 function animate(offset){ //Set a function named animate, which receives a parameter

 var newleft=parseInt(list.style.left)+offset; //Get the positioning value of the left side of the parent element of the image and add the incoming parameter offset

 if(newleft-600){ //When you click the left button on the first picture, automatically jump to the last one.� 
 list.style.left= -3000+'px';
 }else{
 list.style.left=newleft+'px';
 }
 }

What is obtained in the function animate() is style.left, which is the distance from the relative left side, so style.left is a negative value after the first picture, as shown in Figure 3:

Figure 3

Combined with the above code 3, we can set the click events of the left and right buttons, as shown in code 4:

Code 4:

 prev.Onclick=function(){ //Click event to the left

 animate(600);
 }


 next.Onclick=function(){ //Click event to the right
 animate(-600)
 }


 var timer;
 function play(){
 timer=setInterval(function(){ //Set intermittent calls, the time interval is 1500 milliseconds
 next.onclick() //This is an automatic switch to the right. If you want to set it to switch to the left, just change next to prev.
 },1500)
 }
 play(); //implement automatic calling


 var cOntainer=document.getElementById('container'); //Get the outermost container element
 function stop(){
 clearInterval(timer);
 }
 container.Onmouseover=stop; //When the mouse moves above, clear the timer
 container.Onmouseout=play; //When the mouse moves away from the container element, perform automatic rotation


 var buttOns=document.getElementById('buttons').getElementsByTagName('span');
 var index=1;


 function buttonsShow(){
 for(var i=0;i<buttons.length;i++){
 if(buttons[i].className=='on'){ //If a span is set to class='on', then set its class attribute to empty
 buttons[i].className='';
 }
 }
 //The array starts from 0, so index needs to be -1
 buttons[index-1].className='on'; //Set the class attribute value of the next span to 'on', which is highlighted
 }


 prev.Onclick=function(){
 index-=1;
 if(index5){
 index=1;
 }
 buttonsShow();
 animate(-600);
 }


 //Click any dot to switch to the corresponding picture
 for(var i=0;i<buttons.length;i++){

 (function(i){ //Use immediate execution function
 buttons[i].Onclick=function(){
 var clickIndex=parseInt(this.getAttribute('index'));
 var offset=600*(index-clickIndex);
 animate(offset); //Storage the position after mouse click, used for normal display of small dots
 index=clickIndex;
 buttonsShow();
 }
 })(i)
 }
 }

The above is the detailed explanation and integration of Javascript to achieve dynamic carousel effect introduced by the editor. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support of the website!

This article is from the internet and does not represent1024programmerPosition, please indicate the source when reprinting:https://www.1024programmer.com/697290

author: admin

Previous article
Next article

Leave a Reply

Your email address will not be published. Required fields are marked *

Contact Us

Contact us

181-3619-1160

Online consultation: QQ交谈

E-mail: [email protected]

Working hours: Monday to Friday, 9:00-17:30, holidays off

Follow wechat
Scan wechat and follow us

Scan wechat and follow us

Follow Weibo
Back to top
首页
微信
电话
搜索