jquery实现点击当前按钮显示当前按钮位置

我新学jquery

在一个页面上设计师要求说,鼠标移动过按钮图片要从暗变亮,点击的时候,右边的文章要相应变化,也就相当于一个简易的幻灯

我就自己倒腾一下jquery咯。。分享给大家

 

<script>
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”).show();
zo1a.click(function(){
var i=0;
rac(this).each(function(){
i +=rac(this).index();
});
alert(i);
});
});
</script>

html:

 

<div>
<ul>
<li><b>Aa cute</b><span>fsdfs dfsdf</span></li>
<li><b>Aa cute</b><span>fsdfsdfsdf</span></li>
<li><b>Aa cute</b><span>fsdf sdfsdf</span></li>
<li><b>Aa cute</b><span>fsdfsdfs df</span></li>
<li><b>Aa cute</b><span>fsdfsdf sdf</span></li>
<li><b>Aa cute</b><span>fsd fsdfsdf</span></li>

</ul>

</div>

上面一大堆背景图片变换,肯定可以改进,只是我水平太低。

后面的点击显示当前位置,其实是为了对应幻灯要显示的位置。之前一直搞不懂,后来看到了这个each的用法。

以前老想用for循环,可是我js没学到家,php也差不多,所以for都没搞定它。。。

接下来我就要做点击切换相应的内容了。