js实现图片自动的滚动效果

2023-02-21 00:54:02JavaScript068

js实现图片自动的滚动效果,第1张

自动滚动，主要思路是用js自带的setInterval方法。

定义和用法

setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。

setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

语法

setInterval(code,millisec[,"lang"])

参数

code 必需。要调用的函数或要执行的代码串。

millisec 必须。周期性执行或调用 code 之间的时间间隔，以毫秒计。

返回值

一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值。

简单的例子，仅供参考：

<style>

*{ margin:0 padding:0 list-style:none}

#box{ width:840px border:1px solid #000 height:210px margin:30px auto position:relative overflow:hidden}

#box ul{ position:absolute left:0 top:0}

#box ul li{ width:200px height:200px float:left padding:5px}

</style>

window.onload=function(){

var oBox=document.getElementById('box')

var oUl=oBox.children[0]

var aLi=oUl.children

//复制一份内容

oUl.innerHTML+=oUl.innerHTML

oUl.style.width=aLi.length*aLi[0].offsetWidth+'px'

setInterval(function(){

var l=oUl.offsetLeft+10

if(l>=0){

l=-oUl.offsetWidth/2

}

oUl.style.left=l+'px'

},30)

}

</script>

</head>

<body>

<ul>

</ul>

</div>

</body>

三种控制DIV内容滚动的方法：

方法一：

使用锚标记要滚动到的位置，然后通过click方法模拟点击滚动到锚所在位置

function onGetMessage(context)

{

msg.innerHTML+=context

msg_end.click()

}

</script>

</div>

方法二：

利用DIV的scrollIntoView方法，将最底端滚动到可视位置 [list=1]<script

language="javascript1.2"

type="text/javascript">

function onGetMessage(context)

{

msg.innerHTML+=context

msg_end.scrollIntoView()

}

</script>

</div>

方法三：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>将滚动条（scrollbar）保持在最底部的方法 - 滚动条, scrollbar, 页面底部, 聊天窗口, </title>

</head>

<body>

<h3 id="example_title">将滚动条（scrollbar）保持在最底部的方法</h3>

function add()

{

var now = new Date()

var div = document.getElementById('scrolldIV')

div.innerHTML = div.innerHTML + 'time_' + now.getTime() + '<br />'

div.scrollTop = div.scrollHeight

}

</script>

<span class="notice">请点击“插入一行”按钮，插入最新信息，当出现滚动条时，滚动条将自动保持在底部。</span><br />

</div>

</div>

</body>

</html>

滚动条，顾名思义，就是可以滚动的条（ScrollBar）。准确地说，滚动条通常是我们在页面的内容超过了浏览器显示框的范围的时候，为了能够让有限的空间展示无限的内容所作出的一个妥协的元素，使用它可以让我们查看当前页面内容之外部分的内容。

说到这里您估计都还很清楚，但既然我说滚动条也是一个元素，那么它是不是也在我们的HTML中呢？又或者它是浏览器的固有的一部分？

如果您觉得它是HTML中的一部分，那么您就对了，因为它是依附容器而存在的，而默认产生滚动条的容器是<body></body>或者<html></html>节，它并不是浏览器固有的一部分，浏览器只是默认完整展示了一整个html文档，并不知道它中间的内容究竟是否需要滚动条的支持。

那么让我们回顾上面的那几行代码吧，假设fixed对您当前（失败）的浏览器无效的话，那么我们来看看它们的结构，外面是html标签，向内是body标签，再向内则是div标签，div标签很明显是它们的一部分，这样假设我们的div标签所设置的定位属性无论如何（四个可能的属性皆没起到什么作用）改变不了自身显示状况。我们能否更换一个思路呢？

刚才我说了，滚动条是容器所固有的，不管是外面那个滚动条，还是里面那个滚动条。那么我能否让这个需要固定的div和那个body或者html容器脱离关系呢？

看到滚动条的控制可以通过CSS的overflow的几个属性来控制，想必大家都不陌生了。（陌生的朋友点击相关链接即可进入查看）

那么我是否可以自己设置两个完全隔离的div来模拟这种场景呢？

<html>

02.

<head>

03.

04.

05.

06.

html,body {

07.