## 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/
