多图左右切换滚动
<!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; width: 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>
