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 相关文章推荐
jQuery使用手册之三 CSS操作
Mar 24 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
js 完美图片新闻轮转效果,腾讯大粤网首页图片轮转改造而来
Nov 21 Javascript
javascript 事件处理示例分享
Dec 31 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
浅析JSONP技术原理及实现
Jun 08 Javascript
JQuery 动态生成Table表格实例代码
Dec 02 Javascript
angular.js + require.js构建模块化单页面应用的方法步骤
Jul 19 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
js闭包的9个使用场景
Dec 29 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获取网络文件的实现代码
2010/01/01 PHP
第4章 数据处理-php数组的处理-郑阿奇
2011/07/04 PHP
PHP函数func_num_args用法实例分析
2015/12/07 PHP
在云虚拟主机部署thinkphp5项目的步骤详解
2017/12/21 PHP
仿163填写邮件地址自动显示下拉(无优化)
2008/11/05 Javascript
JS在可编辑的div中的光标位置插入内容的方法
2014/11/20 Javascript
JavaScript中常用的六种互动方法示例
2015/03/13 Javascript
浅谈JavaScript字符串与数组
2015/06/03 Javascript
浅谈JavaScript字符串拼接
2015/06/25 Javascript
js HTML5 Ajax实现文件上传进度条功能
2016/02/13 Javascript
js验证框架实现代码分享
2016/05/18 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
2016/07/08 Javascript
微信小程序 实现拖拽事件监听实例详解
2016/11/16 Javascript
JavaScript 基础表单验证示例(纯Js实现)
2017/07/20 Javascript
浅谈React和Redux的连接react-redux
2017/12/04 Javascript
JS实现常见的查找、排序、去重算法示例
2018/05/21 Javascript
页面点击小红心js实现代码
2018/05/26 Javascript
原生JS实现轮播图效果
2018/10/12 Javascript
vue使用swiper实现左右滑动切换图片
2020/10/16 Javascript
用Python进行基础的函数式编程的教程
2015/03/31 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
python使用fork实现守护进程的方法
2017/11/16 Python
浅谈python3中input输入的使用
2019/08/02 Python
python yield和Generator函数用法详解
2020/02/10 Python
python实现双人五子棋(终端版)
2020/12/30 Python
Python 实现一个简单的web服务器
2021/01/03 Python
CSS3制作半透明边框(Facebox)类似渐变
2012/12/09 HTML / CSS
药学专业毕业生求职信
2013/10/20 职场文书
优秀小学生家长评语
2014/01/30 职场文书
建议书怎么写
2014/03/12 职场文书
2015年国庆节活动总结
2015/03/23 职场文书
酒店开业主持词
2015/07/02 职场文书
《乌鸦喝水》教学反思
2016/02/19 职场文书
Java SSH 秘钥连接mysql数据库的方法
2021/06/28 Java/Android
yyds什么意思?90后已经听不懂00后讲话了……
2022/02/03 杂记
R9700摩机记
2022/04/05 无线电