picChange 图片切换特效的函数代码

可扩展的封装方式，方便实现不同特效，源码中给出了淡出效果(fade函数)，和移出效果(move函数)的实现方式。

一句话函数调用，实现图片切换特效。
picChange(“图片ul列表的id” , 切换图片的方法引用 , 图片切换时间 , 图片移动方向);
用最简单的调用方式和最简洁的html代码来实现这个常用的图片切换效果。
使用方法示例：

html代码：


代码如下:

<div id=”win”>
<ul id=”picChange”>
<li><img src=”img/1.jpg” alt=”" /></li>
<li><img src=”img/1.jpg” alt=”" /></li>
……
</ul>
</div>

调用方式：


代码如下:

//直接切换效果
picChange(“picChange”);
//淡出效果
picChange(“picChange”,fade,500);
//向上移出效果
picChange(“picChange”,move,500,”up”);
//向下移出效果
picChange(“picChange”,move,500,”down”);
//向左移出效果
picChange(“picChange”,move,500,”left”);
//向右移出效果
picChange(“picChange”,move,500,”right”);

看Demo猛击这里：http://demo.jb51.net/js/picChange/index.html

打包下载地址

赞 (0)

相关推荐

  • picChange 图片切换特效的函数代码

    可扩展的封装方式,方便实现不同特效,源码中给出了淡出效果(fade函数),和移出效果(move函数)的实现方式. 一句话函数调用,实现图片切换特效. picChange("图片ul列表的id" , 切换图片的方法引用 , 图片切换时间 , 图片移动方向); 用最简单的调用方式和最简洁的html代码来实现这个常用的图片切换效果. 使用方法示例: html代码: 复制代码 代码如下: <div id="win"> <ul id="picCha

  • ES6实现图片切换特效代码

    效果图 demo.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script type="text/javascript"> let arr = ["前端&quo

  • 用html+css+js实现的一个简单的图片切换特效

    用html+css+js实现的一个简单的图片切换特效

    如图所示. 该图片切换特效实现很简单,而且兼容性很好. html页面如下 复制代码 代码如下: <div class="wrapper"> <div id="focus"> <ul> <li><a href="http://www.lanrentuku.com/" target="_blank"><img src="img/01.jpg" a

  • Winform下实现图片切换特效的方法

    本文实例讲述了Winform下实现图片切换特效的方法,是应用程序开发中非常实用的一个功能.分享给大家供大家参考之用.具体方法如下: 本实例源自网络,功能较为齐全.丰富!主要功能代码如下: using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Text; using System.Drawin

  • jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery插件slick实现响应式移动端幻灯片图片切换特效

    jQuery响应式手机端移动端幻灯片图片切换特效插件slick,基于jQuery,功能非常强大,支持左右按钮切换.支持圆点切换.支持自定义切换数量,支持自定义切换速度.支持图片预加载.支持自动播放定义,效果非常的不错,众多的参数自定义支持,觉得可以的可以参考他们的参数配置,还是值得学习使用的. 使用方法: 1.加载插件和jQuery <script src="//code.jquery.com/jquery-1.11.0.min.js"></script> &l

  • 完美兼容各大浏览器的jQuery插件实现图片切换特效

    文件里面的功能注释也写得非常详细(详见zoeDylan.ImgChange-1.0.1.js文件),对网友们的学习是很有帮助的,虽然样式不太好看,大家可以自己写,好好利用哦... JS代码部分: 复制代码 代码如下: (function ($) {     var//申明全局变量         _eleTemp,//缓存变量         _eleThis = $(this),//当前元素         _eleImg = $('.zd-imgChange-img'),//图片组元素   

  • JS实现图片切换特效

    JS实现图片切换特效

    本文实例为大家分享了JS实现图片切换的具体代码,供大家参考,具体内容如下 知识点: 1.window.onload网页全部加载完后再执行 2.获取元素 设置属性 3.临界情况判断 运行效果: 点击上一张下一章切换图片 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l

  • 基于jquery编写的横向自适应幻灯片切换特效的实例代码

    基于jquery编写的横向自适应幻灯片切换特效的实例代码

    复制代码 代码如下: <script type="text/javascript">jQuery(".fullSlide").hover(function() {    jQuery(this).find(".prev,.next").stop(true, true).fadeTo("show", 0.5)},function() {    jQuery(this).find(".prev,.next&q

  • Php Image Resize图片大小调整的函数代码

    复制代码 代码如下: function my_image_resize($src_file, $dst_file, $dst_width=32, $dst_height=32) { if($dst_width <1 || $dst_height <1) { echo "params width or height error !"; exit(); } if(!file_exists($src_file)) { echo $src_file . " is not

  • 一款jquery特效编写的大度宽屏焦点图切换特效的实例代码

    一款jquery特效编写的大度宽屏焦点图切换特效的实例代码

    适用浏览器:ie6.ie7.ie8.360.firefox.chrome.safari.opera.傲游.搜狗.世界之窗.主要代码如下: 复制代码 代码如下: <script type="text/javascript"> jquery(".slider .bd li").first().before( jquery(".slider .bd li").last() ); jquery(".slider").hov

随机推荐