<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>无标题页</title>
<script type="text/javascript" src="http://www.suqian.cm/js/ScrollPic.js"></script>
</head>
<body>
<style type="text/css">
.pic_top div{float:left}
.pic_yi{height:80pxwidth:80pxpadding:20px}
</style>
<div class="pic_top">
<div class="pic_left" id="LeftArr" style="height:100pxwidth:200px">鼠标点击向左(left)滚动</div>
<div class="pic_center" id="divAcrollPic1" style=" height:100pxwidth:400pxoverflow:hidden">
<div class="pic_yi">图片</div>
<div class="pic_yi">图片</div>
<div class="pic_yi">图片</div>
<div class="pic_yi">图片</div>
</div>
<div class="pic_right" id="RightArr" style="height:100pxwidth:200px">鼠标点击向右(right)滚动</div>
</div>
<script type="text/javascript">
// 左右点击滚动开始
var scrollPic1 = new ScrollPic()
scrollPic1.scrollContId = "divAcrollPic1"//内容容器ID
scrollPic1.arrLeftId = "LeftArr"//左箭头ID
scrollPic1.arrRightId = "RightArr"//右箭头ID
scrollPic1.frameWidth = 400//显示框宽度
scrollPic1.pageWidth = 100//翻页宽度
scrollPic1.speed = 10//移动速度(单位毫秒,越小越快)
scrollPic1.space = 10//每次移动像素(单位px,越大越快)
scrollPic1.autoPlay = false//自动播放
scrollPic1.autoPlayTime = 3//自动播放间隔时间(秒)
scrollPic1.initialize()//初始化
// 左右点击滚动结束
</script>
</body>
</html>
不好意思具体代码不想写了。给你个思路:
你这个布局有问题,
html代码如下:
<div style="overflow:hddenwidth:500pxheight:300pxposition:relative">
<div style="width:1000pxheight:300pxposition:absolutetop:0px" id="内容区域">
<ul style="width:500pxfloat:left">
<li>1条</li>
<li>2条</li>
<li>3条</li>
</ul>
<ul style="width:500pxfloat:left">
<li>4条</li>
<li>5条</li>
<li>6条</li>
</ul>
</div>
</div>
id="内容区域" 你这个id自己换下 为了后面方便说先这么写了。
给你的 “ 换一换 ” 添加点击事件,
点击一下让 内容区域 的top值 ,在原来的基础上向左移动500px;也就是原来的top-500。