`
wlhx
  • 浏览: 36876 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

Jquery实现图片滚动

阅读更多
    平常见好多网站都有那种图片点击滚动的效果感觉挺好的,于是今天就实际做了一下,整体思路很简单,通过jquery找到要滚动的对象,然后让他animate改变它的距左属性left就可以了,但是要改变left必须要将滚动对象的position设为relative否则left无效,所以在写样式的时候一定要想清楚了否则效果出不来!我把代码上传了如果有需要大家可以看一下!
分享到:
评论
2 楼 bilipan 2012-08-23  
不过有点问题:无法自动调整图片显示个数。
我自己改了下:
var w = p.find('li').outerWidth(true);//图片所在li宽度
$('.PhotoCon').width(w*i);//设置图片容器可视宽度为图片可视个数总宽度
这样就解决了。
1 楼 bilipan 2012-08-23  
难得见到简单版的,也好自己扩展,多谢分享。

相关推荐

    jquery实现图片滚动

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

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

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

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

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

    jQuery实现图片滚动

    能够实现图片不间断的各种滚动的jquery插件,详细用法可参照:http://www.popub.net/script/MSClass.html

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

    在图片滚动效果中,我们需要选中包含图片的容器,然后通过CSS操作改变其样式,以实现图片的移动。 2. **事件处理**:为了实现左右箭头的点击事件,我们需要为这两个元素绑定`click`事件。当用户点击箭头时,触发...

    jquery实现图片滚动效果的简单实例

    标题“jquery实现图片滚动效果的简单实例”和描述“主要介绍了jquery实现图片滚动效果的简单实例,有需要的朋友可以参考一下”中提及的知识点主要围绕如何使用jQuery来实现图片滚动效果。jQuery是一个快速、小巧的...

    jQuery实现图片滚动效果

    本篇文章将深入探讨如何利用jQuery实现图片轮番(轮播)和图片旋转效果。 首先,我们需要了解jQuery的基本用法。jQuery通过选择器选中页面中的元素,然后对这些元素执行各种操作。例如,`$("#myImage")`会选取ID为...

    jQuery实现的图片滚动效果

    总结起来,使用jQuery实现图片滚动效果涉及到HTML布局、CSS美化、jQuery选择器、动画功能、事件处理和优化策略等多个方面。通过实践和学习,你可以掌握这个过程,并将其应用于各种项目,提升网页的用户体验。

    jquery实现图片滚动组件

    为了实现图片滚动,我们需要一个包含所有图片的容器。这个容器可以是一个div,通过CSS样式设置其大小和溢出隐藏,这样超出容器的部分就不会显示出来。例如: ```html <!-- 这里放置多张图片 --> ``` 对应的CSS...

    jQuery手机移动端图片横向滚动效果

    在移动设备上,为了优化...总结,通过上述步骤和方法,我们可以使用jQuery在手机移动端实现图片的横向滚动效果,为用户提供流畅、直观的浏览体验。实践中,可能还需要根据具体需求进行调整和优化,以满足项目的要求。

    jquery图片滚动

    本篇文章将详细讲解如何利用jQuery实现图片滚动效果,这是一个常见的网页特效,能为网站增添动感和吸引力。 首先,我们要了解jQuery的基本用法。jQuery的核心功能是选择DOM元素、操作DOM、添加事件处理以及执行动画...

    一个jquery图片滚动效果

    以上就是使用jQuery实现图片滚动效果的基本步骤。在实际应用中,可能还需要考虑更多细节,如添加指示器显示当前图片位置、支持触摸滑动、响应式布局等。"imageSliver"可能指的是这个图片滚动效果的示例代码或资源包...

    jquery图片滚动demo jqueryimgscroll.rar

    本教程将详细解析jQuery实现图片滚动的原理及其实现步骤,同时提供一个解压即用的jQuery图片滚动demo——`jqueryimgscroll.rar`,供开发者参考学习。 jQuery库以其简洁的API和强大的功能,使得JavaScript编程变得...

    jquery 图片滚动

    jQuery 是一个广泛使用的 JavaScript 库,它简化了 DOM 操作、事件处理、动画效果等,使得实现图片滚动变得更为简单。本文将深入探讨如何使用 jQuery 实现图片滚动效果。 ### 一、jQuery 基础 在了解如何实现图片...

    jquery实现图片的左右滚动

    HTML结构是实现图片滚动的基础。我们需要创建一个容器`div`来包含所有的图片`ul`列表项。例如: ```html <li><img src="img1.jpg" alt="Image 1"> <li><img src="img2.jpg" alt="Image 2"> <!-- 更多图片 -->...

    jquery实现图片左右滚动

    在了解如何实现图片滚动之前,首先需要对 jQuery 有一定的基础认识。jQuery 是一个轻量级的库,通过提供易于使用的 API,使得 JavaScript 开发更为便捷。它的核心功能包括选择器(用于选取 HTML 元素)、DOM 操作...

    jquery图片滚动条放大效果rar

    《jQuery实现图片滚动条放大效果详解》 在网页设计中,动态效果的运用可以极大地提升用户体验,其中图片滚动条放大效果是一种常见的交互设计手法。本文将深入探讨如何使用jQuery库来实现这一效果,帮助读者理解并...

    jquery图片滚动JS

    本篇文章将深入讲解如何使用jQuery实现图片滚动效果,并探讨两个流行的开源插件——nivoSlider和SliderBox。 ### 一、jQuery基础 在开始图片滚动的实现之前,我们需要对jQuery的基本用法有所了解。jQuery的核心...

Global site tag (gtag.js) - Google Analytics