jquery幻灯切换代码 – 山猫的博客

首先来看最后代码：

var rac=jQuery.noConflict();
rac(document).ready(function(){
var zo1a = rac(“.zo1 li”);
zo1a.eq(0).css(“background-position”,”0px 0px”);
zo1a.eq(1).css(“background-position”,”-292px -46px”);
zo1a.eq(2).css(“background-position”,”-292px -92px”);
zo1a.eq(3).css(“background-position”,”-292px -138px”);
zo1a.eq(4).css(“background-position”,”-292px -184px”);
zo1a.eq(5).css(“background-position”,”-292px -230px”);
/*zo1a.eq(0).hover(function(){rac(this).css(“background-position”,”0px 0px”);},function(){rac(this).css(“background-position”,”-292px 0px”);});
zo1a.eq(1).hover(function(){rac(this).css(“background-position”,”0px -46px”);},function(){rac(this).css(“background-position”,”-292px -46px”);});
zo1a.eq(2).hover(function(){rac(this).css(“background-position”,”0px -92px”);},function(){rac(this).css(“background-position”,”-292px -92px”);});
zo1a.eq(3).hover(function(){rac(this).css(“background-position”,”0px -138px”);},function(){rac(this).css(“background-position”,”-292px -138px”);});
zo1a.eq(4).hover(function(){rac(this).css(“background-position”,”0px -184px”);},function(){rac(this).css(“background-position”,”-292px -184px”);});
zo1a.eq(5).hover(function(){rac(this).css(“background-position”,”0px -230px”);},function(){rac(this).css(“background-position”,”-292px -230px”);});*/
zo1a.children(“a”).css(“color”,”#fff”).css(“font-weight”,”bold”);
var zocon = rac(“.right_left”).children(“div”).hide();
zocon.eq(0).show();
zo1a.click(function(){
var i=0;
rac(this).each(function(){
i +=rac(this).index();
zocon.hide();
zocon.eq(i).show();
});
switch(i)
{
case 0:
zo1a.eq(0).css(“background-position”,”0px 0px”);
zo1a.eq(3).css(“background-position”,”-292px -138px”);
zo1a.eq(4).css(“background-position”,”-292px -184px”);
zo1a.eq(5).css(“background-position”,”-292px -230px”);
zo1a.eq(1).css(“background-position”,”-292px -46px”);
zo1a.eq(2).css(“background-position”,”-292px -92px”);
break
case 1:
zo1a.eq(0).css(“background-position”,”-292px 0px”);
zo1a.eq(2).css(“background-position”,”-292px -92px”);
zo1a.eq(3).css(“background-position”,”-292px -138px”);
zo1a.eq(4).css(“background-position”,”-292px -184px”);
zo1a.eq(5).css(“background-position”,”-292px -230px”);
zo1a.eq(1).css(“background-position”,”0px -46px”);
break
case 2:
zo1a.eq(0).css(“background-position”,”-292px 0px”);
zo1a.eq(3).css(“background-position”,”-292px -138px”);
zo1a.eq(4).css(“background-position”,”-292px -184px”);
zo1a.eq(5).css(“background-position”,”-292px -230px”);
zo1a.eq(1).css(“background-position”,”-292px -46px”);
zo1a.eq(2).css(“background-position”,”0px -92px”);
break
case 3:
zo1a.eq(0).css(“background-position”,”-292px 0px”);
zo1a.eq(3).css(“background-position”,”0px -138px”);
zo1a.eq(4).css(“background-position”,”-292px -184px”);
zo1a.eq(5).css(“background-position”,”-292px -230px”);
zo1a.eq(1).css(“background-position”,”-292px -46px”);
zo1a.eq(2).css(“background-position”,”-292px -92px”);
break
case 4:
zo1a.eq(0).css(“background-position”,”-292px 0px”);
zo1a.eq(3).css(“background-position”,”-292px -138px”);
zo1a.eq(4).css(“background-position”,”0px -184px”);
zo1a.eq(5).css(“background-position”,”-292px -230px”);
zo1a.eq(1).css(“background-position”,”-292px -46px”);
zo1a.eq(2).css(“background-position”,”-292px -92px”);
break
case 5:
zo1a.eq(5).css(“background-position”,”0px -230px”);
zo1a.eq(0).css(“background-position”,”-292px 0px”);
zo1a.eq(3).css(“background-position”,”-292px -138px”);
zo1a.eq(4).css(“background-position”,”-292px -184px”);
zo1a.eq(1).css(“background-position”,”-292px -46px”);
zo1a.eq(2).css(“background-position”,”-292px -92px”);
break
default:
};
});
});

/*上面是jquery*/

<style>
.cat1 a:hover{ display:block; height:46px; width:100%;background:url(/wp/img/zonecenter.jpg) 0px 0px no-repeat; cursor:pointer}
.cat2 a:hover{ display:block; height:46px; width:100%;background:url(/wp/img/zonecenter.jpg) 0px -46px no-repeat; cursor:pointer}
.cat3 a:hover{ display:block; height:46px; width:100%;background:url(/wp/img/zonecenter.jpg) 0px -92px no-repeat; cursor:pointer}
.cat4 a:hover{ display:block; height:46px; width:100%;background:url(/wp/img/zonecenter.jpg) 0px -138px no-repeat; cursor:pointer}
.cat5 a:hover{ display:block; height:46px; width:100%;background:url(/wp/img/zonecenter.jpg) 0px -184px no-repeat; cursor:pointer}
.cat6 a:hover{ display:block; height:46px; width:100%;background:url(/wp/img/zonecenter.jpg) 0px -230px no-repeat; cursor:pointer}
</style>

/*上面是css*/

/*下面是html*/

<div>
<ul>
<li><a><b>Aa cute</b><span>fsdfs dfsdf</span></a></li>
<li><a><b>Aa cute</b><span>fsdfs dfsdf</span></a></li>
<li><a><b>Aa cute</b><span>fsdfs dfsdf</span></a></li>
<li><a><b>Aa cute</b><span>fsdfs dfsdf</span></a></li>
<li><a><b>Aa cute</b><span>fsdfs dfsdf</span></a></li>
<li><a><b>Aa cute</b><span>fsdfs dfsdf</span></a></li>

</ul>

</div>

<div>//class=”right_left”
<div id=”zo1″>
<div style=”padding:10px; width:340px”>111111111Mcsweeney’s scenester readymade twee artisan portland retro mixtape, cardigan yr whatever american apparel. Brooklyn fixie helvetica, freegan portland seitan carles blog messenger bag american apparel fanny pack mlkshk 8-bit. Seitan cliche you probably haven’t heard of them mlkshk etsy. Echo park etsy artisan irony, wes anderson scenester keytar beard brooklyn dreamcatcher. Yr viral jean shorts seitan.</div>
<img src=”/wp/img/zoneimg1.jpg” width=”306″ style=” margin:7px 6px 0px 0px”/>
</div>
<div id=”zo2″>
<div style=”padding:10px; width:340px”>22222222Mcsweeney’s scenester readymade twee artisan portland retro mixtape, cardigan yr whatever american apparel. Brooklyn fixie helvetica, freegan portland seitan carles blog messenger bag american apparel fanny pack mlkshk 8-bit. Seitan cliche you probably haven’t heard of them mlkshk etsy. Echo park etsy artisan irony, wes anderson scenester keytar beard brooklyn dreamcatcher. Yr viral jean shorts seitan.</div>
<img src=”/wp/img/zoneimg1.jpg” width=”306″ style=” margin:7px 6px 0px 0px”/>
</div>
<div id=”zo3″>
<div style=”padding:10px; width:340px”>33333333333Mcsweeney’s scenester readymade twee artisan portland retro mixtape, cardigan yr whatever american apparel. Brooklyn fixie helvetica, freegan portland seitan carles blog messenger bag american apparel fanny pack mlkshk 8-bit. Seitan cliche you probably haven’t heard of them mlkshk etsy. Echo park etsy artisan irony, wes anderson scenester keytar beard brooklyn dreamcatcher. Yr viral jean shorts seitan.</div>
<img src=”/wp/img/zoneimg1.jpg” width=”306″ style=” margin:7px 6px 0px 0px”/>
</div><div id=”zo4″>
<div style=”padding:10px; width:340px”>444444444444Mcsweeney’s scenester readymade twee artisan portland retro mixtape, cardigan yr whatever american apparel. Brooklyn fixie helvetica, freegan portland seitan carles blog messenger bag american apparel fanny pack mlkshk 8-bit. Seitan cliche you probably haven’t heard of them mlkshk etsy. Echo park etsy artisan irony, wes anderson scenester keytar beard brooklyn dreamcatcher. Yr viral jean shorts seitan.</div>
<img src=”/wp/img/zoneimg1.jpg” width=”306″ style=” margin:7px 6px 0px 0px”/>
</div><div id=”zo5″>
<div style=”padding:10px; width:340px”>55555555555Mcsweeney’s scenester readymade twee artisan portland retro mixtape, cardigan yr whatever american apparel. Brooklyn fixie helvetica, freegan portland seitan carles blog messenger bag american apparel fanny pack mlkshk 8-bit. Seitan cliche you probably haven’t heard of them mlkshk etsy. Echo park etsy artisan irony, wes anderson scenester keytar beard brooklyn dreamcatcher. Yr viral jean shorts seitan.</div>
<img src=”/wp/img/zoneimg1.jpg” width=”306″ style=” margin:7px 6px 0px 0px”/>
</div><div id=”zo6″>
<div style=”padding:10px; width:340px”>6666666666666Mcsweeney’s scenester readymade twee artisan portland retro mixtape, cardigan yr whatever american apparel. Brooklyn fixie helvetica, freegan portland seitan carles blog messenger bag american apparel fanny pack mlkshk 8-bit. Seitan cliche you probably haven’t heard of them mlkshk etsy. Echo park etsy artisan irony, wes anderson scenester keytar beard brooklyn dreamcatcher. Yr viral jean shorts seitan.</div>
<img src=”/wp/img/zoneimg1.jpg” width=”306″ style=” margin:7px 6px 0px 0px”/>
</div>
<div>

</div>

</div>

按照我之前的想法是直接用

zo1a.click(function(){
var i=0;
rac(this).each(function(){
i +=rac(this).index();
zocon.hide();
zocon.eq(i).show();
});

点击就可以切换内容了。

只是当前按下去的按钮不是唯一高亮

也就是说，我按了一个，再按另一个全部都高亮起来了。。

后来我就用switch来判断高亮

这里代码好长哦。感觉自己又傻逼了。

switch完了以后和之前的jquery hover事件冲突，点击之后高亮了。然后鼠标移走又变暗了。

后来我就把鼠标划过按钮高亮的效果用css写了

感觉自己好傻逼。。汗。/

这里代码肯定也不简洁。纯属初学者的水平。