正文
jquery切换代码,jquery 切换
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
JQuery切换样式
这个用jQuery实现一般是添加一个类和删除一个类。
首先要有一个写好的class样式类。通过下面这个代码实现：
var obj2 = $("div"); // 改变样式的对象
obj2.addClass("className"); // 添加样式，className为已经存在一个class名字
obj2.removeClass("className"); // 删除样式
切换样式
JQuery中有一个方法toggle()，JQuery代码如下：
1 toggleBtn.toggle(function(){
2 //元素显示 代码③
3 }, function(){
4 //元素隐藏 代码④
5 })
toggle()方法此处的作用是交替执行代码③和代码④两个函数，如果元素原来是显示的，则隐藏它：如果元素原来是隐藏的，则显示它。此时，toggle()方法主要是控制行为上的重复切换。
另外JQuery还提供了一个toggleClass()方法控制样式上的重复切换。如果类名存在则删除它，如果类名不存在则添加它。例如对p元素进行toggleClass()方法操作。
1 $("p").toggleClass("another"); //重复切换类名“another”
当不断单击“切换样式”按钮时，p元素的class的值就会在“myClass”和“myClass another”之间重复切换。
相关问答
Q1: Jquery幻灯片特效代码分享--鼠标滑过按钮时切换（2）
这篇文章主要介绍了jQuery实现幻灯片焦点图，可实现非常炫目时尚的幻灯片效果，非常具有实用价值，基本能满足你在网页上使用幻灯片(焦点图)效果，具体如下
幻灯片效果描述：用鼠标滑过右下角数字按钮幻灯片进行左右切换进行切换。
自定义切换参数效果：向下切换、切换时间为8秒、鼠标滑过按钮时切换
运行效果截图如下：
具体代码如下
head
titleJquery幻灯片焦点图插件/title
script
src="js/jquery-1.4a2.min.js"
type="text/javascript"/script
script
src="js/jquery.-1.2.1.min.js"
type="text/javascript"/script
script
type="text/javascript"
$(function(){
$("#KinSlideshow").KinSlideshow({
moveStyle:"down",
intervalTime:8,
mouseEvent:"mouseover",
titleFont:{TitleFont_size:14,TitleFont_color:"#FF0000"}
});
})
/script
style
type="text/css"
.code{
height:auto;
padding:20px;
border:1px
solid
#9EC9FE;
background:#ECF3FD;}
.code
pre{
font-family:"Courier
New";font-size:14px;}
.code
pre
code.note{
color:#999}
.code2{border:1px
solid
#FEB0B0;
background:#FFF1F1;
margin-top:10px;}
.code2
pre{
margin-left:20px;
font-size:12px;}
.info{
font-size:12px;
color:#666666;
font-family:Verdana;
margin:20px
50px
0;}
.info
p{
margin:0;
padding:0;
line-height:22px;
text-indent:40px;}
h2.title{
margin:0;
padding:0;
margin-top:50px;
font-size:18px;
font-family:"微软雅黑",Verdana;}
h2.title
span.titleInfo{
font-size:12px;
color:#333;
margin-left:10px;font-family:Verdana;}
h3.title{
font-size:16px;
font-family:"微软雅黑",Verdana;}
.importInfo{
font-family:Verdana;
font-size:14px;}
/style
/head
body
lih3a
href="demo2.html"自定义切换参数效果/a/h3/li
/ol
div
id="KinSlideshow"
style="visibility:hidden;"
a
target="_blank"img
src="images/11.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/23.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/22.png"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/5.jpg"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
a
target="_blank"img
src="images/4.jpg"
alt="Jquery幻灯片焦点图插件"
width="600"
height="300"
//a
/div
/body
/html
希望本文所述对大家的Jquery特效设计有所帮助。
Q2: 急求一个用jquery实现图片自动切换效果的代码，简单详细点的，谢谢。
推荐一个给你，这是代码，详细的你可以看参考资料
$.fn.iFadeSlide = function(iSet){
/*
* iSet可选参数说明:
* iSet.field==幻灯区域内的图片集
* iSet.ico==按钮钩子
* iSet.high==按钮高亮样式
* iSet.interval==图片切换时间
* iSet.leaveTime==不触发鼠标划入事件的最大时间值
* iSet.fadeInTime==淡入时间
* iSet.fadeOutTime==淡出时间
* 调用方式$(document).iFadeSlide({field:'...',ico:'...',...})
*/
iSet = $.extend({high:'high',interval:3000,leaveTime:150,fadeOutTime:400,fadeInTime:400},iSet);
var imgField = $(iSet.field || '#slideimg');
var icoField = $(iSet.ico || '#ico');
var curIndex = 0;
var slideInterval = iSet.interval || 3000;
var hoverTime = iSet.leaveTime || 150;
var fadeOutTime = iSet.fadeOutTime || 400;
var fadeInTime = iSet.fadeInTime || 400;
var icos=null, fastHoverFun = null, autoSlideFun = null, hasIcoHighCls = null, changeFun = null,max=null;;
var icoHtml = 'ul';
max=imgField.size();
//按图片传入对应的按钮
imgField.each(function(i){
icoHtml += 'li' + (i + 1) + '/li';
});
icoHtml += '/ul';
icoField.append(icoHtml);
//淡入淡出函数
changeFun = function(n){
imgField.filter(':visible').fadeOut(fadeOutTime, function(){
imgField.eq(n).fadeIn(fadeInTime)
icos.eq(n).addClass(iSet.high).siblings().removeClass(iSet.high);
});
}
icos = icoField.find('ulli');
//为第一个按键初始化高亮
icos.first().addClass(iSet.high);
//按钮鼠标划入划出事件
icos.hover(function(){
clearInterval(autoSlideFun);
curIndex = icos.index(this);
hasIcoHighName = $(this).hasClass(iSet.high);
//setTimeout避免用户快速(无意识性划过)划过时触发事件
fastHoverFun = setTimeout(function(){
//鼠标划入当前图片按钮时不闪烁
if (!hasIcoHighName) {
changeFun(curIndex);
}
}, hoverTime);
}, function(){
clearTimeout(fastHoverFun);
//自动切换
autoSlideFun = setInterval(function(){
curIndex++;
changeFun(curIndex);
if (curIndex ==max ) {
changeFun(0);
curIndex = 0;
}
}, slideInterval)
}).eq(0).trigger('mouseleave');
//当鼠标划入图片区域时停止切换
imgField.hover(function(){
curIndex = imgField.index(this);
clearInterval(autoSlideFun);
}, function(){
icos.eq(curIndex).trigger('mouseleave');
});
}
