Auto Slider with Javascript 图片无缝滚动
Slider is the gorgeous part on your website. You don't need toggle the images,just wait !
I arrange the four images and two arrow button to control the two directions.
making the layout nice with css.
the outer #seamless width is the total of four pictures. And I also set the style when onclick the button. It looks dynamic in the project.
The core part is coming! Javascript.
If you feel a little dizzy,all right, so am I . OK,divide them.
First, I get the elements which I 'll use next. Double the images to eight pictures, and the width is according to the number of Li. function move contains two parts : moving left and moving right. setInterval the function with 30 milliseconds. Finally, for mouse , when mouseover the div, the moving stop, vice versa.For button, when click, change the speed direction.
the outer #seamless width is the total of four pictures. And I also set the style when onclick the button. It looks dynamic in the project.
The core part is coming! Javascript.
If you feel a little dizzy,all right, so am I . OK,divide them.
First, I get the elements which I 'll use next. Double the images to eight pictures, and the width is according to the number of Li. function move contains two parts : moving left and moving right. setInterval the function with 30 milliseconds. Finally, for mouse , when mouseover the div, the moving stop, vice versa.For button, when click, change the speed direction.
