效果看图:
点击按钮后的动画思路倒很容易弄懂,主要就是开始的时候CSS的设置,如果想到程序动态生成的话,那必须得先图片列表的长度。。。
这里只列出JS的代码:
$(function() {
var page = 1; // 初始为第一版
var i = 4; // 每版显示4个li
// 下一版
$("span.next").click(function() {
var $parent = $(this).parents("div.v_show"); // 根据当前单击的元素获取父元素
var $v_show = $parent.find("div.v_content_list"); // 根据父元素获取展示区
var $v_content = $parent.find("div.v_content"); // 根据父元素获取展示区外围的DIV
var v_width = $v_content.width(); // 外围DIV的宽度,即有overflow:hidden的那个DIV
var len = $v_show.find("li").length; // 总的图片数
var page_count = Math.ceil(len / i); // 获取总版数
if (!$v_show.is(":animated")) { // 如果正处于动画中的则不进行动画
if (page == page_count) {
// 最后一版,动画跳回第一版
$v_show.animate({ left: "0px" }, 1000);
page = 1;
}
else {
// 跳到下一版
$v_show.animate({ left: "-=" + v_width }, 1000);
page++;
}
}
// 更改版数的样式,高亮当前版数
$(".highlight_tip").find("span").eq(page - 1).addClass("current").siblings().removeClass("current");
});
// 上一版
$("span.prev").click(function() {
var $parent = $(this).parents("div.v_show"); // 根据当前单击的元素获取父元素
var $v_show = $parent.find("div.v_content_list"); // 根据父元素获取展示区
var $v_content = $parent.find("div.v_content"); // 根据父元素获取展示区外围的DIV
var v_width = $v_content.width(); // 外围DIV的宽度,即有overflow:hidden的那个DIV
var len = $v_show.find("li").length; // 总的图片数
var page_count = Math.ceil(len / i); // 获取总版数
if (!$v_show.is(":animated")) { // 如果正处于动画中的则不进行动画
if (page == 1) {
// 第一个版面,动画跳到最后一版
$v_show.animate({ left: "-=" + v_width * (page_count - 1) }, 1000);
page = page_count;
}
else {
// 跳到下一版
$v_show.animate({ left: "+=" + v_width }, 1000);
page--;
}
}
// 更改版数的样式,高亮当前版数
$(".highlight_tip").find("span").eq(page - 1).addClass("current").siblings().removeClass("current");
});
});
源码下载(同时包含我自己制作的示例和书中的示例):
http://niunan.net/download/jquery_scroll.7z
分享到:
相关推荐
这样当用户滚动到相应位置或点击按钮显示图片时,图片已经存在于浏览器的缓存中,可以立即展示,提高了页面的响应速度。 以下是一个基本的jQuery图片预加载的实现步骤: 1. **引入jQuery库**:在HTML文件中,我们...
在网页设计中,图片滚动效果常常被用于展示产品或服务,为用户带来更丰富的视觉体验。"jQuery左右图片自动滚动特效"是一个利用jQuery库实现的动态图片展示功能,它允许图片以自动化的方式左右滚动,为网站增添动感和...
本文将详细解析"jQuery实例(菜单、滚动、层隐藏等)"的相关知识点,帮助你深入理解并应用这些功能。 首先,我们来看菜单的实现。在网页设计中,菜单是用户导航的重要组成部分。jQuery提供了方便的方法来创建动态和...
- **简介**:结合jQuery和CSS实现下拉菜单的实例。 - **特点**: - 代码简洁,易于理解。 - 支持自定义样式。 ##### 17. Reinventing a DropDown with CSS and jQuery - **简介**:重新思考并设计下拉菜单的方法...
JQuery第一课-tab标签页、JQuery第二课-多张图的无缝滚动、JQuery第三课-图片轮播、JQuery第四课-下拉菜单(无限级)、JQuery第五课-弹出窗口、JQuery第六课-拖拽、JQuery第七课-模拟滚动条、JQuery第八课-放大镜、...
**jQuery实例教程** jQuery是一个广泛使用的JavaScript库,它极大地简化了HTML文档遍历、事件处理、动画和Ajax交互。在本教程中,我们将深入探讨jQuery的一些核心功能和常见应用,如滚动、导航、轮换、广告切换、...
标题“jquery实现图片滚动效果的简单实例”和描述“主要介绍了jquery实现图片滚动效果的简单实例,有需要的朋友可以参考一下”中提及的知识点主要围绕如何使用jQuery来实现图片滚动效果。jQuery是一个快速、小巧的...
jQuery图片特效image Scroller图片滚动 jQuery图片特效ImageWall图片墙 jQuery图片特效interactive_picture jQuery图片特效jquery-twitter-ticker jQuery图片特效LatestPostSlider jQuery图片特效note-app jQuery...
在网页设计中,图片滚动效果是一种常见的动态展示方式,它能吸引用户注意力并提供更丰富的视觉体验。本项目是利用jQuery库,结合HTML和CSS,实现一个简单的图片左右滚动的效果。接下来,我们将深入探讨这个过程中的...
在这个“jQuery图文左右滚动代码(箭头控制)”的压缩包中,包含了一个实现动态图文滚动效果的实例,特别适用于展示网站内容,如产品展示、新闻滚动等场景。 首先,我们需要理解jQuery如何实现动画效果。jQuery的动画...
“jQuery实现精美滚动条--以”中国动力科技”为例-”可能是一个具体的实例,说明如何根据特定品牌风格来设计滚动条。通过结合HTML、CSS和jQuery,我们可以为不同的项目创造符合品牌形象的滚动条效果。 对于水平滚动...
通过实践`jqueryimgscroll.rar`这个实例,开发者不仅可以掌握基本的图片滚动实现,还能进一步理解jQuery的精髓,为今后的前端开发打下坚实基础。在实际项目中,可以根据需求进行调整和优化,创造出更具个性化的图片...
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
总结来说,这个压缩包提供了一个学习和实践jQuery图片滚动效果的实例,通过分析和修改其中的代码,开发者可以深入理解jQuery动画机制,并能灵活运用到自己的项目中。无论是网页设计师还是前端开发者,都能从中受益,...
7. **动画效果**:jQuery的`animate()`函数可以用来添加平滑的过渡效果,使图片滚动看起来更加自然。通过设置动画的持续时间、速度曲线等参数,可以定制各种不同的动画效果。 8. **图片轮播逻辑**:为了确保图片...
"jQuery实现带控制按钮的图片滚动特效(可多个)"是一个常见的交互设计实践,它利用jQuery库的强大功能,为用户提供了一种流畅且可控制的图片展示方式。jQuery是一个轻量级、高性能的JavaScript库,简化了DOM操作、...
jQuery EasySlider图片滚动切换插件是一款基于JavaScript库jQuery的高效能、易使用的图片轮播工具。这个插件设计简洁,提供了平滑的过渡效果,使得多张图片可以在网页上以优雅的方式进行滚动切换,给用户带来类似...
jQuery Cycle 是一个强大的JavaScript插件,专为实现各种动态图片滚动效果而设计。它提供了一套丰富的配置选项和简单易用的API,使得开发者能够轻松地在网页上创建出吸引人的图片轮播、滑动展示或者无缝循环的图片...
本示例主要讲解如何利用JQuery实现图片向左滚动的效果,适用于创建轮播图、滚动广告等场景。 首先,我们需要理解JQuery的基本用法。JQuery通过选择器选取DOM元素,然后对这些元素进行操作。例如,`$("#myDiv")`会...
- 图片分页可能涉及到图片预加载和懒加载技术,确保在用户滚动到相应位置时,图片能够快速加载和展示。 3. **优化技巧** - **缓存**:对经常访问的数据进行缓存,减少不必要的服务器请求。 - **分页参数**:传递...