js实现索引图片切换效果


Posted in Javascript onNovember 21, 2015

本文实例讲述了js实现索引图片切换效果的代码。分享给大家供大家参考。具体如下:
运行效果截图如下:

js实现索引图片切换效果

具体代码如下

html代码:

<div id="slideshowHolder">
    <img src="img/1.jpg" />
    <img src="img/2.jpg" />
    <img src="img/3.jpg" />
    </div>

css代码:

.ft-prev, .ft-next {
      background-color: #000;
      padding: 0 10px;
      color:#fff;
    }

js代码:

$(document).ready(function () {
      $('#slideshowHolder').jqFancyTransitions({
        effect: '', // wave, zipper, curtain
        width: 500, // width of panel
        height: 700, // height of panel
        strips: 20, // number of strips
        delay: 5000, // delay between images in ms
        stripDelay: 50, // delay beetwen strips in ms
        titleOpacity: 0.7, // opacity of title
        titleSpeed: 1000, // speed of title appereance in ms
        position: 'alternate', // top, bottom, alternate, curtain
        direction: 'fountainAlternate', // left, right, alternate, random, fountain, fountainAlternate
        navigation: true, // prev and next navigation buttons
        links: true // show images as links
      });
    });

以上就是js实现索引图片切换效果的主要代码,希望对大家动手实现图片切换效果。

Javascript 相关文章推荐
JavaScript 密码强度判断代码
Sep 05 Javascript
传智播客学习之java 反射
Nov 22 Javascript
点击隐藏页面左栏或右栏实现js代码
Apr 01 Javascript
JS获取当前网址、主机地址项目根路径
Nov 19 Javascript
淘宝网提供的国内NPM镜像简介和使用方法
Apr 17 Javascript
纯js实现重发验证码按钮倒数功能
Apr 21 Javascript
jQuery实现简洁的轮播图效果实例
Sep 07 Javascript
bootstrap动态添加面包屑(breadcrumb)及其响应事件的方法
May 25 Javascript
JavaScript定义函数的三种实现方法
Sep 23 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
JavaScript设计模式之责任链模式实例分析
Jan 16 Javascript
JS如何在不同平台实现多语言方式
Jul 16 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
Nov 21 #Javascript
javascript实现Email邮件显示与删除功能
Nov 21 #Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
Nov 20 #Javascript
Jquery ajax基础教程
Nov 20 #Javascript
谈谈Jquery ajax中success和complete有哪些不同点
Nov 20 #Javascript
jQuery实现带玻璃流光质感的手风琴特效
Nov 20 #Javascript
JQuery.Ajax()的data参数类型实例详解
Nov 20 #Javascript
You might like
一个程序下载的管理程序(一)
2006/10/09 PHP
使用PHP实现密保卡功能实现代码&amp;lt;打包下载直接运行&amp;gt;
2011/10/09 PHP
解析php安全性问题中的:Null 字符问题
2013/06/21 PHP
深入理解JavaScript系列(14) 作用域链介绍(Scope Chain)
2012/04/12 Javascript
浅谈jquery的map()和each()方法
2016/06/12 Javascript
如何判断出一个js对象是否一个dom对象
2016/11/24 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
vue绑定设置属性的多种方式(5)
2017/08/16 Javascript
ES6学习教程之模板字符串详解
2017/10/09 Javascript
vue translate peoject实现在线翻译功能【新手必看】
2018/06/07 Javascript
vue数据操作之点击事件实现num加减功能示例
2019/01/19 Javascript
Vue 使用formData方式向后台发送数据的实现
2019/04/14 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
javascript的惯性运动实现代码实例
2019/09/07 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
2020/05/06 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
2020/07/16 Javascript
vscode 使用Prettier插件格式化配置使用代码详解
2020/08/10 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
[04:32]玩具屠夫中文语音节选
2020/08/23 DOTA
[01:19:46]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第一场 2月28日
2021/03/11 DOTA
Python修改Excel数据的实例代码
2013/11/01 Python
python进阶教程之循环对象
2014/08/30 Python
Python使用pip安装报错:is not a supported wheel on this platform的解决方法
2018/01/23 Python
利用django-suit模板添加自定义的菜单、页面及设置访问权限
2018/07/13 Python
利用python修改json文件的value方法
2018/12/31 Python
python使用Paramiko模块实现远程文件拷贝
2019/04/30 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
详解python with 上下文管理器
2020/09/02 Python
初中三好学生自我鉴定
2014/04/07 职场文书
大学生就业自荐书
2014/06/16 职场文书
关于读书的活动方案
2014/08/14 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
2014年人民警察入党思想汇报
2014/10/12 职场文书
4S店收银员岗位职责
2015/04/07 职场文书
学生检讨书怎么写
2015/05/07 职场文书
对象析构函数__del__在Python中何时使用
2022/03/22 Python