不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。
轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~
为了方便大家观看，我把css，html，js都写在一个文件里。
swiper插件实现轮播图
swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的，
官方网址：http://www.swiper.com.cn/
下载插件导入，按照教程即可实现精美效果
运行效果
GIF.gif
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" type="text/css" href="swiper-3.4.1.min.css">
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="swiper-3.4.1.jquery.min.js"></script>
<style type="text/css">
.swiper-container{
width: 790px;
height: 340px;
}
</style>
</head>
<!-- 结构以及class的类名不允许更改 -->
<body>
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
<div class="swiper-slide">.jpg)</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<!-- <div class="swiper-scrollbar"></div> -->
</div>
<script type="text/javascript">
var mySwiper = new Swiper ('.swiper-container', {
// 滚动方向 horizontal/vertical
direction: 'horizontal',
// 自动播放
autoplay:2000,
// 是否循环播放
loop: true,
// 如果需要分页器（小圆点）
// 是否需要分页器
pagination: '.swiper-pagination',
// 点击分页器是否切换到对应的图片 是 true 否 false
paginationClickable:true,
// 如果需要前进后退按钮
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
// 如果设置为false，用户操作swiper之后自动切换不会停止，每次都会重新启动autoplay。
// 操作包括触碰，拖动，点击pagination等。
autoplayDisableOnInteraction:false,
})
</script>
</body>
</body>
</html>
JS实现轮播图
运行效果
GIF.gif
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
#loopDiv{
width: 790px;
height: 340px;
margin: 0 auto;
position: relative;
}
#list{
list-style: none;
position: absolute;
bottom: 10px;
left: 250px;
}
#list li{
float: left;
width: 20px;
height: 20px;
line-height: 20px;
text-align: center;
border-radius: 50%;
background: #aaa;
margin-right: 10px;
}
.chooseBut{
width: 50px;
height: 80px;
background-color: rgba(0,0,0,0.2);
color: #fff;
font-size: 30px;
line-height: 80px;
text-align: center;
display: none;
}
#left{
position: absolute;
left: 0px;
top: 130px;
}
#right{
position: absolute;
right: 0px;
top: 130px;
}
</style>
</head>
<body>
<div id="loopDiv">
<ul id="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
<div id="left" class="chooseBut"><</div>
<div id="right" class="chooseBut">></div>
</div>
<script type="text/javascript">
var jsDivBox = document.getElementById("loopDiv");
//图片节点
var jsImg = document.getElementById("pic");
//左右按钮节点
var jsLeft = document.getElementById("left");
var jsRight = document.getElementById("right");
//获取所有的li
var jsUl = document.getElementById("list");
var jsLis = jsUl.getElementsByTagName("li");
//让第一个小圆点变为红色
jsLis[0].style.backgroundColor = "red";
//显示当前的图片下标
var currentPage = 0;
//启动定时器
var timer = setInterval(func, 1000);
function func() {
currentPage++;
changePic();
}
function changePic() {
if (currentPage == 8) {
currentPage = 0;
}
if (currentPage == -1) {
currentPage = 7;
}
//更换图片
//"img/1.jpg"
jsImg.src = "img/" + currentPage + ".jpg";
//将所有的小圆点颜色清空
for (var i = 0; i < jsLis.length; i++) {
jsLis[i].style.backgroundColor = "#aaa";
}
//改变对应小圆点为红色
jsLis[currentPage].style.backgroundColor = "red";
}
//鼠标进入
jsDivBox.addEventListener("mouseover", func1, false);
function func1() {
//停止定时器
clearInterval(timer);
//显示左右按钮
jsLeft.style.display = "block";
jsRight.style.display = "block";
}
//鼠标移出
jsDivBox.addEventListener("mouseout", func2, false);
function func2() {
//重启定时器
timer = setInterval(func, 1000);
//隐藏左右按钮
jsLeft.style.display = "none";
jsRight.style.display = "none";
}
//点击左右按钮
jsLeft.addEventListener("click", func3, false);
function func3() {
currentPage--;
changePic();
}
jsLeft.onmouseover = function() {
this.style.backgroundColor = "rgba(0,0,0,0.6)";
}
jsLeft.onmouseout = function() {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
}
jsRight.addEventListener("click", func4, false);
function func4() {
currentPage++;
changePic();
}
jsRight.onmouseover = function() {
this.style.backgroundColor = "rgba(0,0,0,0.6)";
}
jsRight.onmouseout = function() {
this.style.backgroundColor = "rgba(0,0,0,0.2)";
}
//进入小圆点
for (var j = 0; j < jsLis.length; j++) {
jsLis[j].onmouseover = function() {
currentPage = parseInt(this.innerHTML) - 1;
changePic();
};
}
</script>
</body>
</html>
jQuery实现轮播图
运行结果
GIF.gif
代码部分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.pic{
width: 790px;
height: 340px;
margin: 10px auto;
position: relative;
overflow: hidden;
}
.content{
width: 99999px;
height: 340px;
position: absolute;
left: 0px;
top: 0px;
}
.content img{
float: left;
}
.index{
position: absolute;
left: 300px;
bottom: 5px;
width: 200px;
height: 20px;
list-style: none;
}
.index li{
width: 10px;
height: 10px;
border-radius: 50%;
float: left;
margin-left: 10px;
background-color: rgba(100,100,100,0.3);
}
.left{
width: 30px;
height:50px;
background-color:rgba(100,100,100,0.5);
position: absolute;
left: 0px;
top: 150px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
display: none;
}
.right{
width: 30px;
height:50px;
background-color:rgba(100,100,100,0.5);
position: absolute;
right: 0px;
top: 150px;
line-height: 50px;
text-align: center;
font-size: 20px;
color: #fff;
display: none;
}
.index .first{
background-color: red;
}
</style>
<script type="text/javascript" src="jquery/jquery-3.0.0.min.js"></script>
</head>
<body>
<div class="pic">
<div class="content">
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
</div>
<ul class="index">
<li class="first"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="right">></div>
<div class="left"><</div>
</div>
<script type="text/javascript">
$(function(){
//每个固定的时间移动图片
var timer = setInterval(picLoop,1000);
var index = 0;
function picLoop(){
index++;
if (index==8) {index=0;}
$(".content").animate({"left":-790*index},300);
$("li").eq(index).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
}
//定时器的控制
$(".pic").hover(function(){
clearInterval(timer);
$(".left").show();
$(".right").show();
},function(){
timer = setInterval(picLoop,1000);
$(".left").hide();
$(".right").hide();
})
$("li").mouseover(function(){
$(this).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
index = $(this).index();
$(".content").animate({"left":-790*index},300);
})
$(".left").click(function(){
index--;
if (index==-1) {index=7;}
$(".content").animate({"left":-790*index},300);
$("li").eq(index).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
})
$(".right").click(function(){
index++;
if (index==8) {index=0}
$(".content").animate({"left":-790*index},300);
$("li").eq(index).css("background-color","red")
.siblings().css("background-color","rgba(100,100,100,0.3)");
})
})
</script>
</body>
</html>
css3实现轮播图
css3的轮播实用性差，但是也可以使用，但是可以锻炼我们的思维。
运行效果
GIF.gif
代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin:0;
padding:0;
}
ul {
list-style:none;
}
.loop{
position: relative;
margin:30px auto;
width:600px;
height:300px;
}
#wrap {
position:relative;
width:600px;
height:300px;
border:1px solid #9cc5ef;
overflow:hidden;
}
#slider {
width:300%;
height:100%;
font:100px/400px Microsoft Yahei;
text-align:center;
color:#fff;
margin-left:0;
-webkit-animation:slide1 3s ease-out infinite;
}
#slider li {
float:left;
width:600px;
height:100%;
}
#slider img{
width:600px;
height:100%;
}
/*创建三种动画策略*/
@-webkit-keyframes slide1 {
0% { margin-left:0;}
23% { margin-left:0;}
33% { margin-left:-600px;}
56% { margin-left:-600px;}
66% { margin-left:-1200px;}
90% { margin-left:-1200px;}
100% {margin-left:0;}
}
@-webkit-keyframes slide2 {
0% { margin-left:-600px;}
23% { margin-left:-600px;}
33% { margin-left:-1200px;}
56% { margin-left:-1200px;}
66% { margin-left:0;}
90% { margin-left:0;}
100% {margin-left:-600px;}
}
@-webkit-keyframes slide3 {
0% { margin-left:-1200px;}
23% { margin-left:-1200px;}
33% { margin-left:0;}
56% { margin-left:0;}
66% { margin-left:-600px;}
90% { margin-left:-600px;}
100% {margin-left:-1200px;}
}
/*当我们点击对应按钮时显示对应的动画*/
#first:checked ~ #wrap #slider {
-webkit-animation-name:slide1;
}
#second:checked ~ #wrap #slider {
-webkit-animation-name:slide2;
}
#third:checked ~ #wrap #slider {
-webkit-animation-name:slide3;
}
/*短暂地取消动画名称，模拟重启动画*/
#first:active ~ #wrap #slider {
-webkit-animation-name:none;
margin-left:0;
}
#second:active ~ #wrap #slider {
-webkit-animation-name:none;
margin-left:-600px;
}
#third:active ~ #wrap #slider {
-webkit-animation-name:none;
margin-left:-1200px;
}
#opts {
width:600px;
height:40px;
margin:auto;
color:#fff;
text-align:center;
font:16px/30px Microsoft Yahei;
position: absolute;
top: 260px;
left: 250px;
}
#opts label {
float:left;
width:30px;
height:30px;
margin-right:10px;
background:#cccccc;
cursor:pointer;
border-radius: 50%;
}
#opts label:hover {
background:#405871;
}
/* 隐藏Input按钮*/
#first, #second, #third {
display:none;
}
</style>
</head>
<body>
<div class="loop">
<input type="radio" name="slider" id="first">
<input type="radio" name="slider" id="second">
<input type="radio" name="slider" id="third">
<div id="wrap">
<ul id="slider">
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="opts">
<label for="first">1</label>
<label for="second">2</label>
<label for="third">3</label>
</div>
</div>
</body>
</html>
觉得有收获就点赞啦
