`
mengxing0929
  • 浏览: 6433 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

简单的画廊功能

阅读更多
JS实现的动态画廊功能,不依赖jquery; 代码实现简单、易用;
实现原理: 通过JS定时器,定时修改div marginLeft 值,使div中的内容移动;

核心JS代码
/**
* 滚动插件对象
* @param json param
* @param int intervalId 定时器编号
* @param Object container  需动容器
* @param int totalPx    移动总相素
* @param int speedTime 每次移动时间
* @param int timeNum   移动次数
*/
var Whell = function(param) {
this.intervalId = null;
this.container = param.container;
this.totalPx  = param.totalPx;
this.speedTime = param.speedTime || 10;
this.timeNum = param.timeNum || 15;
var spacePx = parseInt(this.totalPx/this.timeNum);
if(spacePx < 0){
this.spacePx = 0 - spacePx;
}else{
this.spacePx = spacePx;
}
};

Whell.prototype = {
start : function(){
var obj = this;
this.intervalId = setInterval(function(){
obj.scroll();
}, this.speedTime);
},
/**
* 滚轮滚动方法
*/
scroll : function(){
if (this.totalPx == 0) {
//移动相素之和为1024时,停止移动
clearInterval(this.intervalId);
} else {
var currntMargin =  _getPxNumber(this.container.style.marginLeft);
if(this.totalPx > 0){
//向右移动
if(this.totalPx > this.spacePx){
this.container.style.marginLeft = (currntMargin + this.spacePx) + "px";
this.totalPx = this.totalPx - this.spacePx;
}else{
this.container.style.marginLeft = (currntMargin + this.totalPx) + "px";
this.totalPx = 0;
}
}else if(this.totalPx < 0){
//向左移动
if(this.totalPx + this.spacePx < 0 ){
this.container.style.marginLeft = (currntMargin - this.spacePx) + "px";
this.totalPx = this.totalPx + this.spacePx;
}else{
this.container.style.marginLeft = (currntMargin + this.totalPx) + "px";
this.totalPx = 0;
}
}
}
}
};



/**
* 画廊滚动
*/
Whell['gallery'] = {
slideView : function(container) {
var image = _$(".g_image", container)[0];
var pictWidth = image.width;
var pictHeight = image.height;
var pictEls = _$(".gallery_image", container).length;

var stripViewerWidth = pictWidth * pictEls;
var gallery_main = _$(".gallery_main", container)[0];
gallery_main.style.width = stripViewerWidth + "px";
container.style.width = (pictWidth+10) + "px";
container.style.height = (pictHeight +  80) + "px";

_each(_$(".gallery_paging", container), function(z, node) {
L.event.add(node, "click", function(){
//更改点击区域样式
var gallery_paging_list = _$(".gallery_paging", container);
_each(gallery_paging_list, function(i, paging){
if(i == z){
paging.className = "gallery_paging gallery_paging_selected";
}else{
paging.className = "gallery_paging";
}
});

//滚动
var cnt = -(pictWidth * z);
var startPx = gallery_main.style.marginLeft;
var totalPx = cnt - _getPxNumber(startPx);
//定时执行滚动div
var whell = new Whell({totalPx:totalPx, container: gallery_main});
//启动定时器
whell.start();

//更改描述
var gallery_description_list = _$(".gallery_description", container);
_each(gallery_description_list, function(i, description){
if(i == z){
description.style.display = "block";
}else{
description.style.display = "none";
}
});
return false;
});
});
}
};


分享到:
评论

相关推荐

    jquery 实现的简单画廊

    这里我们探讨的是一种使用jQuery实现的简单画廊,它具有上一张、下一张、暂停以及图片缩略图等基本功能,非常适合初学者理解和实践。 ### 一、jQuery简介 jQuery是一款高效、简洁的JavaScript库,它简化了HTML文档...

    Android简单画廊

    在实现画廊功能时,`RecyclerView`可以配合`LinearLayoutManager`或者自定义的布局管理器,例如`GridLayoutManager`,来实现类似`Gallery`的水平滑动效果。 3. **加载图片库** 要展示手机中的图片,你需要访问设备...

    设计画廊CSS3网页模板

    【设计画廊CSS3网页模板】是一个以创新和现代感为特色的网页设计资源,它充分利用了CSS3的强大功能,为网站设计师提供了展示作品的新颖方式。这个模板特别适合那些希望在线展示他们的艺术作品、设计项目或者摄影集的...

    画廊的制作

    CSS3是层叠样式表的最新版本,为网页设计提供了许多增强功能。在这个项目中,CSS3被用来创建视觉效果,如3-D选择、缩放以及流光字体。3-D选择和缩放可能通过`transform`属性实现,它允许元素进行二维或三维的变换。...

    Gallerytest 3d画廊

    Gallerytest 3d画廊作为一款定制化的画廊应用,它可能包含以下功能: 1. **3D浏览模式**:提供不同于传统2D平面的浏览方式,使用户能够滑动、旋转图片,增加交互性和沉浸感。 2. **手势控制**:通过简单的触摸和...

    jQuery手风琴画廊

    本文将深入探讨jQuery手风琴画廊的实现原理、功能特点以及实际应用。 ### 1. jQuery手风琴画廊简介 jQuery手风琴画廊是一款基于JavaScript库jQuery的轻量级插件,它的主要功能是将一系列图片或内容组织成可滑动的...

    画廊效果+旋转木马效果 banner广告位 android

    在"画廊效果+旋转木马效果 banner广告位 android"项目中,开发者已经完成了封装工作,这意味着开发者可以更方便地集成这个功能到自己的应用中。只需要简单的配置,就可以快速创建一个具备这两种效果的广告位。这大大...

    jQuery的全屏图像画廊

    jQuery全屏图像画廊是一种利用JavaScript库jQuery实现的高级图片展示解决方案,专为...开发者只需按照提供的文档将这些资源引入到自己的项目中,并根据需要进行配置,就能快速搭建起一个美观且功能强大的全屏图像画廊。

    安卓Gallery照片墙画廊图库相关-Android利用Gallery和ImageSwitcher实现在线相册图片预览功能异步加载图片.rar

    `Gallery`是Android早期API提供的一种水平滚动视图,它可以展示一排可滑动的项目,非常适合用于图片浏览应用中的照片墙或画廊功能。`Gallery`组件允许用户通过手指左右滑动来切换图片,同时支持自动滚动效果。 `...

    ios-画廊.zip

    在iOS开发中,创建一个美观且功能丰富的画廊是许多应用程序不可或缺的部分,特别是在社交媒体、图片分享或个人作品展示的应用中。本项目“ios-画廊.zip”提供了一个自定义布局的解决方案,帮助开发者实现类似画廊的...

    jQuery炫酷3d画廊

    它通过提供一套简单易用的API,让开发者能够轻松实现诸如元素操作、事件绑定、DOM遍历、AJAX请求等多种功能。 **jQuery 3D画廊** jQuery 3D画廊是一种创新的展示图像和内容的方式,它利用CSS3的3D变换和过渡效果,...

    超级简单的jquery画廊

    在网页设计中,画廊功能是一种常见的展示图像的方式,尤其适用于摄影网站或者产品展示页面。本文将深入探讨如何利用jQuery库构建一个简单却功能完善的画廊,实现上下滚动的动画效果。我们将主要涉及jQuery的选择器、...

    js和CSS3炫酷图片画廊插件

    用户可以通过简单的配置,将一组图片组织成画廊,同时支持自动轮播、手动滑动、缩略图导航等特性。这种灵活的展示方式可以满足多种应用场景,如产品展示、摄影作品集或新闻动态等。 **4. Lightbox效果** LGaller也...

    android画廊-在屏幕上滑动换图片

    在Android开发中,创建一个能够实现屏幕滑动切换图片的画廊功能是一项常见的任务。这个功能使得用户可以浏览多张图片,并通过简单的手势操作在它们之间进行切换,提供了直观且友好的用户体验。以下是对这个话题的...

    unitegallery效果非常好的画廊HTML JS插件

    总的来说,unitegallery是一个功能强大的HTML和JavaScript画廊插件,它提供了一种简单且高效的方式来创建吸引人的在线画廊。尽管可能需要一些技术背景来充分利用其潜力,但对于希望提升网站媒体展示效果的开发者来说...

    安卓Gallery照片墙画廊图库相关-android图片的放大镜功能源代码正方形放大镜类似淘宝简单实现.zip

    本压缩包提供的"安卓Gallery照片墙画廊图库相关-android图片的放大镜功能源代码正方形放大镜类似淘宝简单实现.zip"主要关注的是图片的放大镜效果。以下是关于这个功能的详细解释: 1. **放大镜功能原理**: 放大镜...

    ViewPager画廊及各类PageTransformer

    本篇将详细讲解如何利用ViewPager实现画廊功能,特别是“3D画廊样式”以及PageTransformer的各种动画效果。 首先,我们来理解ViewPager的基本概念。ViewPager是Android Support Library中的一个控件,它可以显示一...

    图片画廊和Lightbox特效.zip

    在IT领域,图片画廊和Lightbox特效是网页设计中常用的功能,主要用于展示一组图片,增强用户体验。这个压缩包文件“图片画廊和Lightbox特效.zip”似乎包含了一套实现这些效果的资源,可能包括HTML、CSS和JavaScript...

    画廊gallery

    这个名为"画廊gallery"的项目很可能是提供了一个简单的Android应用实例,用于实现一个可滚动浏览图片的画廊功能。下面将详细介绍画廊组件及其相关知识点。 一、Android Gallery组件 Gallery是Android SDK中的一个...

Global site tag (gtag.js) - Google Analytics