Html
    Css
    Js

    
                        
#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;
}

                        
↑上面代码改变,会自动显示代码结果 jQuery调用版本:1.2.3
 立即下载

jQuery轮播图代码

更新时间:2023-12-01 11:22:32

1.掌握jquery处理动画效果的方法;
2.掌握jquery动画的显示与隐藏、淡入淡出、滑动效果的常用方法;
3.掌握jquery自定义动画的定义。
 实现效果:
    1.实现广告图片的轮播展示效果,鼠标移入图片则停止轮播,鼠标移出图片则开始轮播。
    2.实现点击导航播放到相应的图片的效果:当点击前一张图片指示符号“<”时,显示当前图片的前一张图片;当点击后一张图片指示符号“>”时,显示当前图片的后一张图片。
   3.点击轮播图指示器时,展示对应的图片效果。

0