<!DOCTYPE html>
Realize the effect: click the left button to scroll left, click the right button to scroll right, stop scrolling when the mouse is placed on the picture, remove the mouse and start scrolling again
<html lang="en"> <head> <meta charset="UTF-8"> <title>无缝滚动</title> <style type="text/css"> body,ul,li{margin:0;padding:0} ul{list-style:none;} .slide{ width:500px; height:100px; border:1px solid #ddd; margin:20px auto 0; position:relative; overflow:hidden; } .slide ul{ position:absolute; width:1000px; height:100px; left:0; top:0; } .slide ul li{ width:90px; height:90px; margin:5px; background-color:#ccc; line-height:90px; text-align: center; font-size:30px; float:left; } .btns{ width:500px; height:50px; margin:10px auto 0; } </style> <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(function(){ var $ul = $('#slide ul'); var left = 0; var deraction = 2; //调整移动速度的快慢 $ul.html($ul.html()+$ul.html()); //Expand 5 li to 10 li var timer = setInterval(move,30); //Define the timer, the move here is the following line The function function move(){ left-=deraction; //Control the movement speed if(left<-500){ //When scrolling to the 10th li, the left is -500, then make left=0, jump back To the first li left = 0; } if(left>0){//When the first li moves to the right, immediately jump to the fifth li left=-500; } $ul.css({left:left }); //The front left is the style attribute, the back left is the variable value} $('#btn1').click(function(){ //Control the left scroll direction deraction = 2; }); $('# btn2').click(function(){ //Control the right scroll direction deraction = -2; }) $('#slide').mouseover(function(){ clearInterval(timer); //Clear when the mouse is placed Timer}) $('#slide').mouseout(function(){ timer = setInterval(move,30); //Remove the mouse timer to take effect}) }) </script> </head> <body > <div class="btns"> <input type="button" name="" value="left" id="btn1"> <input type="button" name="" value="向右" id="btn2"> </div> <div class="slide" id="slide"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </body> </html>