html" title=js>js_0">html" title=js>js轮播图简单方式
这个不记得是转载的还是自己写的了，如果有人看见原博主的文章了，麻烦评论放个原博主链接，谢谢！！！
直接上代码吧
<script type="text/javascript">
// 利用的是fadein和fadeout的原理，然后所有的图片在一排显示。
$(function(){
// 设置初始索引为0
var step = 0;
// 设置当前列表中第一张图片显示，其余隐藏
$(".sliders .item:not(:first-child)").hide();
// 改变图片方法
function changeImg(a){
// 设置当前显示的图片出去
$('.sliders .item').filter
(":visible").fadeOut(500);
// 进入
$('.sliders .item').eq(a).fadeIn
(1000);
}
//点击左按钮切换
$('.prev').click(function(){
step--;
if(step === -1){
step = 3;
}
changeImg(step);
})
//点击右按钮切换
$('.next').click(function(){
step++;
if(step === 4){
step = 0;
}
changeImg(step);
})
})
</script>
没有加html" title=js>js代码之前
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/html" title=css>css">
.clearfix::after{
display: block;
content: "";
clear: both;
}
img {
width: 300px;
}
li {
list-style: none;
float: left;
}
.sliders{
position: relative;
}
.btn {
width: 20px;
height: 20px;
position: absolute;
}
</style>
</head>
<body>
<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
<div class="sliders ">
<img src="img/left.png" class="prev btn">
<img src="img/right.png" class="next btn">
<ul class="clearfix" style="display: flex;">
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
加了html" title=js>js代码之后：更改了一些html" title=css>css样式
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/html" title=css>css">
*{
margin: 0;
padding: 0;
}
.clearfix::after{
display: block;
content: "";
clear: both;
}
img {
width: 300px;
height: 100px;
}
li {
list-style: none;
float: left;
}
.sliders{
position: relative;
height: 100px;
}
.btn {
width: 20px;
height: 20px;
position: absolute;
top: 50%;
}
.btn.next{
right: 0;
}
</style>
</head>
<body>
<div class="container" style="background-color: #d6ebde;width: 500px;margin: auto;height: 300px;">
<div class="sliders" >
<img src="img/left.png" class="prev btn">
<img src="img/right.png" class="next btn">
<ul class="clearfix" style="display: flex;width: 300px;margin: auto;height: 100%;">
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
<li class="item"><img src="img/banback.jpeg" alt=""></li>
</ul>
</div>
</div>
</body>
</html>
<script src="html" title=js>js/jquery-3.4.1.min.html" title=js>js"></script>
<script type="text/javascript">
// 当图片在同一个位置时可以用的轮播
$(function() {
// 设置初始索引为0
var step = 0;
// 设置当前列表中第一张图片显示，其余隐藏
$(".sliders .item:not(:first-child)").hide();
// 改变图片方法
function changeImg(a) {
// 设置当前显示的图片出去
$('.sliders .item').filter(":visible").fadeOut(500);
// 进入
$('.sliders .item').eq(a).fadeIn(1000);
}
//点击左按钮切换
$('.prev').click(function() {
step--;
if (step === -1) {
step = 3;
}
changeImg(step);
})
//点击右按钮切换
$('.next').click(function() {
step++;
if (step === 4) {
step = 0;
}
changeImg(step);
})
})
</script>
显示效果：
