`
lhx1026
  • 浏览: 307019 次
  • 性别: Icon_minigender_2
  • 来自: 广州
社区版块
存档分类
最新评论

js实现图片左右滚动

阅读更多

如下所示:

 

<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 930px;
height:120px;
}
#demo img {
border: 1px solid #F2F2F2;
}
#indemo {
float: left;
width: 800%;
}
#demo1 {
float: left;
}
#demo2 {
float: left;
}
-->
</style>
<div id="demo">
<div id="indemo">
<div id="demo1">
<a href=""><img src="images/1.gif" border="0" width="120" height="120" /></a>
<a href=""><img src="images/1.gif" border="0" width="120" height="120" /></a>
<a href=""><img src="images/1.gif" border="0" width="120" height="120" /></a>
</div>
<div id="demo2"></div>
</div>
</div>
<script>
<!--
var speed=10;
var tab=document.getElementById("demo");
var tab1=document.getElementById("demo1");
var tab2=document.getElementById("demo2");
tab2.innerHTML=tab1.innerHTML;
function Marquee(){
if(tab2.offsetWidth-tab.scrollLeft<=0)
tab.scrollLeft-=tab1.offsetWidth
else{
tab.scrollLeft++;
}
}
var MyMar=setInterval(Marquee,speed);
tab.onmouseover=function() {clearInterval(MyMar)};
tab.onmouseout=function() {MyMar=setInterval(Marquee,speed)};
-->
</script>
</body>
</html>
   

 

分享到:
评论
2 楼 xjjaid13 2012-10-15  
1 楼 yuhui2f 2010-06-21  
顶一个!代码既简洁又好用!

相关推荐

    javascript实现图片左右滚动效果【可自动滚动,有左右按钮】

    1. JavaScript实现图片滚动功能 JavaScript可以控制HTML元素的显示和隐藏,利用定时器函数(如`setInterval`或`setTimeout`)可以实现元素的周期性变化,从而达到自动滚动的效果。同时,通过监听DOM元素(如按钮)的...

    图片左右滚动js

    通过阅读和理解这些代码,我们可以学习如何使用JavaScript实现图片左右滚动的效果,并将其应用到自己的项目中。同时,也可以根据需求进行二次开发,比如增加图片预加载、动态加载更多图片、触摸滑动支持等功能,以...

    通过js实现图片自动滚动,也可以手动控制滚动。

    总结,通过JavaScript实现图片自动滚动和手动控制是一项涉及HTML、CSS和JavaScript多方面技术的任务,需要理解DOM操作、事件监听、动画效果以及用户交互设计。通过不断学习和实践,你可以创建出具有出色用户体验的...

    js图片左右滚动.zip

    通过学习和理解这些文件,开发者可以了解到如何用纯JavaScript实现图片左右滚动效果,这对于网页开发和前端设计是非常基础且实用的技能。这个例子也展示了如何将HTML、CSS与JavaScript结合起来,构建出交互式的Web...

    jquery实现图片左右滚动

    本文将深入探讨如何使用 jQuery 实现图片左右连续滚动的效果,这对于创建动态展示图片的网站或应用非常实用。 一、jQuery 基础 在了解如何实现图片滚动之前,首先需要对 jQuery 有一定的基础认识。jQuery 是一个轻...

    JS动态可控制左右滚动的图片代码.rar

    "JS动态可控制左右滚动的图片代码.rar" 这个标题表明了压缩包中的内容是一个JavaScript代码实现的动态图片滚动效果。这种效果常见于网站的图片展示部分,用户可以通过点击或滑动按钮来控制图片的左右滚动,增加交互...

    js图片向上下左右滚动的代码 图片向上滚动js代码

    本示例主要讲解如何使用JavaScript实现图片的上下滚动。 首先,我们来看标题和描述中提到的关键点:`js图片向上下左右滚动的代码` 和 `图片滚动`。这些关键词暗示我们要创建一个JavaScript函数,该函数能够控制HTML...

    js 图片左右滚动

    下面我们将深入探讨如何利用JavaScript实现图片左右滚动以及按钮点击滚动的效果。 首先,我们需要创建HTML结构。一个简单的布局可能包括一个容器div,里面有两个按钮(一个用于向左滚动,一个用于向右滚动),以及...

    js实现图片左右滚动效果

    在本文中,我们将探讨如何使用JavaScript实现图片左右滚动的效果。这个效果经常用于网站中展示产品或者作品集时,为用户提供了更为动态和交互式的浏览体验。通过提供图片滚动功能,可以使得用户不需要手动点击或滚动...

    jQuery图片左右滚动效果代码.zip

    在本文中,我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果,这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头,可以手动切换,同时具备自动轮播的功能,大大增强了用户体验。 首先,我们需要...

    jquery实现图片的左右滚动

    本项目是利用jQuery库,结合HTML和CSS,实现一个简单的图片左右滚动的效果。接下来,我们将深入探讨这个过程中的关键知识点。 首先,jQuery是一个高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画...

    js图片左右滚动条切换.zip

    【标题】"js图片左右滚动条切换.zip"所包含的知识点主要是关于JavaScript(JS)实现的图片滚动条交互效果,这种效果通常用于图片相册或展示类网站,以提供用户友好的图片浏览体验。在现代网页设计中,动态且可自定义...

    js 图片上下左右滚动

    JavaScript(简称JS)是一...总结来说,利用JavaScript实现图片的上下左右滚动涉及到了基本的JS编程、事件处理以及DOM操作。通过组合这些技术,我们可以创建出各种富有动态性的网页交互,为用户提供更丰富的视觉体验。

    JS图片左右滚动效果代码

    ### JS图片左右滚动效果代码详解 #### 一、概述 在网页设计中,为了增加页面的动态效果和提升用户体验,常常会用到图片滚动展示功能。本文将详细解析一段JavaScript代码,该代码能够实现图片左右自动滚动的效果,...

    js图片左右无缝滚动用鼠标控制图片滚动

    以上就是实现JavaScript图片左右无缝滚动的关键知识点,通过理解并掌握这些内容,开发者可以创建出各种动态、交互性强的图片展示效果。在实际项目中,还可以根据需求添加更多功能,如自动播放、暂停、导航点等。

    Js切换图片+图片滚动带底部和左右按钮

    在JavaScript(Js)中实现图片切换与图片滚动带底部和左右按钮的功能,是网页动态效果设计中的常见需求。这样的功能可以提升用户体验,使用户能够轻松浏览一组图片或内容。以下将详细阐述如何实现这一功能。 首先,...

    js控制图片左右滚动,可控制方向

    "js控制图片左右滚动,可控制方向"这个主题就是关于如何使用JavaScript来实现一个动态的图片滚动展示,让用户可以通过点击或触摸来控制图片的滚动方向。下面将详细阐述这一技术要点。 1. **JavaScript基础**:...

    JS控制图片左右滚动代码

    在这个栏目中,新浪采用了两个滚动动画,点击左右箭头,图片可以一张张切换,切换得一点都不“唐突”,这就是jquery的功能了。像这样的动画,很常见,之前我在腾讯的女性频道上也做过此类的滚动动画。可惜有点遗憾,...

    图片左右循环滚动JS代码.zip

    【标题】"图片左右循环滚动JS代码.zip"所包含的是一个使用JavaScript实现的图片左右循环滚动的代码示例。在网页设计中,这样的功能通常用于展示产品图片、新闻轮播或者广告滑动等,能够吸引用户的注意力并提供交互性...

    图片左右滚动代码

    实现图片左右滚动的基本步骤如下: 1. **HTML结构**:创建一个包含图片的容器,每个图片都是一个`&lt;img&gt;`标签。通常,我们会预先加载所有要展示的图片,然后通过CSS隐藏部分图片。 2. **CSS样式**:设置容器的宽度...

Global site tag (gtag.js) - Google Analytics