根据ajax实现图片的切换,jquery实现图片切换代码

$(function(){

var num2=6;//用于设置当前选中ol li的z-index值

$('ol li').mouseover(function(e){

$(this).attr('class','current');

$(this).siblings().attr('class','');

num2++;

var num=$(this).index();//存ol li的序列号

$('ul li').eq(num).css('z-index',num2);

$('ul li').eq(num).css('left','600px');//修改ul li对应的序列号的样式,先把它的位置绝对定位到div外面

//$('ul li').eq(num).css('left','0');这句是静态css,下一句是动态css

$('ul li').eq(num).animate({left:'0'},50);//然后把它的位置又重新绝对定位到父元素上面 这样就实现了一个动画的效果

});

});

*{

padding:0;margin:0;border:0;

}

.all{/*div的宽高设置成和五张图片的宽高一样*/

width:600px;

height:300px;

margin:100px auto;/*div居中*/

position:relative;/*相对定位，便于子元素使用绝对定位*/

overflow:hidden;/*隐藏超出部分的图片*/

}

.all ul{

position:relative;

z-index:1;

}

.all ul li{

position:absolute;

left:0;

top:0;

}

.all ol{

position:absolute;

z-index:2;/*显示在ul上面*/

right:10px;

bottom:10px;

}

.all ol li{

width:20px;

height:20px;

background:#333;

border:1px solid #ccc;

font-weight:bold;

text-align:center;/*左右居中*/

line-height:20px;/*文本上下居中*/

float:left;

list-style:none;

margin-left:10px;

color:#ccc;

margin-top:10px;/*让放大的li和没有放大的li下边框对其*/

}

.all ol .current{

width:30px;

height:30px;

line-height:30px;

border:1px solid #f60;

color:#f60;

margin-top:0;/*让放大的li和没有放大的li下边框对其*/

cursor:pointer;/*增强用户体验 变小手*/

}

• 
• 
• 
• 
• 

1. 1
2. 2
3. 3
4. 4
5. 5