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打开新窗口同时关闭旧窗口
Jan 16 Javascript
JavaScript window.setTimeout() 的详细用法
Nov 04 Javascript
javascript 匿名函数的理解(透彻版)
Jan 28 Javascript
SeaJS入门教程系列之SeaJS介绍(一)
Mar 03 Javascript
jquery中$each()方法的使用指南
Apr 30 Javascript
JavaScript常用函数工具集:lao-utils
Mar 01 Javascript
jQuery中的each()详细介绍(推荐)
May 25 Javascript
vue2.0父子组件及非父子组件之间的通信方法
Jan 21 Javascript
Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件
Jun 29 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
浅入深出Vue之自动化路由
Aug 06 Javascript
微信小程序以ssm做后台开发的实现示例
Apr 08 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&amp;java(一)
2006/10/09 PHP
PHP优于Node.js的五大理由分享
2012/09/15 PHP
自己写了一个php检测文件编码的函数
2014/04/21 PHP
PHP 面向对象程序设计(oop)学习笔记 (二) - 静态变量的属性和方法及延迟绑定
2014/06/12 PHP
img onload事件绑定各浏览器均可执行
2012/12/19 Javascript
在jQuery中 关于json空对象筛选替换
2013/04/15 Javascript
javascript 模拟坦克大战游戏(html5版)附源码下载
2014/04/08 Javascript
js判断变量初始化的三种形式及推荐用的形式
2014/07/22 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
javascript显示倒计时控制按钮的简单实现
2016/06/07 Javascript
jQuery中的一些小技巧
2017/01/18 Javascript
JS滚动到指定位置导航栏固定顶部
2017/07/03 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
2017/12/22 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
[03:55]2014DOTA2国际邀请赛 Fnatic经理采访赢DK在情理之中
2014/07/10 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
python爬虫入门教程之点点美女图片爬虫代码分享
2014/09/02 Python
朴素贝叶斯算法的python实现方法
2014/11/18 Python
Python执行时间的计算方法小结
2017/03/17 Python
Python对字符串实现去重操作的方法示例
2017/08/11 Python
神经网络理论基础及Python实现详解
2017/12/15 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
Python使用cx_Oracle模块操作Oracle数据库详解
2018/05/07 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python itchat给指定联系人发消息的方法
2019/06/11 Python
Python实现的统计文章单词次数功能示例
2019/07/08 Python
如何实现在jupyter notebook中播放视频(不停地展示图片)
2020/04/23 Python
浅析PyCharm 的初始设置(知道)
2020/10/12 Python
html5 冒号分隔符对齐的实现
2019/07/31 HTML / CSS
来自世界上最好大学的在线课程:edX
2018/10/16 全球购物
PHP笔试题
2012/02/22 面试题
英语系毕业生自荐信
2013/10/31 职场文书
服务理念口号
2014/06/11 职场文书
授权委托书(公民个人适用)
2014/09/19 职场文书
windows server 2012安装FTP并配置被动模式指定开放端口
2022/06/10 Servers