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实现索引图片切换效果的主要代码,希望对大家动手实现图片切换效果。

本页内容版权归属为原作者,如有侵犯您的权益,请通知我们删除。
首先先说一说$. browser browser就是用来获取浏览器基本信息的。 jQuery 从 1.9 版开始,移除了 $.browser 和 $.browser.version , 取而代之的是 $.support 。 在更新的 2.0 版本中,将不再支持 IE 6/7/8。 以后,如果用户需要支持 IE 6/7/8,只能使用 jQuery 1.9。 解决方法 :加入以下js即可 (function(jQuery){ if(jQuery.browser) return; jQuery.browser
一、主要介绍: 这题采用之前的技术,根据table的rows属性,获得数组,然后对数组设置样式,所以颜色就出来了。 1).全选复选框 ,通过 var nodess=document.getElementsByName("mail"); for(var x=0;xnodess.length;x++){nodess[x].checked=nodes.checked;} 复选框函数进行 2).按钮全选,反选,和取消全选, 可以用一个函数写,传入不同的参数AllBybtn(num)类型即可 函数里面 根据js的特
本文实例讲述了jQuery实现分隔条左右拖动功能的实现代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体内容如下 !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"html head title New Document /title script type="text/javascript" src="jquery.min.js"/scrip

jquery背景跟随鼠标滑动导航 - 2015-11-21 17:11:04

本文实例讲述了支持背景图片上下滑动的竖向jQuery菜单导航特效代码,分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下 html xmlns="http://www.w3.org/1999/xhtml"headmeta charset="gb2312"title左边跟随鼠标滑动导航/titlemeta name="keywords" content="滑动导航" /meta name="description" content="左边跟随鼠标滑动导航" /style/*---------
一个纯jq形式的横向轮播焦点图,可点击小圆点或者左右按钮进行切换,属于定宽类型。改成自适应宽度的也不难,将css里面的bannerCon宽度改为百分比,再在js里面将ul和li的宽度跟随父级容器的宽度变化即可,需要用到$(window).resize。 兼容到IE6+以上浏览器,有轮播速度和切换间隔两个参数可以改。效果图如下: Html代码如下: !doctype htmlhtml lang="zh-CN"head meta charset="utf-8" titlebanner图/title link
WebSocket是HTML5开始提供的一种浏览器与服务器间进行全双工通讯的网络技术。在WebSocket API中,浏览器和服务器只需要要做一个握手(handshaking)的动作,然后,浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 WebSocket是一个通信的协议,分为服务器和客户端。服务器放在后台,保持与客户端的长连接,完成双方通信的任务。客户端一般都是实现在支持HTML5浏览器核心中,通过提供JavascriptAPI使用网页可以建立websocket连接。 在我写这
本文实例讲述了js鼠标点击图片切换效果实现代码。分享给大家供大家参考。具体如下: 运行效果截图如下: 具体代码如下: html代码: div id="menuWrapper" class="menuWrapper bg1" ul class="menu" id="menu" li class="bg1" a id="bg1" href=#> css代码: ul.menu li a{ float:left; width:265px; height:50px; margin-top:450px; text-a
如果希望自己的浏览器禁止运行网页上的 JavaScript 脚本的话,可以按照下面的方法将自己的浏览器设置一下: 【1】:打开 IE 浏览器,然后选择 【工具】-- 【Internet 选项】--【安全】--【自定义级别】然后在打开的窗体中向下拉滚动条,找到 "脚本" 选项,里面的第一项就是 Java 小程序脚本,选择下面三个选项中的"禁用"就可以了.如下图: 【2】:不过要注意,一旦将这一项禁用后,虽然可以提高了系统的安全性,但是网页的一些功能也会被屏蔽掉,比如,在你写的程序中有用 JavaScript
BootStrap学习从现在开始,前端开发框架Bootstrap,可大大简化网站开发过程,从而深受广大开发者的喜欢。本文总结了Bootstrap之所以广泛流传的11大原因。如果你还没有使用Twitter Bootstrap,建议你去了解一下。小编也是最近才有所发现的,不过有更好的消息,在前两天微软发布的VS2013正式版中,也已经将BootStrap3.0的版本加入了额,连微软都看到bootStrap的强大,而且它的确很不错,所以我也不得不学习。 bootstrap深受广大
随着网络的发展,网速和机器速度的提高,越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解释型语言,所以能无法达到和C/Java之类的水平,限制了它能在客户端所做的事情,为了能改进他的性能,我想基于我以前给JavaScript做过的很多测试来谈谈自己的经验,希望能帮助大家改进自己的JavaScript脚本性能。 前言 一直在学习javascript,也有看过《犀利开发Jquery内核详解与实践》,对这本书的评价只有两个字犀利,可能是对javascript理