JavaScript 图片切换展示效果
JavaScript 图片切换展示效果
由于有了做图片滑动展示效果的经验,做这个就容易得多了。
先看看效果:
根据alibaba做的效果:
- 1
- 2
- 3
alibaba的按钮有一个延迟的功能,应该加个定时器,但这个不是重点就省了吧。
扩展成能左右切换:
- 1
- 2
- 3
其他扩展功能:
切换速度:
停顿时间:
程序说明:
首先需要一个容器,设置它的overflow为hidden,position为relative;
容器里面还要一个滑动对象,设置它的position为absolute;
在initialize()函数里初始化一些属性。
在切换之前先执行Start()函数,进行相关设置,
主要是设置Index属性(索引)和_target属性(目标值):
if(this.Index < 0){
this.Index = this._count - 1;
} else if (this.Index >= this._count){ this.Index = 0; }
this._target = -1 * this._parameter * this.Index;
接着就执行Move()函数开始移动了,原理通过设置滑动对象的top(或left)来做出移动的效果,
而减速的效果就需要执行GetStep()函数来获取步长:
用目标值减当前值再除以一个参数,得到步长,
这样取得的步长在当前值越接近目标值时会越来越小,也做成了减速的效果,
然后在top(或left)的设置中加上这个步长,并设置定时器继续Move(),直到到达目标值:
this._slider.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
下面例子里的容器结构:
<div class="container" id="idTransformView">
<ul class="slider" id="idSlider">
<li><img src="http://shundebk.cn/temp/1.jpg"/></li>
<li><img src="http://shundebk.cn/temp/2.jpg"/></li>
<li><img src="http://shundebk.cn/temp/3.gif"/></li>
</ul>
<ul class="num" id="idNum">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</div>
要美观的话需要css设置一下:
.container, .container *{margin:0; padding:0;}
.container{width:408px; height:168px; overflow:hidden;}
.slider{position:absolute;}
.slider li{ list-style:none;display:inline;}
.slider img{ width:408px; height:168px; display:block;}
.slider2{width:2000px;}
.slider2 li{float:left;}
.num{ position:absolute; right:5px; bottom:5px;}
.num li{
float: left;
color: #FF7300;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 12px;
cursor: pointer;
overflow: hidden;
margin: 3px 1px;
border: 1px solid #FF7300;
background-color: #fff;
}
.num li.on{
color: #fff;
line-height: 21px;
width: 21px;
height: 21px;
font-size: 16px;
margin: 0 1px;
border: 0;
background-color: #FF7300;
font-weight: bold;
}
样式的设置跟程序也有一定关系,例如宽和高,这里就不说明了。
接着就可以实例化了:
var tv = new TransformView ("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
});
这里主要有4个参数,分别是容器对象、滑动对象、切换参数和切换数量。
当程序是上下切换时,切换参数切换的高度,当左右切换时,是切换的宽度。
切换数量就是有多少个切换对象了,例如上面的例子就是3个。
最后的参数是一些设置:
属性: 默认值//说明
Up: true,//是否向上(否则向左)
Step: 5,//滑动变化率
Time: 10,//滑动延时
Auto: true,//是否自动转换
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){}//完成转换时执行
例子里设置了onStart属性,作用是在切换开始时,设置按钮的样式
例子里完整的测试代码:
function Each(list, fun){
for (var i = 0, len = list.length; i < len; i++) { fun(list[i], i); }
};
var objs = $("idNum").getElementsByTagName("li");
var tv = new TransformView("idTransformView", "idSlider", 168, 3, {
onStart : function(){ Each(objs, function(o, i) { o.className = tv.Index == i ? "on" : ""; }) }//按钮样式
});
tv.Start();
Each(objs, function (o, i){
o.onmouseover = function(){
o.className = "on";
tv.Auto = false;
tv.Index = i;
tv.Start();
}
o.onmouseout = function(){
o.className = "";
tv.Auto = true;
tv.Start();
}
})
源码:
var $ = function (id) {
return "string" == typeof id ? document.getElementById(id) : id;
};
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
Object.extend = function(destination, source) {
for (var property in source) {
destination[property] = source[property];
}
return destination;
}
var TransformView = Class.create();
TransformView.prototype = {
//容器对象,滑动对象,切换参数,切换数量
initialize: function(container, slider, parameter, count, options) {
if(parameter <= 0 || count <= 0) return;
var oContainer = $(container), oSlider = $(slider), oThis = this;
this.Index = 0;//当前索引
this._timer = null;//定时器
this._slider = oSlider;//滑动对象
this._parameter = parameter;//切换参数
this._count = count || 0;//切换数量
this._target = 0;//目标参数
this.SetOptions(options);
this.Up = !!this.options.Up;
this.Step = Math.abs(this.options.Step);
this.Time = Math.abs(this.options.Time);
this.Auto = !!this.options.Auto;
this.Pause = Math.abs(this.options.Pause);
this.onStart = this.options.onStart;
this.onFinish = this.options.onFinish;
oContainer.style.overflow = "hidden";
oContainer.style.position = "relative";
oSlider.style.position = "absolute";
oSlider.style.top = oSlider.style.left = 0;
},
//设置默认属性
SetOptions: function(options) {
this.options = {//默认值
Up: true,//是否向上(否则向左)
Step: 5,//滑动变化率
Time: 10,//滑动延时
Auto: true,//是否自动转换
Pause: 2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){}//完成转换时执行
};
Object.extend(this.options, options || {});
},
//开始切换设置
Start: function() {
if(this.Index < 0){
this.Index = this._count - 1;
} else if (this.Index >= this._count){ this.Index = 0; }
this._target = -1 * this._parameter * this.Index;
this.onStart();
this.Move();
},
//移动
Move: function() {
clearTimeout(this._timer);
var oThis = this, style = this.Up ? "top" : "left", iNow = parseInt(this._slider.style[style]) || 0, iStep = this.GetStep(this._target, iNow);
if (iStep != 0) {
this._slider.style[style] = (iNow + iStep) + "px";
this._timer = setTimeout(function(){ oThis.Move(); }, this.Time);
} else {
this._slider.style[style] = this._target + "px";
this.onFinish();
if (this.Auto) { this._timer = setTimeout(function(){ oThis.Index++; oThis.Start(); }, this.Pause); }
}
},
//获取步长
GetStep: function(iTarget, iNow) {
var iStep = (iTarget - iNow) / this.Step;
if (iStep == 0) return 0;
if (Math.abs(iStep) < 1) return (iStep > 0 ? 1 : -1);
return iStep;
},
//停止
Stop: function(iTarget, iNow) {
clearTimeout(this._timer);
this._slider.style[this.Up ? "top" : "left"] = this._target + "px";
}
};
下载测试代码
转载于:https://www.cnblogs.com/Ewin/archive/2008/09/15/1291041.html
JavaScript 图片切换展示效果相关推荐
- JavaScript 图片滑动展示效果javascript
javascript 图片滑动展示效果 更新版本:slideview 图片滑动(扩展/收缩)展示效果 看到jquery实例:图片展示效果后,我也想拿来试试,但我不太喜欢用框架,所以自己做了个. 其中的 ...
- 移动端和PC端都兼容的图片滑动切换展示效果—PhotoSwipe
介绍一款兼容移动端和PC端的图片滑动切换展示效果-PhotoSwipe,PhotoSwipe是一款可以在移动触控设备上和PC桌面上完美运行的免费开源的图像展示l类独立的Javascript库,它基于H ...
- CSS+JS自动循环滚动的多图片幻灯切换展示效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- css和js实现3d图片,JavaScript_纯JS实现旋转图片3D展示效果,CSS:style type=text/cssgt - phpStudy...
纯JS实现旋转图片3D展示效果 CSS: #show{position:relative;margin:20px auto;width:800px;} .item{position:absolute; ...
- jquery练习——简单的图片结果展示效果
今天看到google图片搜索结果页面,感觉简洁实用,于是用jquery粗略的模仿了一下 再次感觉到jquery的强大和易用,基本思路初步实现了,再整合ajax和json,应该可以做一个简单的应用了 : ...
- JavaScript 图片3D展示空间(3DRoom)
一般的平面效果,通过改变水平和垂直坐标就能实现,再加上深度,就能在视觉上的产生3D(三维)的效果. 程序就是模拟这样一个三维空间,里面的图片会根据三维坐标显示在这个空间. 很久以前就看过一个3DRoo ...
- JavaScript图片切换
本次使用的是图片切换的效果主要javaScript来实现功能. 一.什么是HTML,HTML怎么作用法,HTML具体能做什么? HTML是超文本标签语言(Hyper Text Markup Labgu ...
- 的图片怎么循环渲染_十分钟教你做个炫酷的图片切换过度效果
做个炫酷的图片切换过度效果 首先,今天是520节日.到了520这类为情侣准备的节日,小编都会感到一万点暴击-- 首先酸一波,搞点事情(蹭波热度). 给大家分享一个520特效页面:看完记得回来为小编点个 ...
- HTM+CSS实现立方体图片旋转展示效果
目的:HTM+CSS实现立方体图片旋转展示效果 环境: 系统:Win10 环境: 一.示例1. 话不多说直接上代码 <html><head><style>/*立方体 ...
最新文章
- 在Kubernetes v1.8中使用RBAC
- 人工智能 60 年技术简史
- 网络游戏服务器端架构设计(转载)
- 回文字符串啊~---太搞了 少年 DXH
- Spring Cloud 与 Dubbo 的完美融合之手「Spring Cloud Alibaba」
- Python删除文件夹和建立文件夹
- 在RDA上使用mbed编译运行KWS
- 通过radius给ppp客户端分配ip地址
- UDK2017下载及编译
- 数字图像处理技术与应用练习题
- python进阶day6
- matlab机器人工具箱 欧拉角,Matlab机器人工具箱(一)
- 计算机管理恢复分区,如何在Windows中擦除恢复分区 | MOS86
- uniapp 图标配置
- 数字 IC 技能拓展(22)原码、反码、补码、移码的区别与联系
- 年中总结 | 愿自己更好面对未来 2022/6
- 微信小程序开发必备 hellow word
- 下载的福音--Metalink
- Firefox火狐里如何使用emule电驴下载
- 复杂网络研究的机遇与挑战