图片无缝滚动

<style>
#demo
{
    overflow:hidden;
    border: 1px dashed #d8edff;
    width: 900px;
    height:132px;
}
#demo img {
border: 2px solid #d8edff;
}
#demo1 a
{
    float:left;
    margin:10px;
    cursor:default;
}
#demo2 a
{
    float:left;
    margin:10px;
}
#indemo {
width: 800%;
}
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href="#"><img src="img/hydra_index_pic1.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic2.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic3.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic4.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic5.png" border="0" /></a>
<a href="#"><img src="img/hydra_index_pic6.png" border="0" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
</div>
<script>
//使用div时,请保证demo2与demo1是在同一行上.
var speed=30//速度数值越大速度越慢
var tab2=document.getElementById("demo2");
var tab1=document.getElementById("demo1");
var tab=document.getElementById("demo");
tab2.innerHTML=tab1.innerHTML
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)//offsetWidth 是对象的可见宽度
tab.scrollLeft-=tab1.offsetWidth//scrollWidth 是对象的实际内容的宽,不包边线宽度
else{
tab.scrollLeft++
}
}
var MyMar=setInterval(Marquee,speed)
tab.onmouseover=function() {clearInterval(MyMar)}
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
</script>

今天发现我写的图片滚动代码有问题,图片虽然能循环滚动,但不是连续的,上网查了才发现是因为demo1和demo2都使用了浮动,使它们不在同一行上。取消浮动后,图片播放第二遍时显示不在同一行上,解决方法

#demo2 a
{
    float:left;
    margin:10px;
}
时间: 2024-11-05 23:30:00

图片无缝滚动的相关文章

JavaScript学习笔记5 之 计时器 &amp; scroll、offset、client系列属性 &amp; 图片无缝滚动

一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行一次相应的函数(不重复) 清除计时器: clearInterval( ); clearTimeout( ); 当计时器调用执行完毕时,它将返回一个timer ID, 如果将该ID传递给clearInterval,便可以终止代码的执行. 实例: 页面布局: <div id="wrap"

javascript实现图片无缝滚动-------Day 27

今天感冒变严重了,鼻涕止不住啊,一卷卫生纸就这样报废了,还是不想吃药,熬熬总能熬过去吧,状态不是很好,看这么个小应用竟然看了很久的时间,到最后才像猛的明白了一样,而且查着好像有好几种做法的,今天先说说这种吧,比较好理解额. 所谓"图片无缝滚动",我们可以这样来理解,如果只用marquee,则需要尾部也离开容器了,头部才能从头部另一端出现,重新进行滚动,如是进行循环,而无缝滚动,就是说一种首尾相连的效果,头部是咬在尾部上的,尾部全部漏出来后,后面紧挨着显示头部的部分,这样首尾相连进行的滚

jquery图片无缝滚动特效

jquery图片无缝滚动插件制作左右无缝滚动图片和上下无缝滚动图片,一款简单的jQuery无缝滚动代码.JS代码 <script type="text/javascript"> //图片滚动 调用方法 imgscroll({speed: 30,amount: 1,dir: "up"}); $.fn.imgscroll = function(o){ var defaults = { speed: 40, amount: 0, width: 1, dir:

jquery图片无缝滚动代码左右 上下无缝滚动图片

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

第41天:匀速、缓动运动和图片无缝滚动

一.匀速运动和缓动运动 缓动运动公式:leader=leader+(target-leader)/10;//leader为初始值0,target为结束值,10可以改变,值越大,速度越慢 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>运动</title> 6 <style>

js多组图片无缝滚动

原文:js多组图片无缝滚动 源代码下载地址:http://www.zuidaima.com/share/1550463717608448.htm

javascript实现图片无缝滚动(scrollLeft的使用方法介绍)

<!DOCTYPE html > <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <style> .piczhanshi{width:976px;height:167px;border:1px #999999 solid;

JavaScript----marquee滚动标签 图片无缝滚动 插入百度地图

页面的自动滚动效果,可由javascript来实现, 但是有一个html标签 - <marquee></marquee>可以实现多种滚动效果,无需js控制. 使用marquee标记不仅可以移动文字,也可以移动图片,表格等. 语法:<marquee>...</marquee>: 说明:在标记之间添加要进行滚动的内容. 重要属性: 1.滚动方向direction(包括4个值:up. down. left和 right) 语法:<marquee direct

js图片无缝滚动代码

想必大家都注意到<marquee>的不循环滚动,所以出现了很多替代脚本,或iframe或JS输出<marquee>,不管怎么做,都略显麻烦.下面说一下这个相对简单的实现思路:一个设定宽度并且隐藏超出它宽度的内容的容器demo,里面放demo1和 demo2,demo1是滚动内容,demo2为demo1的直接克隆,通过不断改变demo1的scrollTop或者scrollLeft达到滚动的目的,当滚动至demo1与demo2的交界处时直接跳回初始位置,因为demo1与demo2一样,

关于网页上图片无缝滚动的一些思路

从现在的一些常见网站上,无缝滚动的例子用得非常普遍,可以说很常见,也比较实用,下面我们就来简单看看,具体的一些想法怎么实现的: 先简单来看一下原理: 首先我们看到网页上一组图片不停滚动,一次循环之后又从第一张开始,其实简单的思路是:我们设置两组图片,当第一组图片滚动到结尾时,对应的第一组图片又瞬间拉回到起始位置. 当图片向另外一个方向滚动时,当后面一组图片滚动到结尾时:也是瞬间拉回到开头. 下面我们简单来看一下代码: <!DOCTYPE html><html><head>