<!DOCTYPE html> <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()); var timer = setInterval(move,30); function move(){ left-=deraction; if(left<-500){ left = 0; } if(left>0){ left=-500; } $ul.css({left:left}); } $('#btn1').click(function(){ deraction = 2; }); $('#btn2').click(function(){ deraction = -2; }) $('#slide').mouseover(function(){ clearInterval(timer); }) $('#slide').mouseout(function(){ timer = setInterval(move,30); }) }) </script> </head> <body> <div class="btns"> <input type="button" name="" value="向左" 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>
