简单的轮播图
这是一种超级简单的轮播图 可以供新手参考 主要是通过数组覆盖img的src
CSS部分
<style>
* {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
display: block;
}
#imgs {
margin: 50px auto;
height: 300px;
width: 600px;
border: 1px solid orange;
position: relative;
}
ul,
li {
list-style: none;
}
ul {
position: absolute;
bottom: 8px;
right: 10px;
}
li {
float: left;
margin-left: 2px;
width: 10px;
height: 25px;
border: 1px solid orange;
}
a img {
height: 300px;
width: 600px;
}
span,a{
width: 50px;
height: 50px;
background-color:red;
text-align: center;
line-height: 50px;
}
span{
position:absolute;
top: 50%;
transform: translateY(-50%);
}
span a:hover{
background-color:rgba(255,255,255,0.5);
}
.left{
left: 0;
}
.right{
right: 0;
}
</style>
```css
```html
<div id="imgs">
<a href="javascript:;"><img src="../img/1.jpg" alt=""></a>
<ul>
<li style="background-color:orange"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<span class="left"><a href="javascript:;"><</a></span>
<span class="right"><a href="javascript:;">></a></span>
</div>
`<script src="../JS/jquery.min.js"></script>
<script>
let index = 0;
const arr=["../img/1.jpg","../img/2.jpg","../img/3.jpg","../img/4.jpg","../img/5.jpg"];
t=setInterval(fun1,1500);
$("#imgs").mouseenter(function() {
clearInterval(t);
})
$("#imgs").mouseleave(function() {
t=setInterval(fun1,1500);
})
function fun1() {
index++;
if (index == 5) {
index = 0;
}
let path = arr[index];
$("#imgs img").attr("src",path);
$("ul li").eq(index).css("background","orange").siblings("li").css("background","");
}
$("ul li").mouseenter(function() {
clearInterval(t);
let index = $(this).index();
let path = arr[index];
$("#imgs img").attr("src",path);
$(this).css("background","orange").siblings("li").css("background","");
})
$('.right').click(function() {
fun1();
})
$(".left").click(function() {
if (index==0) {
index=5
}
index--;
let path = arr[index];
$("#imgs img").attr("src",path);
$("ul li").eq(index).css("background","orange").siblings("li").css("background","");
})
</script>``