这是全部代码
<!DOCTYPE html>
<html><head>
<meta charset="UTF-8">
<title>JQuery 轮播</title>
<script src="../lib/jquery/jquery-1.11.1.min.js"></script>
</head>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
#slide {
width: 300px;
height: 200px;
margin: 50px auto;
position: relative;
overflow: hidden;
}
#icon li {
display: inline-block;
width: 16px;
height: 16px;
line-height: 18px;
border-radius: 100%;
background-color: #333333;
cursor: pointer;
opacity: 0.7;
}
#icon {
position: absolute;
bottom: 10px;
text-align: center;
width: 100%;
}
img {
width: 300px;
height: 200px;
display: none;
}
</style>
<body>
<div id="slide">
<img src="img/banner01.jpg" />
<img src="img/banner02.jpg" />
<img src="img/banner03.jpg" />
<img src="img/banner04.jpg" />
<ul id="icon">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script type="text/javascript">
$(function() {
var page = -1;
var play = true;
function slide() {
if(play) {
page++; //当前轮播加1（下一个图片显示）
if(page == 4) {
page = 0; //当page大于图片长度时，从第一个图片开始播放
}
$("#icon li").css({"background": "#333333"}); //设置底部圆点背景
$("#slide img").fadeOut(100); //所有img隐藏
$("#icon li").eq(page).css({"background": "#ffffff"}); //设置对应的底部小圆点背景
$("#slide img").eq(page).fadeIn(); //相应img显示 使用fadeIn
}
setTimeout(slide, 4000); //设置图片的切换速度
}
slide();
/**鼠标悬浮停止轮播，移出开始轮播 **/
$("#slide").mouseover(function()
play = false;
}).mouseout(function() {play = true;
});
/**点击小圆点**/
$("#icon li").click(function() {
page = $(this).index(); //将page 设置成当前点击按钮的 下标值
$("#icon li").css({"background": "#333333"}); //设置底部小圆点背景
$("#slide img").fadeOut(100); //所有img隐藏
$(this).css({"background": "#FF840C"}); //将对应小圆点背景改变
$("#slide img").eq(page).fadeIn(); //对应img显示
});
})
</script>
</html>
2102
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
