前台页面代码:
<style type="text/css">
.conC_content_top_c
{
width:268px;
height:105px;
padding:0px; margin:0px;
}
#img ul
{
margin: 0;
padding: 0;
list-style: none;
width: 268000px;
}
#img ul li
{
padding: 0px 2px;
width: 130px;
height: 105px;
display: block;
float: left;
background: #fff;
margin: 0px;
}
#img
{
width: 268px;
height: 105px;
background: #ccc;
overflow: hidden;
float: left;
border: 0px;
margin: 0px;
padding: 0px;
}
#img ul li img
{
width: 130px;
height: 105px;
}
</style>
js脚本:
<script type="text/javascript">
function $(obj) { return document.getElementById(obj) }
var maxWidth = $("img").getElementsByTagName("ul")[0].getElementsByTagName("li").length * 134; //所有图片的占用宽;134为单张图片占用位置的宽度
// var isScroll = false;
// var modiLeft;
var targetx = 268; //一次滚动距离【一次滚动两张图片】
var dx; //滚动后距左/右边距的距离
var a = null;
//向左滚动图片
function moveLeft() {
$("pageDown").alt = " 下一页";
var le = parseInt($("img").scrollLeft);
if (le == 0 || le == 268) {
$("pageUp").alt = "最前页";
}
else {
$("pageUp").alt = "上一页";
}
if (le == 0) {
return;
}
else {
targetx = parseInt($("img").scrollLeft) - 268;
scLeft();
}
}
function scLeft() {
dx = parseInt($("img").scrollLeft) - targetx;
if (dx == 6) {
$("img").scrollLeft = targetx;
} else {
$("img").scrollLeft -= dx * .3 - 2;
}
clearScroll = setTimeout(scLeft, 50);
if (dx * .3 < 2) { clearTimeout(clearScroll); }
}
//向右滚动图片
function moveRight() {
$("pageUp").alt = "上一页";
var le = parseInt($("img").scrollLeft) + 268 > 804 ? 804 : parseInt($("img").scrollLeft) + 268;
if (le == maxWidth - 268) {
$("pageDown").alt = "最后页";
}
if (le == 804) {
return;
}
else {
targetx = parseInt($("img").scrollLeft) + 268;
scRight();
}
}
function scRight() {
dx = targetx - parseInt($("img").scrollLeft);
if (dx == 0) {
return;
}
else {
$("img").scrollLeft += dx * .3 + 2;
}
a = setTimeout(scRight, 50);
if (dx * .3 < 1) { clearTimeout(a) }
}
</script>