四种方式实现轮播图
2023-07-18 06:24
不论是app，还是网站，基本上都会出现轮播图，今天和大家分享几种不同工具实现轮播图的几种方式。
轮播图的基本样式和功能就不需要解释了，相信能根据题目选择看文章的话都知道啥是轮播图，如果哪位读者老爷真的让非要我解释一下啥是轮播图，求您饶了在下吧，真心词穷~
为了方便大家观看，我把css，html，js都写在一个文件里。
swiper插件实现轮播图
swiper是一个实现轮播图很强大，上手也容易。并且也是现在app，网址等用的最多的，
官方网址：http://www.swiper.com.cn/
下载插件导入，按照教程即可实现精美效果
运行效果
代码部分
<!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>
</html>
JS实现轮播图
运行效果
代码部分
<!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实现轮播图
运行结果
代码部分
<!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的轮播实用性差，但是也可以使用，但是可以锻炼我们的思维。
运行效果
代码部分
<!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>