Home php教程 php手册 JavaScript 图片滑动切换效果

JavaScript 图片滑动切换效果

Jul 11, 2016 pm 08:00 PM
javascript code switch picture Open source Effect slide programming programming language software development

序一(08/07/06)

看到alibaba的一个图片切换效果,感觉不错,想拿来用用。但代码一大堆的,看着昏,还是自己来吧。
由于有了做图片滑动展示效果的经验,做这个就容易得多了。


序二(09/03/19)

自写了Tween缓动之后就很想重新写过这个效果,近来有点时间,终于可以动手了。
除了改成Tween缓动,也改进了程序算法,不过原理还是一样的。


效果预览

<script> new SlideTrans("idContainer", "idSlider", 3, { Vertical: false }).Run(); </script>
仿淘宝/alibaba图片切换:
  • 图片上传预览
  • 多级联动菜单
  • 浮动定位提示
  • 数据延迟加载
  • 简便文件上传

<script> var nums = [], timer, n = $$("idSlider2").getElementsByTagName("li").length, st = new SlideTrans("idContainer2", "idSlider2", n, { onStart: function(){//设置按钮样式 forEach(nums, function(o, i){ o.className = st.Index == i ? "on" : ""; }) } }); for(var i = 1; i <= n; AddNum(i++)){}; function AddNum(i){ var num = $$("idNum").appendChild(document.createElement("li")); num.innerHTML = i--; num.onmouseover = function(){ timer = setTimeout(function(){ num.className = "on"; st.Auto = false; st.Run(i); }, 200); } num.onmouseout = function(){ clearTimeout(timer); num.className = ""; st.Auto = true; st.Run(); } nums[i] = num; } st.Run(); $$("idAuto").onclick = function(){ if(st.Auto){ st.Auto = false; st.Stop(); this.value = "自动"; }else{ st.Auto = true; st.Run(); this.value = "停止"; } } $$("idNext").onclick = function(){ st.Next(); } $$("idPre").onclick = function(){ st.Previous(); } $$("idTween").onchange = function(){ switch (parseInt(this.value)){ case 2 : st.Tween = Tween.Bounce.easeOut; break; case 1 : st.Tween = Tween.Back.easeOut; break; default : st.Tween = Tween.Quart.easeOut; } } </script>

 


程序说明

原理就是通过不断设置滑动对象的left(水平切换)和top(垂直切换)来实现图片切换的动态效果。

首先需要一个容器,程序会自动设置容器overflow为hidden,如果不是相对或绝对定位会同时设置position为relative,
滑动对象会设置为绝对定位:

var p = CurrentStyle(this._container).position;
== "relative" || p == "absolute" || (this._container.style.position = "relative");
this._container.style.overflow = "hidden";
this._slider.style.position = "absolute";


如果没有设置Change切换参数属性,会自动根据滑动对象获取:

this.Change = this.options.Change ? this.options.Change :
    
this._slider[bVertical ? "offsetHeight" : "offsetWidth"/ this._count;


执行Run方法就会开始进入切换,其中有一个可选参数用来重新设置要切换的图片索引:

index == undefined && (index = this.Index);
index 
 0 && (index = this._count - 1|| index >= this._count && (index = 0);

之后就到设置使用tween缓动时需要的参数了,
包括_target(目标值)、_t(时间)、_b(初始值)和_c(变化量):

JavaScript 图片滑动切换效果JavaScript 图片滑动切换效果Code


还有Duration(持续时间)是自定义属性。

参数设置好后就执行Move程序开始移动了。
里面很简单,首先判断_c是否有值(等于0表示不需要移动)和_t是否到达Duration,
未满足条件就继续移动,否则直接移动到目标值并进行下一次切换:

JavaScript 图片滑动切换效果JavaScript 图片滑动切换效果Code

 

使用说明

实例化需要3个参数,分别是容器对象,滑动对象和切换数量,之后可以直接执行Run方法运行:

new SlideTrans("idContainer""idSlider"3).Run();


还有以下可选属性:
Vertical: true,//是否垂直方向(方向不能改)
Auto:  true,//是否自动
Change:  0,//改变量
Duration: 50,//滑动持续时间
Time:  10,//滑动延时
Pause:  2000,//停顿时间(Auto为true时有效)
onStart: function(){},//开始转换时执行
onFinish: function(){},//完成转换时执行
Tween:  Tween.Quart.easeOut//tween算子

其中Vertical初始化后就不能修改,Tween算子可参照这里的缓动效果选择(实例中选了其中3个)。

还有提供了以下方法:
Next: 切换下一个
Previous: 切换上一个
Stop: 停止自动切换
还有上面说到的Run

 

程序代码

JavaScript 图片滑动切换效果JavaScript 图片滑动切换效果Code

 


下载测试代码

其他图片展示效果:
JavaScript 图片变换效果(ie only)
JavaScript 图片滑动展示效果

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Roblox: Bubble Gum Simulator Infinity - How To Get And Use Royal Keys
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Nordhold: Fusion System, Explained
1 months ago By 尊渡假赌尊渡假赌尊渡假赌
Mandragora: Whispers Of The Witch Tree - How To Unlock The Grappling Hook
4 weeks ago By 尊渡假赌尊渡假赌尊渡假赌
Clair Obscur: Expedition 33 - How To Get Perfect Chroma Catalysts
2 weeks ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Java Tutorial
1677
14
PHP Tutorial
1278
29
C# Tutorial
1257
24
OPPO Find X7 is a masterpiece! Capture your every moment with images OPPO Find X7 is a masterpiece! Capture your every moment with images Aug 07, 2024 pm 07:19 PM

In this fast-paced era, OPPO Find X7 can use its imaging power to let us savor every beautiful moment in life. Whether it's magnificent mountains, rivers, lakes, or seas, warm family gatherings, or encounters and surprises on the street, it can help you record them with "unparalleled" picture quality. From the outside, the camera Deco design of Find It looks very recognizable and has a high-end feel. The inside is also unique, starting with the basic hardware configuration. FindX7 maintains the previous

PHP in Action: Real-World Examples and Applications PHP in Action: Real-World Examples and Applications Apr 14, 2025 am 12:19 AM

PHP is widely used in e-commerce, content management systems and API development. 1) E-commerce: used for shopping cart function and payment processing. 2) Content management system: used for dynamic content generation and user management. 3) API development: used for RESTful API development and API security. Through performance optimization and best practices, the efficiency and maintainability of PHP applications are improved.

The Enduring Relevance of PHP: Is It Still Alive? The Enduring Relevance of PHP: Is It Still Alive? Apr 14, 2025 am 12:12 AM

PHP is still dynamic and still occupies an important position in the field of modern programming. 1) PHP's simplicity and powerful community support make it widely used in web development; 2) Its flexibility and stability make it outstanding in handling web forms, database operations and file processing; 3) PHP is constantly evolving and optimizing, suitable for beginners and experienced developers.

Unleash Your Inner Programmer: C for Absolute Beginners Unleash Your Inner Programmer: C for Absolute Beginners Oct 11, 2024 pm 03:50 PM

C is an ideal language for beginners to learn programming, and its advantages include efficiency, versatility, and portability. Learning C language requires: Installing a C compiler (such as MinGW or Cygwin) Understanding variables, data types, conditional statements and loop statements Writing the first program containing the main function and printf() function Practicing through practical cases (such as calculating averages) C language knowledge

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Problem-Solving with Python: Unlock Powerful Solutions as a Beginner Coder Problem-Solving with Python: Unlock Powerful Solutions as a Beginner Coder Oct 11, 2024 pm 08:58 PM

Pythonempowersbeginnersinproblem-solving.Itsuser-friendlysyntax,extensivelibrary,andfeaturessuchasvariables,conditionalstatements,andloopsenableefficientcodedevelopment.Frommanagingdatatocontrollingprogramflowandperformingrepetitivetasks,Pythonprovid

The Key to Coding: Unlocking the Power of Python for Beginners The Key to Coding: Unlocking the Power of Python for Beginners Oct 11, 2024 pm 12:17 PM

Python is an ideal programming introduction language for beginners through its ease of learning and powerful features. Its basics include: Variables: used to store data (numbers, strings, lists, etc.). Data type: Defines the type of data in the variable (integer, floating point, etc.). Operators: used for mathematical operations and comparisons. Control flow: Control the flow of code execution (conditional statements, loops).

Python Power, Simplified: A Beginner-Friendly Approach to Programming Python Power, Simplified: A Beginner-Friendly Approach to Programming Oct 11, 2024 pm 04:53 PM

Getting Started with Python Programming Install Python: Download and install from the official website. HelloWorld!: Use print("HelloWorld!") to print the first line of code. Practical case: Calculate the area of ​​a circle: Use π (3.14159) and the radius to calculate the area of ​​the circle. Variables and data types: Use variables to store data. Data types in Python include integers, floating point numbers, strings, and Boolean values. Expressions and assignments: Use operators to connect variables, constants, and functions, and use the assignment operator (=) to assign values ​​to variables. Control flow: if-else statement: execute different code blocks based on conditions, determine odd

See all articles