本文由 发布，转载请注明出处，如有问题请联系我们！ 发布时间: 2021-05-06Jquery栏目无缝滚动效果
加载中Jquery栏目无缝滚动效果，支持从左往右或从右往左无缝滚动。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>Jquery无缝滚动效果</title> <script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script> <style type="text/css"> .container { width:1133px; height:auto; position:relative; margin:0 auto;} .new { height:445px; background:#f4f4f4; } .new .new_tit { font-size:18px; text-align:left; color:#332d2a; padding-top:55px; padding-bottom:10px;} .new .new_tit a:hover { color:#e71d4d;} .new .nw { width:100%; position: absolute;left:0; top:90px; z-index:1; height:345px; overflow:hidden;} .new .nw .allnew { width:2000px; height:294px; padding-top:5px; overflow:hidden; } .new .nw .nl { float:left; margin-right:33px; -webkit-transform: translate(0,0);transform: translate(0,0);-webkit-transition: all ease-out 0.6s 0s;transition: all ease-out 0.6s 0s;} .new .nw .nl:hover { -webkit-transform: translate(0,-5px); transform: translate(0,-5px); } .new .nw .nl a { width:355px; height:305px; } .new .nw .nl a .img { display: block; width:356px; height:234px;border:1px solid red; background:green;} .new .nw .nl a h1 { font-size:14px; font-weight:400; color:#1f1f1f; padding-top:20px; padding-bottom:4px;} .new .nw .nl a h2 { color:rgba(120,120,120,0.6); font-size:12px;} .new .n_left { display:block; position:absolute;left:-40px; top:220px; z-index:10; cursor:pointer;width:20px;height:20px;border:1px solid red;} .new .n_right { display:block; position:absolute;right:-36px; top:220px; z-index:10; cursor:pointer;width:20px;height:20px;border:1px solid red;} </style> </head> <body> <div> <div> <p><a href="javascript:;">Jquery栏目无缝滚动效果</a></p> <div>左</div> <div> <div> <div> <a href="javascript:;"> <div></div> <h1>标题一</h1> </a> </div> <div> <a href="javascript:;"> <div></div> <h1>标题二</h1> </a> </div> <div> <a href="javascript:;"> <div></div> <h1>标题三</h1> </a> </div> <div> <a href="javascript:;"> <div></div> <h1>标题四</h1> </a> </div> <div> <a href="javascript:;"> <div></div> <h1>标题五</h1> </a> </div> </div> </div> <div>右</div> </div> </div> <script> $('.n_left').click(function(){ $('.allnew').animate({'marginLeft':'360px'},200,function(){ $('.allnew').prepend($('.allnew .nl').last()); $('.allnew').css('margin-left','0px'); }); }); $('.n_right').click(function(){ $('.allnew').animate({'marginLeft':'-360px'},200,function(){ $('.allnew .nl').eq(0).appendTo(".allnew"); $('.allnew').css('margin-left','0px'); }); }); </script> </body> </html>
