`
流星剑
  • 浏览: 95376 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

图片横向无缝滚动

    博客分类:
  • js
阅读更多
<div id="demo" style="overflow:hidden;">
    <div id="indemo" style="float:left; width:800%">
     <div id="demo1" style="float:left;">
     <img src="img/一点绿.jpg" width="110" height="89" />
     <img src="img/中原一点红.jpg" width="110" height="89" />
     <img src="img/大炸鱼.jpg" width="110" height="89" />
     <img src="img/白菜鲜蘑.jpg" width="110" height="89" />
     <img src="img/米饭.jpg" width="110" height="89" />
     <img src="img/肉片.jpg" width="110" height="89" />
     <img src="img/蒜苔炒肉.jpg" width="110" height="89" />
     </div>
     <div id="demo2" style="float:left;"></div>
     </div></div> 
     <script type="text/javascript">
	 <!--
      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.onmousemove=function(){clearInterval(MyMar)};
		tab.onmouseout=function(){MyMar=setInterval(Marquee,speed)};
		-->
     </script>

 

分享到:
评论

相关推荐

    DIV+CSS实现横向无缝图片滚动效果

    标题中的“DIV+CSS实现横向无缝图片滚动效果”是指在网页设计中,通过HTML的`&lt;div&gt;`元素和CSS样式来创建一个可以水平无限循环滚动的图片展示区域。这种效果通常用于网站的横幅广告、产品展示或者新闻更新等部分,以...

    可以左右移动横向无缝滚动的JS图片展示

    本文将深入探讨如何使用JavaScript实现一个可以左右移动的横向无缝滚动图片展示的效果。 首先,我们需要理解无缝滚动的概念。无缝滚动是指在用户滚动页面时,内容能够平滑过渡,没有明显的中断或跳跃感,就像一个...

    横向无缝的图片滚动,jQuery jcarousel实例.rar

    横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,这是Jquery jcarousel插件应用实用例子,演示文档虽然是HTML格式,但由代码来看,在ASP/PHP/ASP.NET中使用也很方便,而且图片...

    横向无缝左右滚动的JS图片展示代码

    在提供的压缩包“可以左右移动横向无缝滚动的JS图片展示代码”中,包含了实现这些功能的源代码。通过对这些代码的分析和学习,你可以理解并掌握如何利用JavaScript实现横向无缝左右滚动的图片展示效果。在实际应用中...

    js带按钮标题横向无缝滚动

    JS横向无缝滚动是一种常见的网页动态效果,用于展示大量信息,如图片、文字或标题,特别是在有限的屏幕空间内。这种滚动方式能够吸引用户注意力,提高用户体验,尤其适用于新闻网站、产品展示页面和轮播广告等。 ##...

    jQuery 无缝图片横向滚动代码

    4. **CSS样式**:为了实现无缝滚动,我们通常需要设置一些CSS样式,比如图片的布局(`display: inline-block`或`float: left`)、容器的宽度(大于实际图片宽度,以便隐藏部分图片)以及定位(`position: relative`...

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

    "jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片滚动技术,它使得图片能够在页面上以平滑、连续的方式移动,既可以从左到右,也可以从上到下,为用户带来流畅的视觉体验。 jQuery是一个...

    js实现横向多幅图片滚动(并非原创)

    一个多福图片的滚动代码,亲测支持各种版本浏览器(IE7.8里一处css略有问题,很容易更改),并非原创,请尊重他人劳动成果!

    不间断无缝滚动图片

    在网页设计中,"不间断无缝滚动图片"是一种常见的视觉效果,它通过JavaScript或者CSS3等技术实现,使得图片能够连续不断地、平滑地从一端滚动到另一端,给人一种连贯且无中断的视觉体验。这种效果常用于网站的轮播图...

    通过CSS3中的animation属性实现无缝滚动效果

    通过CSS3中的animation属性实现无缝滚动效果

    左右无缝滚动图片

    【标题】"左右无缝滚动图片"是一个网页设计技术,它主要使用JavaScript库jQuery来实现一种动态效果,使得图片能够在水平方向上连续、平滑地滚动,给人一种无边界、连续不断的感觉,增强了用户的浏览体验。...

    vue,原生js左右无缝滚动

    在本文中,我们将深入探讨如何使用原生JavaScript实现Vue组件中的左右无缝滚动效果,并结合CSS进行样式设计。Vue.js是一个流行的前端框架,它允许开发者构建可复用、可维护的组件,而原生JavaScript则是其背后的基石...

    无缝横向滚动文字图片特效.zip

    【标题】"无缝横向滚动文字图片特效.zip"所包含的是一个网页特效的代码包,主要目的是实现文字和图片在页面上的无缝横向滚动效果。这种特效常用于新闻网站、公告栏或者展示区,能够吸引用户的注意力并高效地展示大量...

    js 无缝滚动,鼠标放上去暂停代码

    在前端开发中,实现文本或图片的无缝滚动效果是非常常见的需求之一,特别是在新闻网站、广告横幅等场景下。这种效果不仅可以提升用户体验,还能增加页面的吸引力。本文将详细解析一个具体的JS无缝滚动示例,并解释其...

    无缝连接可循环滚动布局

    在Android开发中,创建一个无缝连接可循环滚动的布局是一个常见的需求,比如在轮播图、商品列表等场景。这个自定义的`ViewGroup`,名为`ForeverLayout`,就是为了满足这种需求而设计的。它允许用户在内容达到边界时...

    JS无缝图片滚动,横向和纵向滚动二例.rar

    JS无缝图片滚动,横向和横向滚动二例,响应鼠标停止,无使用jQuery,图片滚动应用广泛,本代码在IE8、火狐等浏览器下兼容性好,代码效率高,而且代码也很少,方便大家嵌入到自己的网页中,运行效果如上图所示。

    Android-横向滚动无限循环的图片使用自定义控件的方式

    在Android开发中,为了实现一个横向滚动且无限循环的图片展示功能,我们通常需要自定义一个控件。这种效果常见于广告轮播图或者图片滑动展示等场景,能够为用户带来良好的交互体验。本文将深入讲解如何通过自定义...

    vue移动端轮播图(触摸滑动滚动、自动轮播、无缝滚动、循环无回滚)

    3. **无缝滚动**:无缝滚动使得用户在轮播到最后一张图片后,能立即返回到第一张图片,形成一种无限循环的效果。这需要在数据结构设计上进行特殊处理,通常通过数组复制或索引计算来实现。 4. **循环无回滚**:当...

    ScrollNews 新闻无缝循环滚动切换特效 ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而并非是一行或几个简单图片构成的滚动。

    ScrollNews 新闻无缝循环滚动切换特效,不错的滚动效果,压缩包内的示例包括横向和竖向两种形式的滚动,本滚动结合图片和文字,运用CSS和Javascript技术,将滚动的内容扩展至DIV标签,也就是控制某个区域的滚动,而...

Global site tag (gtag.js) - Google Analytics