JQuery 轮播图片-CSDN博客

本文链接：https://blog.csdn.net/qq_37137999/article/details/79758715

这是全部代码

<!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>