Home > Developer > Web Develop
Achieved three pictures automatic Carousel + button Click to toggle the effect.
Basic idea:The effect of the picture carousel is similar to that of the old-fashioned cinema, where a long film is used to record a film in an old-fashioned movie theater, a series of pictures arranged sequentially, and a dynamic film is created by quickly passing through the projector screen to create a coherent transition effect. So, the form of the picture carousel can also be used in this way to form an animated effect.
Forms such as:
(The black box is our outermost container, which acts as the projector's presence; the green Box is the film, with a lot of pictures on it; the picture that we want to rotate in the powder box )
From the start, we want to do the picture carousel, then only need to complete the following sections.
1. Set the outermost container, which is the area where we want to show the image, such as the black box above, with Overflow:hidden to hide the contents of the area beyond the display .
2. In the outermost container, set up a film container, for the picture to be displayed in the left-to-right order of emissions, such as using UL, its width is set to the outermost container width *n (number of pictures), and set the absolute positioning Position:absolute, Because we want to move the entire film by controlling the Left property to achieve the effect of picture switching.
3. Use Li in the film container to store the images to be displayed, and use Float:left to have all pictures arranged from left to right in the film container .
4. Use JS to modify the left value to control the film container to move to the right, through the loop timer to make continuous small amplitude modification to achieve the animation coherence effect.
Here is the code implementation, which can be used as a reference:HTML section
<!DOCTYPE HTML><HTMLLang= "en"><Head> <MetaCharSet= "UTF-8"> <title>Title</title> <Linkrel= "stylesheet"href= "Css/style.css"></Head><Body><!--the outermost container acts as a projector -<DivID= "Container"> <!--the second layer acts as a film for storing multiple pictures - <ulID= "Content"> <binclass= "List"><imgsrc= "Img/1.jpg"alt=""></Li> <Liclass= "List"><imgsrc= "Img/2.jpg"alt=""></Li> <Liclass= "List"><imgsrc= "Img/3.png"alt=""></Li> </ul></Div><ButtonID= "MoveLeft">Click I switch</Button><Scriptsrc= "Js/main.js"></Script></Body></HTML>
CSS Section
/*Initialize*/*{padding:0;margin:0;}/*as the outermost container for the projector's existence, the fixed width is high and the content beyond its area is hidden through overflow*/#container{width:560px;Height:300px;Overflow:Hidden;position:relative;}/*This container acts as a film set to absolute positioning for storing multiple images, and the picture is in a row*/#content{List-style:None;width:2000px;position:Absolute; Left:0; Right:0;}/*This is the setting of each picture, the image size is the same as the outermost projector, and float to the same line*/. List{width:560px;float: Left;}/*This is the button .*/#moveLeft{width:100px;}
JS section
//using self-executing function to isolate scopesvarSlider= (function () { //record the left value varMoveleft=0; //Initialize, bind carousel events and click events functioninit () {varContent=document.getelementbyid (' content '); varButton1=document.getelementbyid (' MoveLeft '); //Auto-Carousel hereSetInterval (animate,5000,content,20); //Click to toggle the carousel for the bind button hereButton1.addeventlistener (' click ',function(e) {setTimeout (animate,100,content,20); }); } //the animation effect of the carousel through the timer functionAnimate (content,speed) {if(moveleft===0){ varTimer1=setinterval (function() {MoveLeft-=Speed ; if(moveleft>-560) {Content.style.left=moveleft+ ' px '; } Else if(Math.Abs (moveleft+560) <Speed ) {Content.style.left=-560+ ' px '; Clearinterval (timer1); }Else{clearinterval (timer1); } },10); }Else if(moveleft===-560){ varTimer2=setinterval (function () { if(moveleft>-1120) {MoveLeft-=Speed ; Content.style.left=moveleft+ ' px '; } Else if(Math.Abs (moveleft+1120) <Speed ) {Content.style.left=-1120+ ' px '; Clearinterval (TIMER2); }Else{clearinterval (timer2); } },10); }Else if(moveleft===-1120){ varTimer3=setinterval (function () { if(moveleft<0) {MoveLeft+=2*Speed ; Content.style.left=moveleft+ ' px '; } Else if(Math.Abs (MoveLeft) <2*Speed ) {Content.style.left=0+ ' px '; Clearinterval (TIMER3); }Else{clearinterval (TIMER3); } },10); } } return{init:init, animate:animate}}) (); Slider.init ();
Simple implementation of picture Carousel effect based on native JS
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
