（一）html：

<title>jquery實現輪播圖</title>
<link rel="stylesheet" href="icon/iconfont.css">

<div id="slider">
<img src="img/1.jpg" style="display:block;">
<img src="img/2.jpg" >
<img src="img/3.jpg" >
<img src="img/4.jpg" >
<ul>
<li style="background:#f00"></li>s
<li></li>
<li></li>
<li></li>
</ul>
<i class="iconfont icon-zuo"></i>
<i class="iconfont icon-you"></i>
</div>
<script src="js/jquery-3.3.1.js"></script>
<script src="jquery來實現輪播圖.js"></script>

(二)、css：

* {
margin: 0;
padding: 0;
}
li,ul,ol {
list-style-type:none;
}
#slider {
width:945px;
height:288px;
position:relative;
margin:100px auto;

}
#slider>img {
display:none;
position:absolute;
left:0;
top:0;
}
ul {
position:relative;
left:400px;
top:260px;
}
ul>li {
width:20px;
height:20px;
background:#ddd;
float:left;
border-radius:50%;
margin-left:20px;
}
#slider>.icon-zuo {
font-size:30px;
color:#ddd;
position:absolute;
left:30px;
top:50%;
transform:translateY(-50%);
}
#slider>.icon-zuo:hover {
color:#f00;
}
#slider>.icon-you {
font-size:30px;
color:#ddd;
position:absolute;
right:30px;
top:50%;
transform:translateY(-50%);
font-weight:bold;
}
#slider>.icon-you:hover {
color:#f00;
}

（三）、js：

var c = 0; //c是一個變量；

var timer = setInterval(run,1000);

function run(){ // 設置定時器；
c++;
c = c==4?0:c; //三元表達式 這裏的第二個等號是兩個等於號；

$("#slider img").eq(c).fadeIn().siblings(‘img‘).fadeOut();
$("#slider ul li").eq(c).css(‘background‘,‘#f00‘).siblings(‘li‘).css(‘background‘,‘#ddd‘);
};
$("#slider").hover(function(){
clearInterval(timer);

},function(){
timer = setInterval(run,1000);
});
$("#slider ul li").mouseenter(function(){ // 鼠標移入小圓點的效果；

c=$(this).index(); // 獲得 的當前鼠標移入的li的序號；

$("#slider img").eq(c).fadeIn().siblings(‘img‘).fadeOut();
$("#slider ul li").eq(c).css(‘background‘,‘#f00‘).siblings(‘li‘).css(‘background‘,‘#ddd‘);
})

簡單輪播圖