無縫滾動
阿新 • • 發佈:2018-05-07
UNC -s AC absolut time left scrip OS 方向
效果圖如下
<!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()); //把5個li擴展為10個li var timer = setInterval(move,30); //定義定時器,這裏的move就是下面一行的函數 function move(){ left-=deraction; //控制移動速度 if(left<-500){ //當滾動到第10個li時,left為-500,此時使left=0,跳回到第一個li left = 0; } if(left>0){//當第一個li右移時,馬上跳到第5個li left=-500; } $ul.css({left:left}); //前面的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>
無縫滾動