`

无尽旋转木马

阅读更多

 

今天在逛论坛时,发现很多新人在问用jquery如何编写一个”旋转木马”的切图效果。所以自己特意去写了一个demo,希望能帮到一些新人。

思路:

  1. 创建显示框DIV,设置overflow:hidden。
  2. 在显示框中创建元素ul,将所有图片放在ul的li中,给元素li添加float:left。
  3. 通过点击左右方向图标,改变显示框的scrollLeft。

 

如下图:

Jquery代码

为了以后能重复使用这代码,我将效果写成了一个插件。

插件的格式:

 

$.fn.infiniteCarousel=function() {
return this.each(function() 
//要执行的代码
});
}
 调用插件:

 

$(function(){
$(".infiniteCarousel").infiniteCarousel();
});
注意:outerWidth=padding+width+border
//一个图片所占的宽度
singleWidth = $wrapperLis.filter(":first").outerWidth()
注意:innerWidth=padding+width
//每页图片个数
pageCount = Math.ceil($wrapper.innerWidth() / singleWidth)
 无尽选择木马动画效果:
//判断是否还在执行动画中
if($wrapper.is(':not(:animated)')){
//执行动画效果
$wrapper.animate({"scrollLeft":"+="+ scrolleft},200,function() {
 currentPage = page;
//在复制页第一页
if(page == 0){
$wrapper.scrollLeft(pageTotal*$wrapper.width());
currentPage = pageTotal;
//在复制页最后一页
}else if(page > pageTotal){
$wrapper.scrollLeft($wrapper.width());
currentPage = 1;
}
});
}
 
 

 

 

6
1
分享到:
评论

相关推荐

    旋转木马切换特效slick.zip

    "旋转木马切换特效slick.zip" 是一个包含JS特效的资源包,主要应用于创建具有动态效果的图片相册。在Web开发中,旋转木马(Carousel)是一种常见且吸引人的设计元素,它允许用户浏览一系列内容,如图片或文本,通过...

    jQuery仿3D效果三联切换旋转木马插件源码.zip

    《jQuery仿3D效果三联切换旋转木马插件源码解析》 在现代网页设计中,为了提升用户体验,各种动态效果和交互设计被广泛应用。其中,旋转木马(Carousel)插件是一种常用于展示图片或内容轮播的组件,它能够以优雅的...

    JQuerylightSlider滑块与旋转木马是一个轻量级的响应内容缩略图导航

    其中,滑块和旋转木马效果常常被用来展示图片、产品或内容,以吸引用户的注意力。lightSlider就是一个优秀的解决方案,它是一款基于jQuery的轻量级响应式幻灯片插件,专为实现此类效果而设计。 lightSlider的设计...

    游方特欢乐世界作文.doc

    ufo、空中飞舞、旋转木马等项目让人目不暇接。我鼓足勇气,与哥哥一起尝试了空中飞舞。这个项目的确非常惊险,感觉自己仿佛被抛向空中,然后再瞬间停止,那种失重感几乎让我晕眩。下来时,我的手因为紧紧抓住扶手而...

    香港迪士尼乐园作文300字 描写香港迪士尼乐园的作文300字.doc

    灰姑娘旋转木马和小飞象旋转世界,这些专为儿童设计的项目,以其精美的造型和温和的速度,让孩子们体验到在童话世界中飞翔的快乐。而对我这样喜欢寻求刺激的游客来说,过山车和“飞越太空山”无疑是乐园里最激动人心...

    苹果树上的外婆测试题很全.doc

    - 他们在游艺场乘坐了不同颜色的游艺设施,如蓝色的船形秋千、红色的旋转木马,这些细节描绘了生动的场景。 - 安迪与芬克太太的互动也体现了亲情和友情的重要性,如安迪帮助她搬家,而芬克太太则教他生活技能。 3...

    手机端banner轮播效果

    Banner轮播,也称为滑动广告或旋转木马,是一种在网站或应用程序顶部展示多个内容块(通常是图像或图文组合)的交互设计。用户可以通过手动滑动或自动播放来浏览不同的Banner。 2. **设计原则** - **适应性**:...

    10款能与flash效果相比拼得js图片展示代码

    利用CSS3和JavaScript,开发者可以创建具有3D效果的图片展示,如旋转木马、3D墙或3D翻转。例如,Three.js是一个流行的3D图形库,可以创建复杂的3D场景,将图片以独特的方式呈现出来,带来更丰富的视觉体验。 4. **...

    部编人教版二年级下册道德与法治复习资料-精编.docx

    29. 安全是游戏的前提,如在池塘边放风筝、旋转木马上打闹、在陡峭山崖上攀爬或雷雨天在大树下玩耍都是不安全的行为。 30. 设立安全提示牌,可以提醒大家注意潜在危险,保障游戏安全。 九、小水滴的诉说 31. 水是...

    自定义collectionViewLayout布局

    自定义collectionViewLayout是实现独特布局效果的关键,它可以让你突破默认的流水布局,实现如瀑布流、旋转木马、棋盘等个性化布局。本知识点将深入讲解如何自定义UICollectionViewFlowLayout。 首先,理解...

Global site tag (gtag.js) - Google Analytics