`
pcajax
  • 浏览: 2159016 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

jqery 实现滚动图片【三】

阅读更多

下载地址http://www.gmarwaha.com/jquery/jcarousellite/index.php#install
建议下载Uncompressed,里面有例子。
引入jcarousellite.js,<script type="text/javascript" src="path/to/jquery.js"></script>
<script type="text/javascript" src="path/to/jcarousellite.js"></script>
如果想添加滚轮支持,则需要引入<script type="text/javascript" src="path/to/easing.js"></script>
<script type="text/javascript" src="path/to/mousewheel.js"></script>
然后 jsp:
<div class="jCarousel">
    <ul>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
        <li><img src="someimage" alt="" width="100" height="100" ></li>
    </ul> <script language="JavaScript" src="http://book.book560.com/ads/ads728x15.js" type="text/javascript"></script>
</div>

js:
$(".jCarousel").jCarouselLite({
    mouseWheel: true,
     auto: 800,
    speed: 1000

});

这样便实现了图片的滚动了。其中有很多属性可以自己选择。
在使用过程中遇到一个问题,div宽度不能自定义,我们可以把修改div.css(sizeCss, divSize+"px");这句代码:
1、直接注释掉
2、增加一个参数,根据该参数来判断。这样我们便可以自如的控制div的宽度或者高度了。

分享到:
评论

相关推荐

    jQuery图片滚动自适应浏览器

    【jQuery图片滚动自适应浏览器】是一种网页设计技术,利用JavaScript库jQuery实现图片在不同分辨率的浏览器窗口中自动调整尺寸并流畅滚动。这种技术通常应用于全屏或焦点图展示,为用户提供一个美观且交互性强的浏览...

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

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

    jQuery无限滚动加载图片瀑布流代码

    总结来说,jQuery无限滚动加载图片瀑布流技术是结合了jQuery库、瀑布流布局和无限滚动加载的网页设计技巧,通过精心设计的插件,可以轻松地实现在网页上动态加载和展示图片,为用户提供流畅、无阻隔的浏览体验。

    jquery实现图片的左右滚动

    同时,为`ul`设置负的`margin-left`,使其首张图片不可见,然后通过jQuery动态改变这个值实现滚动效果。 接下来,我们来编写jQuery代码实现图片的左右滚动。首先,需要在HTML文档的`&lt;head&gt;`部分引入jQuery库(`...

    jQuery实现的图片滚动效果

    6. **计时器和循环**:为了自动滚动图片,我们可以使用JavaScript的`setInterval()`函数设置定时器。这将在指定间隔后执行一个函数,从而实现无缝滚动效果。同时,我们需要考虑循环逻辑,确保图片滚动到最后一张后能...

    滚动新闻,滚动图片,jquery滚动新闻,jqeury滚动图片

    本文将深入探讨如何利用jQuery实现滚动新闻和滚动图片,并提供相关的知识点。 一、jQuery基础 1. jQuery选择器:jQuery提供了简洁且强大的CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),...

    jquery实现图片左右滚动

    2. **CSS 风格**:为了实现滚动效果,图片容器需要设置为绝对定位,并设置足够的宽度以容纳所有图片。图片的宽度应等于容器的宽度,这样可以实现无缝滚动。 3. **jQuery 选择器与事件**:接下来,我们利用 jQuery ...

    jquery图片滚动效果

    本文将深入探讨如何利用jQuery实现左右按钮控制的图片滚动效果。 ### 一、jQuery基础 jQuery是一个轻量级的JavaScript库,它的目标是使JavaScript编程变得更简单、更快速。通过提供强大的选择器、DOM操作、事件...

    jQuery左右图片自动滚动特效.zip

    "jQuery左右图片自动滚动特效"是一个利用jQuery库实现的动态图片展示功能,它允许图片以自动化的方式左右滚动,为网站增添动感和交互性。 该特效的核心在于jQuery的选择器、事件处理和动画方法。jQuery库以其简洁的...

    jquery图片滚动插件制作焦点图片滚动或列表图片滚动

    对于"jquery图片滚动插件制作焦点图片滚动或列表图片滚动"这一主题,我们将深入探讨如何利用jQuery实现动态、吸引人的图片展示效果。 一、jQuery图片滚动插件基础 1. 插件选择:jQuery库中有许多现成的图片滚动...

    jQuery实现带控制按钮的图片滚动特效(可多个)

    "jQuery实现带控制按钮的图片滚动特效(可多个)"是一个常见的交互设计实践,它利用jQuery库的强大功能,为用户提供了一种流畅且可控制的图片展示方式。jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、...

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等.zip

    非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 ...jquery版自动滚动图片动画特效插件

    用jquery实现的漂亮滚动图片

    总的来说,使用jQuery实现滚动图片效果是网页开发中的常见实践,它能为用户提供更丰富的视觉体验。通过学习和理解这段代码,你可以更好地掌握jQuery的用法,并将其应用到自己的项目中,创造出更多富有吸引力的交互...

    jquery实现图片滚动

    ### 使用jQuery实现图片滚动 #### 一、项目背景与需求分析 在网页设计与开发过程中,为了提升用户体验和页面美观度,常常会用到图片滚动功能。本案例中,一个初学者希望使用jQuery来实现一个简单的图片滚动效果,...

    Jquery实现图片滚动

    **jQuery实现图片滚动** 在网页设计中,动态的图片滚动效果常常被用来吸引用户的注意力,提升网站的互动性。jQuery库以其简洁的API和强大的功能,成为实现这种效果的首选工具。本文将深入探讨如何利用jQuery来实现...

    jQuery的滚动背景

    三、jQuery实现滚动背景 1. **监听滚动事件**:使用`$(window).scroll(function() {...})`来监听窗口的滚动事件。当用户滚动页面时,内部的回调函数会被调用。 2. **获取滚动位置**:在回调函数中,可以使用`$...

    jquery 左右滚动图片效果

    至此,我们就实现了基本的左右滚动图片效果。这个轮播图支持手动点击“上一个”和“下一个”按钮切换图片,同时也可通过修改代码添加自动播放功能。您可以根据需求调整动画速度、添加指示器或分页器等增强用户体验。...

    jquery带滚动条图片滚动

    本文将详细介绍如何利用jQuery实现带滚动条的图片滚动效果。 ### 1. jQuery基础 在深入讲解图片滚动前,我们先回顾一下jQuery的基本用法。jQuery通过 `$` 符号作为入口,可以快速选择DOM元素、操作DOM、添加事件...

    jquery 图片滚动

    本项目主要关注如何使用jQuery实现一个带左右按钮控制的焦点图片切换滚动功能,同时具备自动轮询滚动的效果,类似于QQ商城中间展示商品的方式。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级的...

    jquery图片放大滚动

    jQuery的`.next()`和`.prev()`方法可以用来在图片列表中前后移动,结合定时器可以实现自动循环滚动。同时,`.stop()`方法可以防止动画堆栈,确保滚动效果流畅。 **4. 鼠标滑过放大** 图片放大滚动效果是指当鼠标...

Global site tag (gtag.js) - Google Analytics