不論是app，還是網(wǎng)站，基本上都會出現(xiàn)輪播圖，今天和大家分享幾種不同工具實現(xiàn)輪播圖的幾種方式。
輪播圖的基本樣式和功能就不需要解釋了，相信能根據(jù)題目選擇看文章的話都知道啥是輪播圖，如果哪位讀者老爺真的讓非要我解釋一下啥是輪播圖，求您饒了在下吧，真心詞窮~
為了方便大家觀看，我把css，html，js都寫在一個文件里。
swiper插件實現(xiàn)輪播圖
swiper是一個實現(xiàn)輪播圖很強大，上手也容易。并且也是現(xiàn)在app，網(wǎng)址等用的最多的，
官方網(wǎng)址：http://www.swiper.com.cn/
下載插件導(dǎo)入，按照教程即可實現(xiàn)精美效果
運行效果
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>
<!-- 結(jié)構(gòu)以及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>
<!-- 如果需要導(dǎo)航按鈕 -->
<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,
// 是否循環(huán)播放
loop: true,
// 如果需要分頁器（小圓點）
// 是否需要分頁器
pagination: '.swiper-pagination',
// 點擊分頁器是否切換到對應(yīng)的圖片 是 true 否 false
paginationClickable:true,
// 如果需要前進后退按鈕
nextButton: '.swiper-button-next',
prevButton: '.swiper-button-prev',
// 用戶操作swiper之后，是否禁止autoplay。默認(rèn)為true：停止。
// 如果設(shè)置為false，用戶操作swiper之后自動切換不會停止，每次都會重新啟動autoplay。
// 操作包括觸碰，拖動，點擊pagination等。
autoplayDisableOnInteraction:false,
})
</script>
</body>
</body>
</html>
JS實現(xiàn)輪播圖
運行效果
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");
//圖片節(jié)點
var jsImg = document.getElementById("pic");
//左右按鈕節(jié)點
var jsLeft = document.getElementById("left");
var jsRight = document.getElementById("right");
//獲取所有的li
var jsUl = document.getElementById("list");
var jsLis = jsUl.getElementsByTagName("li");
//讓第一個小圓點變?yōu)榧t色
jsLis[0].style.backgroundColor = "red";
//顯示當(dāng)前的圖片下標(biāo)
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";
}
//改變對應(yīng)小圓點為紅色
jsLis[currentPage].style.backgroundColor = "red";
}
//鼠標(biāo)進入
jsDivBox.addEventListener("mouseover", func1, false);
function func1() {
//停止定時器
clearInterval(timer);
//顯示左右按鈕
jsLeft.style.display = "block";
jsRight.style.display = "block";
}
//鼠標(biāo)移出
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實現(xiàn)輪播圖
運行結(jié)果
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實現(xiàn)輪播圖
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%;
}
/*創(chuàng)建三種動畫策略*/
@-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;}
}
/*當(dāng)我們點擊對應(yīng)按鈕時顯示對應(yīng)的動畫*/
#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>
覺得有收獲就點贊啦
