<!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-Type" content="text/html; charset=gb2312" />
<title>图片滚动</title>
</head>
<body>
<style type="text/css">
<!--
#demo {
background: #FFF;
overflow:hidden;
border: 1px dashed #CCC;
width: 500px;
}
#demo img {
border: 3px 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="/jscss/demoimg/wall_s1.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s2.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s3.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s4.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s5.jpg" border="0" /></a>
<a href="#"><img src="/jscss/demoimg/wall_s6.jpg" border="0" /></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>
分享到：
相关推荐
【图片无缝循环滚动】是一种常见的网页设计技巧，用于在网页上实现图片的连续不间断滚动效果，给用户带来流畅的视觉体验。这种技术广泛应用于网站的背景装饰、广告展示或者产品轮播等场景。通过实现图片无缝滚动，...
**jQuery无缝图片滚动**是一种常见的网页动态效果，用于在网页上展示一组图片，通过自动循环滚动，给予用户连续且平滑的视觉体验。这个技术基于JavaScript库jQuery，它简化了DOM操作，使得实现复杂的交互变得更加...
【标题】"很炫的图片无缝上下滚动效果.rar"是一个包含JavaScript实现的动态图片滚动效果的资源包。这种效果常用于网站的图片展示，能够给用户带来流畅且引人注目的视觉体验，使得图片相册更加生动活泼。 【描述】...
实现文字无缝滚动+css无缝滚动，特别是phper，前后端不分离，需要自己写样式，该例子能很好的帮助到后端开发者。不是使用marquee这个属性，这个属性有问题，滚动完一遍数据后不能实现无缝衔接，次案例采用的是css和...
**jQuery图片无缝滚动插件详解** 在Web开发中，为了增加网页的动态效果和用户体验，图片无缝滚动是一种常见的设计手法。jQuery，作为一个轻量级、功能丰富的JavaScript库，提供了丰富的API来实现这样的功能。本篇...
标题中的"query图片无缝滚动插件上下左右图片无缝滚动代码"指的是使用jQuery库实现的一种图片无缝滚动效果的插件。这种效果通常应用于网站的轮播图或者产品展示区域，能够提供用户平滑、连续的浏览体验，使得多张...
JavaScript 上下无缝图片滚动是一种常见的网页动态效果，用于展示一系列图片，给用户带来更丰富的视觉体验。这种技术常被应用于产品展示、轮播广告或图片画廊等场景，如糯米网的产品展示。在这个效果中，图片会按照...
在网页设计中，动态效果的运用可以提升用户体验，其中“无缝滚动”是一种常见的视觉效果，常用于展示图片或文本信息。本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果，同时确保其在火狐浏览器上的兼容性...
链接图片无缝向左平滑滚动Js版代码
首先，无缝连接循环滚动图的核心原理是通过编程技术让最后一张图片或内容在滚动到最前端时与第一张无缝对接，形成一种无边界的循环效果。这通常涉及到以下几个关键点： 1. **布局设计**：为了实现无缝滚动，我们...
向左不间断（无缝）滚动图片js代码，这个代码用的人相信很多，有一点不好的就是当图片不足时不会滚动，所以使用时要多加几张图片。 ---------------------------------------------- 向左不间断（无缝）滚动图片js...
【jQuery 按钮控制图片无缝滚动代码详解】 在网页设计中，图片滚动效果是一种常见的动态展示手段，能够吸引用户注意力并提升用户体验。本篇文章将深入讲解如何利用jQuery实现按钮控制的图片无缝滚动效果，帮助你...
在构建一个交互式的网页应用...图片上传和下载涉及到文件输入、表单数据处理以及链接下载属性的运用。在 WebSite1 这个项目中，这些技术都将得到应用，为用户提供一个集视频播放、流畅滚动和图片交互于一体的网页体验。
**jQuery无缝滚动**是一种网页设计技术，用于实现图片或内容的自动循环播放效果，从而提升用户体验，增加网站的视觉吸引力。这种技术基于JavaScript库jQuery，它简化了DOM操作，使得创建动态、交互式的网页变得更加...
【图片无缝滚动-jquery版】 在网页设计中，图片无缝滚动是一种常见的动态效果，它可以为网站增添视觉吸引力，提升用户体验。这种效果通过不断循环展示图片，使得用户感觉图片一直在平滑地滚动，而没有明显的断点。...
jQuery动画效果实现图片无缝连续滚动是一种常见的网页动态展示技术，常用于创建吸引人的广告轮播或图片展示区域。这种方法的关键在于通过JavaScript库jQuery来控制DOM元素的移动，以达到视觉上的无间断滚动效果。 ...
【标题】"带按钮的无缝滚动图片"是一个网页设计中的特效技术，主要应用于展示一系列连续的图片，如产品展示、广告轮播等场景。通过这个技术，用户可以在一个固定区域内看到连续滚动的图片，而无需手动翻页或者等待...
myslideLeftRight 基于jQuery图片左右无缝滚动插件,方便友情链接左右滚动。 思路： 点击左边-- 1.将第一个LI向左滑动，滑动的数值就是LI的宽度。（这里是用负margin-left来实现移动。） 2.滑动完成后，将...
为了实现无缝效果，可以在容器的末尾复制第一个`<li>`元素，并在滚动到最后一张图片时，立即切换滚动方向，使用户感觉图片一直在滚动。 ### 四、优化与扩展 - **自动滚动**：可以设置定时器，让图片每隔一段时间...