多图左右切换滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> *{ margin:0px; padding:0px;} a.abtn {display:block;height:22px;width:24px;overflow:hidden;background:url(imgs/btn.gif) no-repeat;text-indent:-999em;outline:none; margin-top:17px} a.aleft {background-position:0 -32px; float:left} a.agrayleft {cursor:default;background-position:0 0;} a.aright {background-position:-34px 0;float:left} a.agrayright {cursor:default;background-position:-34px -32px;} .uldiv {width:630px;position:relative;float:left;height:80px;overflow:hidden;} .scrollcontainer {width:578px;height:62px;overflow:hidden;position:relative; float:left; } .scrollcontainer ul {width:2000px;position:absolute;left:0px;top:0px;} .scrollcontainer li {width:62px; height:62px;float:left; overflow:hidden;display:inline-block;position:relative; margin-left:18px} .scrollcontainer li a{ display:block;width:60px; height:60px;-moz-border-radius: 50px;-webkit-border-radius: 50px;border-radius: 50px;-khtml-border-radius: 50px; -ms-border-radius:50px; } .item span{ display:block; float:left; width:100%; font-size:13px; text-align:center; line-height:26px } .scrollcontainer li dd a{ position:relative;display:block;} #left_to{ text-indent:-999em;background:#000; width:24px; height:22px; float:left; outline:none; border:none; cursor:pointer; margin-top:17px} #right_to{ text-indent:-999em;background:#000;width:24px; height:22px; float:left;outline:none;border:none;cursor:pointer;margin-top:17px} .item {width:30px;height:30px;float:left; } .gh_bj1{ border:1px solid #6d9ef1; color:#6d9ef1} .gh_bj1 a{ color:#6d9ef1; display:block} .gh_bj1:hover{ background:#6d9ef1; color:#fff; cursor:pointer;transition: all 0.5s ease 0s} </style> </head> <body> <div style="float: left; margin-left: 20px; margin-top: 20px; 630px;"> <div class="uldiv"> <input type="button" id="right_to"> <div class="scrollcontainer"> <ul id="scroll_ul" style="position: relative;"> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> <li><a class="gh_bj1 item" href="#"></a></li> </ul> </div> <input type="button" id="left_to"> </div> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript"> var now_index = 0; $(function () { var scroll_width = $(".scrollcontainer").width() - 18; //显示框宽度 var li_size = $("#scroll_ul").find("li").size(); //li个数 var li_margin_left = 18; var li_width = 62; var li_count = 0; if (((li_width + li_margin_left) * li_size) % scroll_width == 0) { li_count = ((li_width + li_margin_left) * li_size) / scroll_width; } else { li_count = ((li_width + li_margin_left) * li_size) / scroll_width + 1; } li_count = parseInt(li_count); $("#left_to").click(function () { if (now_index < li_count - 1) { now_index++; $("#scroll_ul").animate({ left: -scroll_width * now_index, speed: '5000' }); } }); $("#right_to").click(function () { if (now_index > 0) { now_index--; $("#scroll_ul").animate({ left: -scroll_width * now_index, speed: '5000' }); } }); }); // $(function () { // $(".uldiv").Xslider({ // unitdisplayed: 7, // numtoMove: 7, // speed: 300, // scrollobjSize: Math.ceil($(".uldiv").find("li").length / 1) * 580 // }) // }) </script> </div> </body> </html>