下载地址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图片滚动自适应浏览器】是一种网页设计技术,利用JavaScript库jQuery实现图片在不同分辨率的浏览器窗口中自动调整尺寸并流畅滚动。这种技术通常应用于全屏或焦点图展示,为用户提供一个美观且交互性强的浏览...
在本文中,我们将深入探讨如何实现一个基于jQuery的图片左右滚动效果,这通常用于网站的轮播图或幻灯片展示。这个效果包含了左右箭头,可以手动切换,同时具备自动轮播的功能,大大增强了用户体验。 首先,我们需要...
总结来说,jQuery无限滚动加载图片瀑布流技术是结合了jQuery库、瀑布流布局和无限滚动加载的网页设计技巧,通过精心设计的插件,可以轻松地实现在网页上动态加载和展示图片,为用户提供流畅、无阻隔的浏览体验。
同时,为`ul`设置负的`margin-left`,使其首张图片不可见,然后通过jQuery动态改变这个值实现滚动效果。 接下来,我们来编写jQuery代码实现图片的左右滚动。首先,需要在HTML文档的`<head>`部分引入jQuery库(`...
6. **计时器和循环**:为了自动滚动图片,我们可以使用JavaScript的`setInterval()`函数设置定时器。这将在指定间隔后执行一个函数,从而实现无缝滚动效果。同时,我们需要考虑循环逻辑,确保图片滚动到最后一张后能...
本文将深入探讨如何利用jQuery实现滚动新闻和滚动图片,并提供相关的知识点。 一、jQuery基础 1. jQuery选择器:jQuery提供了简洁且强大的CSS选择器,如ID选择器(#id),类选择器(.class),元素选择器(element),...
2. **CSS 风格**:为了实现滚动效果,图片容器需要设置为绝对定位,并设置足够的宽度以容纳所有图片。图片的宽度应等于容器的宽度,这样可以实现无缝滚动。 3. **jQuery 选择器与事件**:接下来,我们利用 jQuery ...
本文将深入探讨如何利用jQuery实现左右按钮控制的图片滚动效果。 ### 一、jQuery基础 jQuery是一个轻量级的JavaScript库,它的目标是使JavaScript编程变得更简单、更快速。通过提供强大的选择器、DOM操作、事件...
"jQuery左右图片自动滚动特效"是一个利用jQuery库实现的动态图片展示功能,它允许图片以自动化的方式左右滚动,为网站增添动感和交互性。 该特效的核心在于jQuery的选择器、事件处理和动画方法。jQuery库以其简洁的...
对于"jquery图片滚动插件制作焦点图片滚动或列表图片滚动"这一主题,我们将深入探讨如何利用jQuery实现动态、吸引人的图片展示效果。 一、jQuery图片滚动插件基础 1. 插件选择:jQuery库中有许多现成的图片滚动...
"jQuery实现带控制按钮的图片滚动特效(可多个)"是一个常见的交互设计实践,它利用jQuery库的强大功能,为用户提供了一种流畅且可控制的图片展示方式。jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、...
非常漂亮的100个 jquery前端案例,包含幻灯片切换、图片缩放、相册、放大镜、图片拖着滚动等,可以做为你的学习设计参考。 jquery+css五屏焦点图淡入淡出+圆形按钮切换广告图片代码 ...jquery版自动滚动图片动画特效插件
总的来说,使用jQuery实现滚动图片效果是网页开发中的常见实践,它能为用户提供更丰富的视觉体验。通过学习和理解这段代码,你可以更好地掌握jQuery的用法,并将其应用到自己的项目中,创造出更多富有吸引力的交互...
### 使用jQuery实现图片滚动 #### 一、项目背景与需求分析 在网页设计与开发过程中,为了提升用户体验和页面美观度,常常会用到图片滚动功能。本案例中,一个初学者希望使用jQuery来实现一个简单的图片滚动效果,...
**jQuery实现图片滚动** 在网页设计中,动态的图片滚动效果常常被用来吸引用户的注意力,提升网站的互动性。jQuery库以其简洁的API和强大的功能,成为实现这种效果的首选工具。本文将深入探讨如何利用jQuery来实现...
三、jQuery实现滚动背景 1. **监听滚动事件**:使用`$(window).scroll(function() {...})`来监听窗口的滚动事件。当用户滚动页面时,内部的回调函数会被调用。 2. **获取滚动位置**:在回调函数中,可以使用`$...
至此,我们就实现了基本的左右滚动图片效果。这个轮播图支持手动点击“上一个”和“下一个”按钮切换图片,同时也可通过修改代码添加自动播放功能。您可以根据需求调整动画速度、添加指示器或分页器等增强用户体验。...
本文将详细介绍如何利用jQuery实现带滚动条的图片滚动效果。 ### 1. jQuery基础 在深入讲解图片滚动前,我们先回顾一下jQuery的基本用法。jQuery通过 `$` 符号作为入口,可以快速选择DOM元素、操作DOM、添加事件...
本项目主要关注如何使用jQuery实现一个带左右按钮控制的焦点图片切换滚动功能,同时具备自动轮询滚动的效果,类似于QQ商城中间展示商品的方式。 首先,我们需要理解jQuery的核心概念。jQuery是一个轻量级的...
jQuery的`.next()`和`.prev()`方法可以用来在图片列表中前后移动,结合定时器可以实现自动循环滚动。同时,`.stop()`方法可以防止动画堆栈,确保滚动效果流畅。 **4. 鼠标滑过放大** 图片放大滚动效果是指当鼠标...