js特效里图片怎么不会滚动

JavaScript016

js特效里图片怎么不会滚动,第1张

js特效里图片不会滚动的原因是没有使用js里的定时器。根据查询相关资料信息,js特效里让图片无缝滚动就是要让图片集在一定时间里自动切换,需要js里的定时器来控制时间,没有使用定时器功能就无法实现图片滚动。js指JavaScript,是一种具有函数优先的轻量级,解释型或即时编译型的编程语言。

<!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>

<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。