level 2
大梦初醒😷
楼主
html部分
<div class="js_tx">
<div class="js_tx_z">
<ul class="main_js_iamge">
<li class="li_z2"><a href="#"><img src='./images/main_js_1.jpg' id="obj[0]"></a></li>
<li class="li_z1"><img src='./images/main_js_2.jpg' id="obj[1]"></li>
<li class="li_z1"><img src='./images/main_js_1.jpg' id="obj[2]"></li>
<li class="li_z1"><img src='./images/main_js_2.jpg' id="obj[3]"></li>
</ul>
<ol class="main_js_quan">
<li class="li_style bg1 bg2" id="main_js_1"></li>
<li class="li_style bg1" id="main_js_2"></li>
<li class="li_style bg1" id="main_js_3"></li>
<li class="li_style bg1" id="main_js_4"></li>
</ol>
<div class="clear"></div>
</div>
</div>
css部分
/*js特效中的ul图处理*/
#main .js_tx .js_tx_z .main_js_iamge .li_z1{position:absolute;z-index:0;}
#main .js_tx .js_tx_z .main_js_iamge .li_z2{position:absolute;z-index:1;}
/*js特效中的ol圈处理*/
#main .js_tx .js_tx_z .main_js_quan{width:72px;height:13px;}
#main .js_tx .js_tx_z .main_js_quan .li_style{display:block;float:left;width:13px;height:13px;margin-left:5px;position:relative;left:450px;top:330px;z-index:2;}
#main .js_tx .js_tx_z .main_js_quan .bg1{background:url('../images/main_js_log.png')-133px 0px;}
#main .js_tx .js_tx_z .main_js_quan .bg2{background:url('../images/main_js_log.png')-120px 0px;}
js部分
$(function(){
//鼠标经过的判断
$('.main_js_quan li').mouseover(functionchangeImg(){
//选择当前的li的id添加一个类并且移除一个类
$("#"+this.id).addClass("bg2").siblings().removeClass("bg2");
//选择li开始切换图片
$('.main_js_iamge li img').fadeIn().attr("src","./images/"+(this.id)+".jpg");
//alert('aa');
});
});
2015年08月23日 02点08分
1
<div class="js_tx">
<div class="js_tx_z">
<ul class="main_js_iamge">
<li class="li_z2"><a href="#"><img src='./images/main_js_1.jpg' id="obj[0]"></a></li>
<li class="li_z1"><img src='./images/main_js_2.jpg' id="obj[1]"></li>
<li class="li_z1"><img src='./images/main_js_1.jpg' id="obj[2]"></li>
<li class="li_z1"><img src='./images/main_js_2.jpg' id="obj[3]"></li>
</ul>
<ol class="main_js_quan">
<li class="li_style bg1 bg2" id="main_js_1"></li>
<li class="li_style bg1" id="main_js_2"></li>
<li class="li_style bg1" id="main_js_3"></li>
<li class="li_style bg1" id="main_js_4"></li>
</ol>
<div class="clear"></div>
</div>
</div>
css部分
/*js特效中的ul图处理*/
#main .js_tx .js_tx_z .main_js_iamge .li_z1{position:absolute;z-index:0;}
#main .js_tx .js_tx_z .main_js_iamge .li_z2{position:absolute;z-index:1;}
/*js特效中的ol圈处理*/
#main .js_tx .js_tx_z .main_js_quan{width:72px;height:13px;}
#main .js_tx .js_tx_z .main_js_quan .li_style{display:block;float:left;width:13px;height:13px;margin-left:5px;position:relative;left:450px;top:330px;z-index:2;}
#main .js_tx .js_tx_z .main_js_quan .bg1{background:url('../images/main_js_log.png')-133px 0px;}
#main .js_tx .js_tx_z .main_js_quan .bg2{background:url('../images/main_js_log.png')-120px 0px;}
js部分
$(function(){
//鼠标经过的判断
$('.main_js_quan li').mouseover(functionchangeImg(){
//选择当前的li的id添加一个类并且移除一个类
$("#"+this.id).addClass("bg2").siblings().removeClass("bg2");
//选择li开始切换图片
$('.main_js_iamge li img').fadeIn().attr("src","./images/"+(this.id)+".jpg");
//alert('aa');
});
});