#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.点击轮播图指示器时,展示对应的图片效果。