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 相关文章推荐
window.dialogArguments 使用说明
Apr 11 Javascript
$(document).ready(function() {})不执行初始化脚本
Jun 19 Javascript
jQuery Easyui Datagrid实现单行的上移下移及保存移动的结果
Aug 15 Javascript
JavaScript lodash常见用法系列小结
Aug 24 Javascript
通过jquery实现页面的动画效果(实例代码)
Sep 18 Javascript
JS基于递归算法实现1,2,3,4,5,6,7,8,9倒序放入数组中的方法
Jan 03 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
基于vue2的table分页组件实现方法
Mar 20 Javascript
微信小程序列表渲染功能之列表下拉刷新及上拉加载的实现方法分析
Nov 27 Javascript
解决vue中监听input只能输入数字及英文或者其他情况的问题
Aug 30 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
Jul 25 jQuery
webpack是如何实现模块化加载的方法
Nov 06 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
php轻松实现中英文混排字符串截取
2014/05/28 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
php实现仿写CodeIgniter的购物车类
2015/07/29 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
php格式文件打开的四种方法
2018/02/24 PHP
PHP笛卡尔积实现算法示例
2018/07/30 PHP
javascript学习基础笔记之DOM对象操作
2011/11/03 Javascript
通过百度地图获取公交线路的站点坐标的js代码
2012/05/11 Javascript
JavaScript加强之自定义event事件
2013/09/21 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
js事件监听机制(事件捕获)总结
2014/08/08 Javascript
Jquery实现$.fn.extend和$.extend函数
2016/04/14 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
Vue+axios实现统一接口管理的方法
2018/07/23 Javascript
vue使用原生js实现滚动页面跟踪导航高亮的示例代码
2018/10/25 Javascript
js实现unicode码字符串与utf8字节数据互转详解
2019/03/21 Javascript
修改Vue打包后的默认文件名操作
2020/08/12 Javascript
[38:44]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第二局
2016/02/25 DOTA
python3.4下django集成使用xadmin后台的方法
2017/08/15 Python
Python使用wxPython实现计算器
2018/01/30 Python
Python使用pyshp库读取shapefile信息的方法
2018/12/29 Python
使用Python快乐学数学Github万星神器Manim简介
2019/08/07 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
详解Ubuntu环境下部署Django+uwsgi+nginx总结
2020/04/02 Python
Canvas实现贝赛尔曲线轨迹动画的示例代码
2019/04/25 HTML / CSS
Theory美国官网:后现代都市风时装品牌
2018/05/09 全球购物
Under Armour瑞典官方网站:美国高端运动科技品牌
2018/11/21 全球购物
英国设计的甲板鞋和船鞋:Chatham
2018/12/06 全球购物
DogBuddy荷兰:找到你最完美的狗保姆
2019/04/17 全球购物
linux面试题参考答案(7)
2012/10/29 面试题
英文商务邀请信
2014/01/22 职场文书
小学教师师德承诺书
2014/05/23 职场文书
意外伤害赔偿协议书范本
2014/09/28 职场文书
公司租车协议书
2015/01/29 职场文书
勇敢的心观后感
2015/06/09 职场文书
中学生打架检讨书之500字
2019/08/06 职场文书