炫酷的jquery幻灯片插件-SLIDESJS-jQuery插件库
嗨！你可以选择以上合作网站帐号直接登录jQuery插件库
炫酷的jquery幻灯片插件-SLIDESJS
阅读：4853
炫酷的幻灯片插件,SLIDESJS
浏览器兼容性
本着分享经验的精神，如果你觉得该插件的使用方法不正确或有待改进，可以在下面添加上你的使用方法，一经采用，我们会相应地给予1-10jQ币不等的奖励，请确保你的方法是经过验证通过的。
使用步骤1、引用以下的js和css文件&link&rel="stylesheet"&type="text/css"&href="css/wowwindow.css"&
&script&type="text/javascript"&src="js/jquery.min.js"&&/script&
&script&type="text/javascript"&src="js/jquery.wowwindow.min.js"&&/script&2、加入以下JS代码$(function(){
&&&&$(/’#slides/’).slides({
&&&&preload:&true,
&&&&preloadImage:&/’img/loading.gif/’,
&&&&play:&5000,
&&&&pause:&2500,
&&&&hoverPause:&true
}); 参数配置参数名 参数说明 可选值 默认值preload 在幻灯片播放中是否预加载指定图片 true或false falsepreloadImage 预加载图片的路径 路径字符串 /img/loading.gifcontainer 幻灯片容器的ID ID字符串 slides_containergenerateNextPrev 是否自动生成 next/prev 按钮 true或false falsenext next 按钮的样式名 字符串 nextprev prev 按钮的样式名 字符串 prevpagination 如果你不使用分页，可以设置为flase，但不是必须的 true或false generatePagination 是否自动生成分页 true或false truepaginationClass 分页的样式名 字符串 paginationcurrentClass 当前页码的样式名 字符串 currentfadeSpeed 淡入淡出动画的速度 整数，单位为毫秒 350fadeEasing 淡入淡出的效果 字符串，必须要包含 Easing plugin slideSpeed 设置幻灯片滑动的毫秒时间 整数 350slideEasing 滑动的效果 字符串，必须要包含 Easing plugin start 设置从第几张幻灯片开始 整数 1effect 设置幻灯片next/prev切换和分页切换方式的效果 字符串 slidecrossfade Crossfade images in a image based slideshow true或false falserandomize 是否随机切换效果 true或false falseplay 自动播放切换幻灯的时间间隔 整数 0不自动切换pause 当点击 next/prev或分页按钮后暂停多少毫秒才切换图片 整数 hoverPause 当鼠标移动到图片上的时候，幻灯片切换是否暂停 true或false falseautoHeight 是否自动调整高度 true或false falseautoHeightSpeed 设置自动调整高度的时间毫秒数 整数 350bigTarget Set to true and the whole slide will link to next slide on click true或false falseanimationStart 当动画开始时调用的函数 函数 animationComplete 当动画结束时调用的函数 函数
版权声明：自由转载-非商用-非衍生-保持署名（创意共享3.0许可证）
发表日期：
文章链接：
转载请务必加上该链接
jQuery响应式焦点图
jQuery炫酷轮播（爆炸效果）
淘宝首页图片自动轮循效果
最好用的拼音查询，全拼，简拼，汉字查询
极简的焦点图
非常漂亮后台管理
发表时间：@{created_at}
Advertisement
演示地址错误
下载地址错误
炫酷的jquery幻灯片插件-SLIDESJS
我当前jQ币余额：获取中..已下载次数：1951
注：购买该插件的用户当日可免费下载 插件作者可永久免费下载
所需jQ币：0
下载提示：由于文件较小，请直接点击下载，不支持迅雷等下载工具。
对不起，你的
不足，你可以通过
你可以直接下载，不消耗jQ币
你遇到的问题更新时间： 15:05
脚本简介jQuery样式切换器插件switcher是一款名称为switcher的jQuery插件，可随时切换网站的主题背景颜色。
jQuery样式切换器插件switcher来源：
大小:997KB
特别说明：
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
极速下载支持各类多线程下载工具(迅雷)、浏览器(360浏览器)等，适合较大的文件下载！
其他普通下载点限制多线程，仅允许直接点击或另存为下载等单线程下载的软件，较适合小的文件下载！
如有侵犯您的版权，请及时联系(#换@)，我们将尽快处理。
可能感兴趣
& CopyRight , , Inc.All Rights Reserved.您当前的位置：&&&&&正文
jquery如何改变html标签的样式(两种实现方法)
对于如何修饰html标签，这对于js来说，可以通过setAttribute来设置标签的属性，通过getAttribute来得到标签的属性，而在jq中当然也可以实现类似的功能，方法上肯定比js要简化多了。 一　通过修改标签属性来改变它的样式 js设置和获取标签的属性
　 &script type="text/javascript"& window.onload = function () { var attr = document.getElementById("attr"); attr.setAttribute("style", "font-weight:") alert(attr.getAttribute("style")); } &/script&
jq设置和获取标签的属性
&script src="/Scripts/jquery/jquery-1.4.2.min.js" type="text/javascript"&&/script& &script type="text/javascript"& $(function () { $("#attr").attr("style", "color:#ff0000");//单个属性的设置 $("#Avatar").attr({ "class": "banner", "alt": "头像", "src": "/avatar/a118538.jpg?id=" });//多个属性的设置 alert($("#Avatar").attr("src")); //得到指定标签的属性 }); &/script&
值得注意的是JS的window.onload方法块的内容是在JQ的$(function(){})方法块执行完成后，再执行的。 二　通过修改标签的css样式来改变它的样式 看看基本的语法：
$("#attr").addClass("banner");//添加样式 $("#attr").removeClass("banner");//移除样式 　　　　　　　　　　　　　　　　　　//ＪＱ支持连带写法，因为removeClass的返回结果也是一个Jq对象，所以Jq对象的所有方法和事件它都可以使用 $("#attr").removeClass("banner").addClass("bannerOver");
下面是一个例子，当在dd标签上单击时，将当前dd块进行高亮显示
&style& .banner { background: #0094 } .bannerOver { background: #808080; } .cur { background: #ff6a00; } &/style& &script& $(function () { $('#menu_title').find('dd').click(function () { $('#menu_title').find('dd').removeClass('cur'); $(this).addClass('cur'); }) }) &/script& &dl id="menu_title"& &dt&人&/dt& &dd&一种高级动物&/dd& &dt&狗&/dt& &dd&人类的朋友&/dd& &dt&猫&/dt& &dd&猫科动物的祖先&/dd& &/dl&
下面是为表格的隔行变色效果
.odd { background: #808080; } .even { background: #ffd800; } .selected { background: #0094 color: # }　　　　 .hover { background: #808080; }
var $trs = $("#menu_title&dd"); //选择所有行 $trs.filter(":odd").addClass("odd"); //给奇数行添加odd样式 $trs.filter(":even").addClass("even"); //给偶数行添加odd样式
单击行后，让当前行高亮显示
//点击行,添加变色样式 $trs.click(function(e) { $(this).addClass("selected") 　　　　　　　　　.siblings()　　　　　　　　　.removeClass("selected"); })
添加鼠标移入与移出事件
　　　　　　　// 鼠标移入 与移出 $("#menu_title&dd").hover( function () { $(this).addClass("hover"); }, function () { $(this).removeClass("hover"); } );
恩，好了对于标签的样式控制这块内容就讲到这里吧，感谢您的阅读！--博才网
猜你还喜欢的文章
热点文章排行榜
读完这篇文章后，您心情如何？
您还有150字可以输入
更多资讯请点击
热门关键字：，，，
【打印文章】
英国女摄影师坚持7年自拍裸照记录生活(组图)
南极企鹅在看什么？
情侣拍大尺度婚礼视频 堪比三级片
范冰冰82岁鹤发苍颜 还原垂暮武则天
“武当妹妹”舞拳抚琴展清纯侠女气质 网上走红
酒吧开业 竟请美女当街脱衣
• 版权所有 Copyright 2011 All rights reserved.首先，感谢 miqi2214 ，在他的一篇博文中，我发现了《》介绍的是基于jQuery实现的一个选项卡效果，重点体现在HTML里没有内联事件处理程序，而是定义在 js文件里，做到行为与结构的分离。在实际应用过程中，只 要保证选项卡模块结构代码的完整性，就可以任意添加N个同类选项卡，不需要手动在HTML里绑定事件处理程序以及给要隐藏显示的内容层添加ID。 在这里，我又做了部分的修改，增加了选项卡可自动切换功能，以及选项卡点击相应还是鼠标放上后相应的参数，同时依然支持多次调用。现在，我把代码贴上，与众博友共享这是js脚本& 1 /* jquery-fn-accordion v0
& 2 * Based on jQuery JavaScript Library v3
& 3 * [url]/[/url]
& 5 * The author of the following code: miqi2214 , wbpbest
& 7 * Date:
& 9 //注意：如果调试出错，请检查您引用的jquery版本号，当前引用版本为1.3
10 //参数说明：
11 //tabList:包裹选项卡的父级层
12 //tabTxt :包裹内容层的父级层
13 //options.currentTab: 激活选项卡的序列号
14 //options.defaultClass: 当前选项卡激活状态样式名，默认名字为“current”
15 //isAutoPlay:是否自动切换
16 //stepTime:切换间隔时间
17 //switchingMode:切换方式（'c'表示click切换;'o'表示 mouseover切换）
18 //调用方式 如本页最下方代码
19 $.fn.tabs = function(tabList, tabTxt, options) {
var _tabList = $(this).find(tabList);
var _tabTxt = $(this).find(tabTxt);
//为了简化操作，强制规定选项卡必须用li标签实现
var tabListLi = _tabList.find(&li&);
var defaults = { currentTab: 0, defaultClass: &current&, isAutoPlay: false, stepTime: 2000, switchingMode: &c& };
var o = $.extend({}, defaults, options);
var _isAutoPlay = o.isAutoP
var _stepTime = o.stepT
var _switchingMode = o.switchingM
_tabList.find(&li:eq(& + o.currentTab + &)&).addClass(o.defaultClass);
//强制规定内容层必须以div来实现
_tabTxt.children(&div&).each(function(i) {
$(this).attr(&id&, &wp_div& + i);
}).eq(o.currentTab).css({ &display&: &block& });
tabListLi.each(
function(i) {
41& & & & & &
$(tabListLi).mouseover(
42& & & & & & & &
function() {
43& & & & & & & & & &
if (_switchingMode == &o&) {
44& & & & & & & & & & & &
$(this).click();
45& & & & & & & & & &
46& & & & & & & & & &
_isAutoPlay =
47& & & & & & & &
48& & & & & &
49& & & & & &
$(tabListLi).mouseout(
50& & & & & & & &
function() {
51& & & & & & & & & &
_isAutoPlay =
52& & & & & & & &
53& & & & & &
_tabTxt.each(
function(i) {
59& & & & & &
$(_tabTxt).mouseover(
60& & & & & & & &
function() {
61& & & & & & & & & &
_isAutoPlay =
62& & & & & & & &
63& & & & & &
64& & & & & &
$(_tabTxt).mouseout(
65& & & & & & & &
function() {
66& & & & & & & & & &
_isAutoPlay =
67& & & & & & & &
68& & & & & &
//& & else {
tabListLi.each(
function(i) {
75& & & & & &
$(tabListLi).click(
76& & & & & & & &
function() {
77& & & & & & & & & &
if ($(this).className != o.defaultClass) {
78& & & & & & & & & & & &
$(this).addClass(o.defaultClass).siblings().removeClass(o.defaultClass);
79& & & & & & & & & &
80& & & & & & & & & &
if ($.browser.msie) {
81& & & & & & & & & & & &
_tabTxt.children(&div&).eq(i).siblings().css({ &display&: &none& });
82& & & & & & & & & & & &
_tabTxt.children(&div&).eq(i).fadeIn(600);
83& & & & & & & & & &
84& & & & & & & & & & & &
_tabTxt.children(&div&).eq(i).css({ &display&: &block& }).siblings().css({ &display&: &none& }); //标准样式
85& & & & & & & & & &
88& & & & & & & &
89& & & & & &
function selectMe(oo) {
if (oo != null && oo.html() != null && _isAutoPlay) {
97& & & & & &
oo.click();
if (oo.html() == null) {
100& & & & & &
selectMe(_tabList.find(&li&).eq(0));
102& & & &
103& & & & & &
window.setTimeout(selectMe, _stepTime, oo.next());
104& & & &
if (_isAutoPlay) {
107& & & &
//alert(&_isAutoPlay:& + _isAutoPlay);
108& & & &
selectMe(_tabList.find(&li&).eq(o.currentTab));
//alert(_isAutoPlay);
117 var userName = &wbpbest&;
118 var __sti = setI
119 window.setInterval = function(callback, timeout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function() {
122& & & &
callback.apply(null, args);
__sti(_cb, timeout);
126 //window.setInterval(hello,3000,userName);
128 var __sto = setT
129 window.setTimeout = function(callback, timeout, param) {
var args = Array.prototype.slice.call(arguments, 2);
var _cb = function() {
132& & & &
callback.apply(null, args);
__sto(_cb, timeout);
复制代码另外，最初的模样还提供了一个简单的实现方法：01& & $(&.tab&li&).mouseover(function(){
02& & & & $(&.tab&li&).removeClass(&on&);
03& & & & $(this).addClass(&on&);
04& & & & var target = $('#' + this.rel);
05& & & & if (target.size() & 0) {
06& & & & & & $('.details & dl').hide();
07& & & & & & target.show();
08& & & & } else {
09& & & & & & alert('There is no such container.');
10& & & & }
复制代码1& & &div class=&details&&
2& & & & &ul class=&tab&&&li class=&on&& rel=&a1&&&b&商品详情&/b&&/li&&li rel=&a2&&&b&出售记录&/b&&/li&&li rel=&a3&&&b&用户评价&/b&&/li&&li&& /li&&/ul&
3& & & & &dl id=&a1&&&%= @item.contents %&&/dl&
4& & & & &dl id=&a2& style=&display:none&&&/dl&
5& & & & &dl id=&a3& style=&display:none&&&%= @item.descript %&&%= @item.contents %&&/dl&
6& & & & &/div&
7& & & & &/div&
复制代码下载DEMO：
附件: 亲，您没有权限下载或查看附件喔:-)
试试 或 吧！
深情顶帖，楼主加油！
这个编辑器怎么做的？相当不错呀～～
深情顶帖，楼主加油！
深情顶帖，楼主加油！
深情顶帖，楼主加油！
深情顶帖，楼主加油！
rollce1983
深情顶帖，楼主加油！
深情顶帖，楼主加油！
深情顶帖，楼主加油！
Powered by
CopyRight &&!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"&
&html xmlns="http://www.w3.org/1999/xhtml" lang="en-uk"&
&title&jquery styleswitcher - http://www.codefans.net&/title&
&meta http-equiv="Content-Type" content="text/charset=utf-8" /&
&link rel="stylesheet" type="text/css" href="styles1.css" title="styles1" media="screen" /&
&link rel="alternate stylesheet" type="text/css" href="styles2.css" title="styles2" media="screen" /&
&link rel="alternate stylesheet" type="text/css" href="styles3.css" title="styles3" media="screen" /&
&script type="text/javascript" src="jquery.min.js"&&/script&
&script type="text/javascript" src="styleswitch.js"&&/script&
&h1&Stylesheet switcher using jQuery&/h1&
&p&This is a simple example of my stylesheet switcher which is very simple thanks to the power of &a href="/"&jQuery&/a&.&/p&
&p&&strong&Update 22/12/2008:&/strong& Updated to work with newest jQuery 1.3 beta (changed [@title] to [title])&/p&
&p&&strong&Update 25/08/2006:&/strong& Updated to work with persistant stylesheets and new version of jQuery (r226 from SVN) [thanks Andrea]&/p&
&p&&strong&Update 20/08/2006:&/strong& Updated to work with new version of jQuery (r200 from SVN) ["*=style" replaced with "=*style*"]&/p&
Currently active stylesheet:
&span id="st1"&样式1&/span&
&span id="st2"&样式2&/span&
&span id="st3"&样式3&/span&
&p&Choose a different stylesheet:&/p&
&li&&a href="serversideSwitch.html?style=style1" rel="styles1" class="styleswitch"&样式1&/a&&/li&
&li&&a href="serversideSwitch.html?style=style2" rel="styles2" class="styleswitch"&样式2&/a&&/li&
&li&&a href="serversideSwitch.html?style=style3" rel="styles3" class="styleswitch"&样式3&/a&&/li&
&p&Please view source to see how it works or see the &a href="/article/switch-stylesheets-with-jquery"&full article&/a& about this script for more information. You can download the relevant Javascript here: &a href="styleswitch.js"&styleswitch.js&/a&, &a href="jquery.js"&jquery.js&/a&&/p&
┏━━━━━━━━━━━━━━━━━━━━━┓
源 码 爱 好 者
┣━━━━━━━━━━━━━━━━━━━━━┫
提供源码发布与下载
http://www.codefans.net
互助、分享、提高
┗━━━━━━━━━━━━━━━━━━━━━┛
所需金币： 1
文件大小：0.02MB
您当前剩余金币：0}