#slideShow {
width:590px;
height:545px;
background-color:#999999;
text-align:center;
left:40%;
margin-left:-135px;
position:relative;
}
#slideShow .slide_pic {
position:absolute;
left:0;
top:0;
}
img {
width:590px;
height:545px;
}
#slideShow .prev_one {
position:absolute;
left:0;
top:45%;
}
#slideShow .next_one {
position:absolute;
right:0;
top:45%;
}
#slideShow #mark_box {
position:absolute;
bottom:0;
}
#mark_box .mark {
width:20px;
height:20px;
border-radius:20px;
padding:10px;
text-align:center;
line-height:20px;
background-color:beige;
float:left;
list-style:none;
margin:10px 22px;
cursor:pointer;
}
#mark_box .active_img {
background-color:pink;
}
更新时间:2023-12-01 11:22:32
1.掌握jquery处理动画效果的方法;
2.掌握jquery动画的显示与隐藏、淡入淡出、滑动效果的常用方法;
3.掌握jquery自定义动画的定义。
实现效果:
1.实现广告图片的轮播展示效果,鼠标移入图片则停止轮播,鼠标移出图片则开始轮播。
2.实现点击导航播放到相应的图片的效果:当点击前一张图片指示符号“<”时,显示当前图片的前一张图片;当点击后一张图片指示符号“>”时,显示当前图片的后一张图片。
3.点击轮播图指示器时,展示对应的图片效果。