`
shewolfep
  • 浏览: 67067 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

jQuery实现滚动的图片

阅读更多
下载地址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>
</div>

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

});

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

相关推荐

    用jquery实现的漂亮滚动图片

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

    jQuery图片滚动自适应浏览器

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

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

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

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

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

    jQuery实现的图片滚动效果

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

    jquery实现图片的左右滚动

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

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

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

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

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

    jquery图片滚动效果

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

    jquery实现图片左右滚动

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

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

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

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

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

    jQuery的滚动背景

    通过查看和分析这些代码,你可以更深入地理解如何使用jQuery实现滚动背景效果。常见的做法可能是创建一个函数,该函数在每次滚动事件触发时被调用,然后更新背景位置。 五、优化与兼容性 为了保证在不同的浏览器和...

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

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

    jquery 左右滚动图片效果

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

    Jquery实现图片滚动

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

    jquery实现图片滚动

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

    jquery 图片滚动

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

    jquery带滚动条图片滚动

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

    jquery实现图片滚动并放大效果

    本项目“jquery实现图片滚动并放大效果”是利用 jQuery 创建一个互动性的图片展示功能,该功能包括点击图片左右按钮进行图片切换以及鼠标悬停时图片自动放大的视觉效果。下面我们将详细探讨实现这些效果的关键技术和...

Global site tag (gtag.js) - Google Analytics