Using CSS3, JS to achieve a simple picture of seamless rotation efficiency

This paper mainly introduces the use of CSS3, JS to achieve simple and seamless image rotation efficiency;

First, the use of CSS3 implementation: The use of animation properties

(Implement a single carousel, only one picture is visible to the naked eye)

The HTML part is relatively simple, two div under a few IMG tags, in order to achieve seamless rotation, note that the first picture to be the same as the last picture;

<Divclass= "Out">            <Divclass= "IMGs">                <imgsrc= "Img/beatuy.jpg"/>                <imgsrc= "Img/child.jpg"/>                <imgsrc= "Img/girl.jpg"/>                <imgsrc= "Img/milk.jpg"/>                <imgsrc= "Img/cup.jpg"/>                <imgsrc= "Img/dog.jpg"/>                <imgsrc= "Img/beatuy.jpg"/>            </Div>        </Div>

The outermost div is set ovflow:hidden;position:relative, since the outermost div sets the position:relative, so the inner div needs to set the Position:absolute, making it move relative to the parent element ；

The CSS code is as follows:

1. out{2 width:200px;3 height:100px;4 Overflow:hidden;5 position:relative;6         }7 . imgs{8 width:1400px;9 height:100px;Ten Position:absolute; One animation:ppt 10s linear infinite; A         } -          - img{ the             float: Left; - width:200px; - height:100px; -         } + @keyframes ppt{ -             0%{left:0px} +              -%{left:-250px} A              +%{left:-500px} at              -%{left:-750px} -              the%{left:-1000px} -              -%{left:-1200px} -}

So the picture can be carousel, but when the mouse on the picture is still in the carousel, if we want to put the mouse on the picture, the carousel stop, or some information, we need to add: hover; Set the state of the animation, the code is very concise:

1 . out : hover. imgs{ 2 animation-play-state:paused 3 }

So our carousel effect comes out;

What also bother to post;

Second, the use of JS implementation: The use of timer setinterval

(multiple pictures are carousel, the naked eye can see more than one picture)

The same HTML part is relatively simple, you need to set the outer div Ovflow:hidden, the reason that each div has both class and ID, because the style I control through the class, Dom is obtained by ID

1 <Divclass= "Out"ID= "Out">2             <Divclass= "Main"ID= ' main '>3                 <Divclass= "Pic"ID= "Pic">4                     <imgsrc= "Img/0.jpg"/>5                     <imgsrc= "Img/6.jpg"/>6                     <imgsrc= "Img/hehua2.2.png"/>7                     <imgsrc= "Img/tupian1.png"/>8                 </Div>9                 <Divclass= "Copypic"ID= "Copypic">Ten                      One                 </Div> A             </Div>

Can see class= "copypic" div is empty, no content, not urgent, in the JS section will give him content, its content and class= "pic" of the same; Of course, we can also add content directly in the HTML, it is now added a little CSS style

1 . out{2 width:820px;3 Overflow:Hidden;4}5 . Main{6 width:1650px;7 Height:100px;8}9 img{Ten width:200px; One Height:100px; A Border:0; -} - . Pic,.copypic{ the float: Left; -}

In this way, our basic style is complete, and the following is the start of the carousel effect:

First, for code convenience, first encapsulate a simple function

1 function $ (str) { 2 return document.getElementById (str ) 3 }

Then add the contents to the div for class= "copypic":

1 $ (' copypic '). innerhtml=$ (' pic '). InnerHTML;

OK, start writing the Carousel function:

1 function Move () {2                 if ($ (' out '). scrollleft-$ (' Copypic '). Offsetwidth>=0) {3$ (' off ')                     . scrollleft-=$ (' Out ') . offsetwidth; 4                 Else {5                     $ (' out '). scrollleft++; 6                 }7             }
var t=setinterval (move,10);

So that our pictures can be carousel, the same if you want to put the mouse on the carousel stop, but also need to add a few lines of code, using mouse events, clear the timer

1 $ (' out '). onmousemove=function() {2                clearinterval (t); 3             }4             $ (' out '). onmouseout=function() {5                  t= SetInterval (move,10); 6             }

OK, so we use JS to achieve the effect of the picture carousel is finished!

Using CSS3, JS to achieve a simple picture of seamless rotation efficiency