滚动笔记1

来源：互联网发布：什么是bp神经网络算法编辑：程序博客网时间：2024/06/04 23:02
<script>//alert($("ul li:first").hide());var li_h=71; var time = 1000; var movetime=1000;$(document).ready(function(){var linejobLen = $(".ula li").length;var docthismy = this; //滑动动画function autoanimy(){$("li:first",docthismy).animate({"margin-left":-li_h},movetime,function(){$(this).css("margin-left",0).appendTo(".ula");})}//自动间隔时间滑动var anifunmy = setInterval(autoanimy,time);$('.srol>ul').hover(function(){clearInterval(anifunmy);//清除自动滑动动画},function(){anifunmy = setInterval(autoanimy,time);//继续执行动画})//悬停时停止滑动，离开时继续执行$(docthismy).children("li").hover(function(){clearInterval(anifunmy);//清除自动滑动动画},function(){anifunmy = setInterval(autoanimy,time);//继续执行动画})$('#leftf').click(function(){clearInterval(anifunmy);autoanimy();});$('#right').click(function(){clearInterval(anifunmy); $("ul li:eq(0)",docthismy).animate({"margin-left":li_h},movetime,function(){ $(".ula").prepend($("li:last"));$(this).css("margin-left",0);}) });});</script><style>.ova{ height: 200px; width: 800px; margin: 0 auto;}.ov{ width: 216px; height: 100px;  margin: 0 auto; background: #FFB6C1 ; overflow: hidden; }.ula{ margin: 0 auto; }.ula li{ position:relative; float: left;; width: 70px; text-align:center; line-height: 60px; height: 100px ; background: #FF0000; border: 1px #000 solid; cursor: pointer;}.srol{ width: 360px; height: 100px; overflow: hidden; position: relative; left:-70px}.left{ float: left;}.lfetdiv,.right{ width: 100px; text-align: center; margin-top: 30px; cursor: pointer;}</style><div class="ova"><div class="left lfetdiv"><a  id="leftf">left</a></div><div class="ov left"><div class="srol"><ul class="ula"><li><img src="http://localhost/omeeting/upload/u1/1/55407289b5d44.png" height="60" width="60"></img><br>1</li><li><img src="http://localhost/omeeting/upload/u1/1/5540729c472cd.jpg" height="60" width="60"><br>2</li><li><img src="http://localhost/omeeting/upload/u1/1/554072b549cfd.jpg" height="60" width="60"><br>3</li><li><img src="http://localhost/omeeting/upload/u1/1/554072be02561.jpg" height="60" width="60"><br>4</li><li><img src="http://localhost/omeeting/upload/u1/1/554072d7d05fd.jpg" height="60" width="60"><br>5</li><li><img src="http://localhost/omeeting/upload/u1/1/554072e348e2b.jpg" height="60" width="60"><br>6</li><li><img src="http://localhost/omeeting/upload/u1/1/554072eb4b3f1.jpg" height="60" width="60"><br>7</li><li><img src="http://localhost/omeeting/upload/u1/1/554073a17f838.jpg" height="60" width="60"><br>8</li><li><img src="http://localhost/omeeting/upload/u1/1/554073ab236bc.jpg" height="60" width="60"><br>9</li></ul></div></div><div class="right left"><a id="right">right</a></div></div>
左右滚动，需导入jQuery
0 0