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

js实现图片左右滚动

CSSHTML 
阅读更多

如下所示：

 

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

 

分享到：
| js实现图片上下滚动
评论
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样式**：设置容器的宽度...

Magicbox
Global site tag (gtag.js) - Google Analytics