Jquery栏目无缝转动结果，支持从左向右或从右向左无缝转动。layui-box layui-code-view" style="margin-top: 0px; margin-bottom: 10px; padding: 9.5px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); overflow-wrap: break-word; box-sizing: border-box; position: relative; border: 1px solid rgb(204, 204, 204); background-color: rgb(245, 245, 245); overflow: auto; line-height: 1.42857; border-radius: 4px;">code- <!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>
|
