版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u013210620/article/details/81569333
轮播图参考插件如下：
SuperSlide
http://www.superslide2.com/
Swiper
https://www.swiper.com.cn/
PageSwitch
https://github.com/qiqiboy/pageSwitch
今天我就从项目中抽出2个简单的示例
我只贴出来html的部分，另外的图片、样式、js文件去下载即可
戳这里下载 戳这里下载
修改自Swiper
<html lang="en">
<head>
<meta charset="utf-8">
<title>Swiper demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<!-- Link Swiper's CSS -->
<link rel="stylesheet" href="css/swiper.min.css">
<!-- Demo styles -->
<style>
html, body {
position: relative;
height: 100%;
}
body {
background: #eee;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #000;
margin: 0;
padding: 0;
}
.swiper-container {
width: 100%;
/*height: 100%;*/
height: 250px;
}
.swiper-slide {
text-align: center;
font-size: 18px;
background: #fff;
/* Center slide text vertically */
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.swiper-wrapper img {
width: 100%;
height: 250px;
}
</style>
</head>
<body>
<!-- Swiper -->
<div class="swiper-container swiper-container-horizontal">
<div class="swiper-wrapper" style="transform: translate3d(-0px, 0px, 0px); transition-duration: 0ms;">
<div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-1.png"></div>
<div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-2.png"></div>
<div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-3.png"></div>
<div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-1.png"></div>
<div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-2.png"></div>
<div class="swiper-slide swiper-slide-prev" style="width: 1279px; margin-right: 30px;"><img
src="images/b-3.png"></div>
<div class="swiper-slide swiper-slide-active" style="width: 1279px; margin-right: 30px;"><img
src="images/b-1.png"></div>
<div class="swiper-slide swiper-slide-next" style="width: 1279px; margin-right: 30px;"><img
src="images/b-2.png"></div>
<div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-3.png"></div>
<div class="swiper-slide" style="width: 1279px; margin-right: 30px;"><img src="images/b-1.png"></div>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination swiper-pagination-clickable swiper-pagination-bullets">
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span>
<span class="swiper-pagination-bullet"></span></div>
<!-- Add Arrows -->
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
</div>
<script src="js/swiper.min.js"></script>
<script>
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
paginationClickable: true,
spaceBetween: 30,
centeredSlides: true,
autoplay: 2500,
autoplayDisableOnInteraction: false,
loop: true
});
</script>
</body>
</html>修改自SuperSlide
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script type="text/javascript" src="js/jquery1.42.min.js"></script>
<script type="text/javascript" src="js/jquery.SuperSlide.2.1.1.js"></script>
<style>
/*css 重置*/
*{margin:0; padding:0; list-style:none; }
body{ background:#fff; font:normal 12px/22px 宋体; }
img{ border:0; }
a{ text-decoration:none; color:#333; }
/* 本例子css */
.slideBox{ width:100%; height:300px; overflow:hidden; position:relative; border:1px solid #ddd; }
.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
.slideBox .hd ul{ overflow:hidden; zoom:1; float:left; }
.slideBox .hd ul li{ float:left; margin-right:2px; width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
.slideBox .hd ul li.on{ background:#f00; color:#fff; }
.slideBox .bd{ position:relative; height:100%; z-index:0; }
.slideBox .bd li{ zoom:1; vertical-align:middle; }
.slideBox .bd img{ width:100%; height:300px; display:block; }
/* 下面是前/后按钮代码，如果不需要删除即可 */
.slideBox .prev,
.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px;
display:block; width:32px; height:40px; background:url(images/1.png) -110px 5px no-repeat;
filter:alpha(opacity=50);opacity:0.5; }
.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
.slideBox .prev:hover,
.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1; }
.slideBox .prevStop{ display:none; }
.slideBox .nextStop{ display:none; }
</style>
</head>
<body>
<div id="slideBox" class="slideBox">
<div class="hd">
<ul>
<li class="">1</li>
<li class="">2</li>
<li class="on">3</li></ul>
</div>
<div class="bd">
<ul>
<li style="display: none;"><a href="" target="_blank"><img src="images/b-1.png"></a></li>
<li style="display: none;"><a href="" target="_blank"><img src="images/b-2.png"></a></li>
<li style="display: list-item;"><a href="" target="_blank"><img src="images/b-3.png"></a></li>
</ul>
</div>
<!-- 下面是前/后按钮代码，如果不需要删除即可 -->
<a class="prev" href="javascript:void(0)"></a>
<a class="next" href="javascript:void(0)"></a>
</div>
<script>
jQuery(".slideBox").slide({
mainCell:".bd ul",
autoPlay:true,
delayTime:2000,
interTime:4000
});
</script>
</body>
</html>