效果看图:
点击按钮后的动画思路倒很容易弄懂,主要就是开始的时候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新闻图片列表滚动特效,两端有小箭头,可控制左右滚动,...[jQuery]15个jQuery 菜单、滚动、层隐藏等学习实例代码 15个jQuery学习实例,
jQuery实例教程,滚动、导航、轮换、广告切换、图片轮换、弹出层、隔行换色、收缩展开效果、图片展示
JQuery第一课-tab标签页、JQuery第二课-多张图的无缝滚动、JQuery第三课-图片轮播、JQuery第四课-下拉菜单(无限级)、JQuery第五课-弹出窗口、JQuery第六课-拖拽、JQuery第七课-模拟滚动条、JQuery第八课-放大镜、...
jQuery图片特效image Scroller图片滚动 jQuery图片特效ImageWall图片墙 jQuery图片特效interactive_picture jQuery图片特效jquery-twitter-ticker jQuery图片特效LatestPostSlider jQuery图片特效note-app jQuery...
主要介绍了jquery实现图片滚动效果的简单实例,有需要的朋友可以参考一下
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
jQuery EasySlider图片滚动切换插件,只是修改一下参数而已。如果你多张图片用一背景底色的话,那么这种效果将更加令人满意,它的平滑度可以和FLASH一比高低。
jQuery图文左右滚动代码(箭头控制)
超精美的jquery横向图文滚动特效,其实就是图片滚动,但是本效果设计的十分精美,而且每张图片都显示文字信息。左右两边的箭头,用于切换图片滚动,滚动时的速度有缓冲效果,先快后慢,慢慢停止。这种设计风格更像是...
给客户做一个网站,实例展示:要求图片滚动,并点击放大,折腾半天,用jquery实现了,有情趣可以来看看
横向无缝的图片滚动,两端带左右控制按钮,需要鼠标点击按钮才会滚动,点一下滚动一下,这是Jquery jcarousel插件应用实用例子,演示文档虽然是HTML格式,但由代码来看,在ASP/PHP/ASP.NET中使用也很方便,而且图片...
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
实现jquery框架的图片滚动实例,小巧兼容,可供参考。
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
63.[荐]jquery仿flash漂亮横向图片滚动效果完整版(兼容性非常好) 64.[荐]jQuery焦点图幻灯切换插件Tab选项卡(soChange 1.4)下载 65.一款jQuery仿flash放大图片的相册插件 66.一款jQuery仿苹果mac os系统经典...
jQuery插件实现的图文导航特效,响应式鼠标悬停时图片滚动图文导航特效,当鼠标悬停于图片时,图片从下往上滚动,同时显示出文字导航,图片的透明度也会发生变化,动画效果十分平滑,本效果更适合用在企业、公司一类...
88. 动感十足jquery仿腾讯图片滚动浏览功能(带左右控制按钮)MovingBoxes插件下载 89. 参考JQZOOM插件使用jQuery仿京东网产品展示切换及放大效果的代码 90. 又一款jquery自动轮播焦点图+内容的广告代码 91. 又一款...
门户网站通用的jquery左右图片滚动带文字标题,一次滚动两张图片的位置,加入一些滚动时的动画效果,左右两边都可以控制图片向左或向右滚动,每张图片都可显示文字标题,也就是文字说明,这种形式简洁大方,在门户...
本文实例为大家分享了jQuery实现动态向上滚动的具体代码,供大家参考,具体内容如下 总结:概括滚动的新闻、字幕、图片:两个最核心功能 : 1、”永动“(infinite) 2、循环 js实现”永动“(infinite) 的...