## 1輪播特效
~~~
<style>/*css的修飾*/
.content{/*輪播大小的調整*/
position: relative;
width: 599px;
height: 399px;
margin-left: auto;
margin-right: auto;
border: 1px solid #f1f1f1;
}
#list{/*存放圖片的地方*/
position: absolute;
width: 600px;
height: 400px;
}
#list img,#prev,#next,#btns{
position: absolute;
}
#list img:not(:first-child){
display: none;
}
#prev,#next{/*往前、往后按鈕的修飾*/
top: 50%;
transform: translateY(-50%);
z-index: 100;
width: 40px;
height: 70px;
background: url("../images/icon-slides.png") no-repeat;/*按鈕的背景圖片，這里給了一組圖片，用雪碧圖的處理方式對其進行了處理*/
border: none;
}
#prev{
left: 0;
background-position-x: -86px;
}
#prev:hover{
background-position-x: 0px;
}
#next{
right: 0;
background-position-x: -125px;
}
#next:hover{
background-position-x: -41px;
}
#btns{
z-index: 100;
bottom: 20px;
left: 50%;
transform: translateX(-50%);
}
#btns>span{/*小圓點的修飾*/
width: 20px;
height: 20px;
border-radius: 50%;
display: inline-block;
background: rgba(43, 43, 43, 0.3);
border: 1px solid #f1f1f1;
cursor: pointer;
}
#btns .current{
background: orangered;
}
</style>
<div class="content">
<div id="list">
<img src="/*添加圖片于此*/="">
<img src="/*添加圖片于此*/" alt="">
<img src="/*添加圖片于此*/" alt="">
<img src="/*添加圖片于此*/" alt="">
<img src="/*添加圖片于此*/" alt="">
</div>
<button id="prev"></button>
<button id="next"></button>
<div id="btns">
<span class="current"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
/*在此導入bootstrap/的js文件*/
<script>
$(function(){
var index=0;
$("#next").click(function(){
index++;
if(index>4){
index=0;
}
animate(index);
})
$("#prev").click(function(){
index--;
if(index<0){
index=4;
}
// $("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
// $("#btns span").eq(index).addClass("current").siblings().removeClass("current");
//調用函數 animate
animate(index);
})
/* 函數封裝 */
function animate(index) {
$("#list img").eq(index).fadeIn(300).siblings().fadeOut(300);
$("#btns span").eq(index).addClass("current").siblings().removeClass("current");
}
$("#btns span").click(function(){
console.log($(this).index())
index=$(this).index();
animate(index);
})
//自動播放
var timer;
function play(){
timer=setInterval(function(){
$("#next").click()
},2000)
}
function stop(){
clearInterval(timer);
}
$(".content").mouseover(function(){
stop();
})
$(".content").mouseout(function(){
play();
})
play();
})
</script>
~~~
## 2.bootstrap的輪播插件（Carousel），詳情點擊下面的鏈接進行查看[http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html](http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html)
## 3.swiper輪播，詳情點擊下面的鏈接進行查看
[http://note.pimingzhao.top/javascript/758957](http://note.pimingzhao.top/javascript/758957)
swiper官方網址：https://www.swiper.com.cn/
