`
niunan
  • 浏览: 721373 次
  • 性别: Icon_minigender_1
  • 来自: 南宁
社区版块
存档分类
最新评论

JQuery控制图片无缝滚动

阅读更多

经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html></html>这样子的,没有加上documentType标签,不符合“标准”。

于是自己套上了标准之后再改了一下,发现在firefox中还是滚动不起来,知道肯定是某些地方的js只适用于IE吧,也懒得慢慢找了,直接用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-Type" content="text/html; charset=utf-8" />
    <title>JS图片向左滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    <!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;width:500px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr>
      <td id="demo1" valign="top" bgcolor="ffffff">
      <!-- 特别注意,下面的图片总宽度必须大于上面定义的demo的宽度,如上面demo的宽度为500px,则下面图片总宽度必须大于500,否则会出现些问题! -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
            <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
      <td id="demo2" valign="top"></td>
    </tr>
  </table>
</div>
<script type="text/javascript"> 
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){ 
    if(demo.scrollLeft()>=demo1.width())
        demo.scrollLeft(0); 
    else{
        demo.scrollLeft(demo.scrollLeft()+1);
    }
} 
var MyMar=setInterval(Marquee,speed) 
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} )

function fun1(){
    alert(demo.scrollLeft());
}
function fun2(){
    alert(demo1.width());
}
</script>
<input type="button"  value="显示demo.scrollLeft()" onclick="fun1();"/>
<input type="button"  value="显示demo1.width())" onclick="fun2();"/>
</body>
</html> 

  

 

那二个按钮主要是为了自己观察值的变化之用,正式使用中可以去掉。

向右无缝滚动的HTML同上,只是js脚本中的Marquee函数不同,代码如下:

function Marquee(){ 
    if(demo.scrollLeft()==0){
        demo.scrollLeft(demo1.width());
    }else{
        demo.scrollLeft(demo.scrollLeft()-1);
    }
}
 

向上无缝滚动的HTML代码如下:

 

<!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=utf-8" />
    <title>JS图片向上滚动</title>
    <style type="text/css">
    img{
    border: none;
    }
    </style>
    <!-- 这句话不能少,记得把jquery.js文件放在当前页面的同一目录中 -->
    <script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div id="demo" style="overflow:hidden;height:300px;">
  <table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
    <tr id="demo1">
      <td valign="top" bgcolor="ffffff">
      <!-- 特别注意,下面的图片总高度必须大于上面定义的demo的宽度,如上面demo的高度为300px,则下面所有图片的高的和值必须大于300,否则会出现些问题! -->
          <table border="0" cellspacing="0" cellpadding="0">
          <tr align="center">
            <td><a href="#" target="_blank"><img src="01.jpg" width="150" height="100"></a></td>            
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="02.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="03.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="04.jpg" width="150" height="100"></a></td>
          </tr>
          <tr align="center">
              <td><a href="#" target="_blank"><img src="05.jpg" width="150" height="100"></a></td>
          </tr>
        </table>
      </td>
    </tr>
    <tr id="demo2">
    </tr>
  </table>
</div>
<script type="text/javascript"> 
var speed=30;
var demo = $("#demo");
var demo1 = $("#demo1");
var demo2 = $("#demo2");
demo2.html(demo1.html());
function Marquee(){ 
    if(demo.scrollTop()>=demo1.height())
        demo.scrollTop(0); 
    else{
        demo.scrollTop(demo.scrollTop()+1);
    }
} 
var MyMar=setInterval(Marquee,speed) 
demo.mouseover(function() {
    clearInterval(MyMar);
} )
demo.mouseout(function() {
    MyMar=setInterval(Marquee,speed);
} )

function fun1(){
    alert(demo.scrollTop());
}
function fun2(){
    alert(demo1.height());
}
</script>
<input type="button"  value="显示demo.scrollTop()" onclick="fun1();"/>
<input type="button"  value="显示demo1.height())" onclick="fun2();"/>
</body>
</html>
 

 

向下无缝滚动的HTML代码同上,只是js脚本中的Marquee函数不同,如下:

 

function Marquee(){ 
    if(demo.scrollTop()==0)
        demo.scrollTop(demo1.height()); 
    else{
        demo.scrollTop(demo.scrollTop()-1);
    }
}
 

源码下载:/Files/niunan/scrollpic.rar

分享到:
评论

相关推荐

    jQuery图片左右无缝滚动特效代码

    5. **动画效果**:jQuery提供了`animate()`函数来创建自定义动画,可以用于控制图片的滚动速度、方向和缓动效果。这将使得图片的滚动既流畅又自然。 6. **数据结构与遍历**:为了管理图片集合,可能使用数组或其他...

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

    **jQuery图片无缝滚动代码实现详解** 在网页设计中,图片滚动是一种常见的动态效果,它可以吸引用户的注意力并增强网站的视觉吸引力。"jQuery图片无缝滚动代码左右上下无缝滚动图片"是利用jQuery库实现的一种图片...

    jquery按钮控制图片无缝滚动代码

    【jQuery 按钮控制图片无缝滚动代码详解】 在网页设计中,图片滚动效果是一种常见的动态展示手段,能够吸引用户注意力并提升用户体验。本篇文章将深入讲解如何利用jQuery实现按钮控制的图片无缝滚动效果,帮助你...

    jquery 图片 无缝 滚动 插件

    **jQuery图片无缝滚动插件详解** 在Web开发中,为了增加网页的动态效果和用户体验,图片无缝滚动是一种常见的设计手法。jQuery,作为一个轻量级、功能丰富的JavaScript库,提供了丰富的API来实现这样的功能。本篇...

    jQuery焦点图片无缝滚动轮播插件.zip

    jQuery焦点图片无缝滚动轮播插件是Web开发中常见的组件,它主要用于网站的首页或产品展示区域,以吸引用户注意力并提升用户体验。该插件基于JavaScript库jQuery构建,旨在实现图片的自动滚动和手动切换,形成一种无...

    jquery 无缝滚动 demo

    本教程将深入讲解如何利用jQuery实现页面图片的无缝滚动效果,同时确保其在火狐浏览器上的兼容性。 一、jQuery简介 jQuery是一款高效、简洁的JavaScript库,它简化了HTML文档遍历、事件处理、动画设计和Ajax交互。...

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

    总之,jQuery图片无缝滚动插件通过JavaScript的动画功能和事件处理,实现了在网页上图片的平滑、连续滚动,增强了用户体验。开发者可以通过自定义或使用现有的插件来实现这一效果,结合HTML和CSS布局,打造个性化的...

    jquery图片无缝滚动

    jQuery图片无缝滚动是一种常见的网页动态效果,用于展示一组图片,以滑动的形式连续播放,给用户带来流畅且连贯的视觉体验。这种效果通常应用于网站的轮播图、产品展示或者广告区域,使得页面更加生动有趣。在本教程...

    基于jQuery的图片左右无缝滚动插件

    在网页设计中,动态展示图片是常见的需求,而图片无缝滚动则能提供一种优雅的展示方式,增强用户体验。"基于jQuery的图片左右无缝滚动插件"就是用于实现这种效果的工具,它允许图片在水平方向上连续、平滑地滚动,...

    jQuery无缝滚动跑马灯效果

    jQuery无缝滚动跑马灯效果是一种常见的网页动态展示技术,它利用JavaScript库jQuery的高效特性,为网站添加一种吸引用户注意力的视觉效果。这种效果通常应用于新闻更新、广告展示或者产品介绍等区域,使得信息能够以...

    html中图片无缝滚动

    在图片无缝滚动中,CSS可以用来设置图片的定位(positioning)、过渡(transitions)和动画(animations)。例如,我们可以通过绝对定位使图片叠加在一起,然后利用CSS3的`animation`属性创建一个平滑的滚动效果。...

    web-JQuery无缝图片滚动

    2. **无缝滚动**:无缝滚动是网页设计中的一种效果,使得内容(如图片)在滚动时没有明显的断点,仿佛一直在平滑移动。这种效果可以增加用户体验,尤其在展示产品或信息时更为吸引人。 3. **实现方法**:使用jQuery...

    myslideLeftRight 基于jQuery图片左右无缝滚动插件.zip

    【myslideLeftRight基于jQuery图片左右无缝滚动插件】是一个常用的前端开发工具,它通过结合JavaScript库jQuery实现图片的平滑、连续且无间隙的左右滚动效果,为网站的展示和用户体验提供了极大的便利。该插件广泛...

    jquery图片无缝滚动.rar

    《jQuery图片无缝滚动详解》 在网页设计中,动态效果的运用可以提升用户体验,增加页面的吸引力。"jQuery图片无缝滚动"就是一种常见的JavaScript特效,它使得图片在页面上连续、平滑地滚动,营造出视觉上的连贯性和...

    jQuery简易的图片无缝滚动代码.zip

    **jQuery简易图片无缝滚动代码详解** 在Web开发中,图片无缝滚动是一种常见的视觉效果,它可以使网站的展示更加生动和吸引人。这个“jQuery简易的图片无缝滚动代码”就是一个实现这种效果的简单示例,主要涉及到...

    jQuery排名文字无缝循环向上滚动代码

    **jQuery排名文字无缝循环向上滚动代码详解** 在网页设计中,动态效果往往能吸引用户的注意力,提高用户体验。jQuery作为一款强大的JavaScript库,提供了丰富的功能来实现各种动态效果,其中包括文字无缝循环滚动。...

    jQuery 模拟 Marquee 无缝滚动 不间断滚动

    本文将深入探讨如何使用 jQuery 创建一个无缝滚动的效果。 首先,我们需要理解什么是无缝滚动。无缝滚动是指元素在滚动到一端后,立即从另一端重新出现,给人一种无终止、连续移动的视觉体验。在 jQuery 中实现这个...

    jquery无缝滚动

    **jQuery无缝滚动**是一种网页设计技术,用于实现图片或内容的自动循环播放效果,从而提升用户体验,增加网站的视觉吸引力。这种技术基于JavaScript库jQuery,它简化了DOM操作,使得创建动态、交互式的网页变得更加...

Global site tag (gtag.js) - Google Analytics