轮播图
显示效果
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/46ad681059e62dead21f2325050f0f11.png)
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d83dac192a28420b4396a07cde1b9fbc.png)
JS轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#lb {
margin: 100px auto;
width: 790px;
height: 340px;
border: 5px solid rgba(0, 0, 0, .5);
position: relative;
}
#lb img {
position: absolute;
top: 0;
left: 0;
float: left;
display: none;
}
#lb .bl {
display: block;
}
#lb ul {
list-style: none;
margin: 0;
padding: 0;
}
#turn span {
width: 40px;
height: 60px;
display: inline-block;
background-color: rgba(0, 0, 0, .5);
color: #FFFFFF;
position: absolute;
text-align: center;
line-height: 60px;
font-size: 20px;
display: none;
cursor: pointer;
}
#tl {
top: 50%;
margin-top: -30px;
}
#tr {
top: 50%;
right: 0;
margin-top: -30px;
}
#lb #xb {
position: absolute;
overflow: hidden;
background-color: rgba(0, 0, 0, .5);
padding: 5px 20px;
width: 100px;
border-radius: 10px;
bottom: 0;
left: 50%;
margin-left: -70px;
margin-bottom: 20px;
}
#xb li {
float: left;
display: inline-block;
width: 10px;
height: 10px;
background-color: #FFFFFF;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
#xb .xb_cr {
background-color: #f10215;
}
</style>
</head>
<body>
<div id="lb">
<img class="bl" src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<div id="turn">
<span id="tl"><</span>
<span id="tr">></span>
</div>
<ul id="xb">
<li class="xb_cr"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
function ds() {
var ini = setInterval(function () {
if (!(index < imgs.length)) {
index = 0
}
for (i = 0; i < imgs.length; i++) {
imgs[i].removeAttribute('class')
xbs[i].removeAttribute('class')
}
imgs[index].setAttribute('class', 'bl')
xbs[index].setAttribute('class', 'xb_cr')
index++
}, 2000)
return ini
}
my$ = (id) => {
return document.getElementById(id)
}
imgs = my$('lb').getElementsByTagName('img');
xbs = my$('xb').getElementsByTagName('li');
index = 0
inl = ds()
my$('lb').onmouseover = function () {
clearInterval(inl)
turns = my$('turn').getElementsByTagName('span');
for (i = 0; i < turns.length; i++) {
turns[i].style.display = 'block'
}
my$('xb').style.display = 'block'
}
my$('lb').onmouseout = function () {
inl = ds()
for (i = 0; i < turns.length; i++) {
turns[i].style.display = 'none'
}
my$('xb').style.display = 'none'
}
my$('tr').onclick = function () {
if (!(index < imgs.length - 1)) {
index = -1
}
index++
for (i = 0; i < imgs.length; i++) {
imgs[i].removeAttribute('class')
xbs[i].removeAttribute('class')
}
imgs[index].setAttribute('class', 'bl')
xbs[index].setAttribute('class', 'xb_cr')
}
my$('tl').onclick = function () {
if (!(index > 0)) {
index = imgs.length
}
index--
for (i = 0; i < imgs.length; i++) {
imgs[i].removeAttribute('class')
xbs[i].removeAttribute('class')
}
imgs[index].setAttribute('class', 'bl')
xbs[index].setAttribute('class', 'xb_cr')
}
for (i = 0; i < xbs.length; i++) {
xbs[i].setAttribute('count', i)
xbs[i].onclick = function () {
for (i = 0; i < xbs.length; i++) {
imgs[i].removeAttribute('class')
xbs[i].removeAttribute('class')
}
index= this.getAttribute('count');
imgs[index].setAttribute('class', 'bl')
xbs[index].setAttribute('class', 'xb_cr')
}
}
</script>
</html>
JQuery轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery轮播图</title>
<style>
body {
}
#lb {
margin: 100px auto;
width: 790px;
height: 340px;
border: 30px solid rgba(88, 120, 88, .2);
position: relative;
border-radius: 30px;
}
#lb img {
position: absolute;
top: 0;
left: 0;
float: left;
display: none;
}
#lb .bl {
display: block;
}
#lb ul {
list-style: none;
margin: 0;
padding: 0;
}
#turn span {
width: 40px;
height: 60px;
display: inline-block;
background-color: rgba(0, 0, 0, .5);
color: #FFFFFF;
position: absolute;
text-align: center;
line-height: 60px;
font-size: 20px;
display: none;
cursor: pointer;
}
#lb:hover #turn span, #lb:hover #xb {
display: block;
}
#tl {
top: 50%;
margin-top: -30px;
}
#tr {
top: 50%;
right: 0;
margin-top: -30px;
}
#lb #xb {
position: absolute;
overflow: hidden;
background-color: rgba(0, 0, 0, .5);
padding: 8px 20px;
border-radius: 10px;
bottom: 0;
left: 50%;
margin-left: -100px;
margin-bottom: 20px;
}
#xb li {
float: left;
display: inline-block;
width: 10px;
height: 10px;
background-color: #FFFFFF;
border-radius: 50%;
margin: 0 5px;
cursor: pointer;
}
#xb .xb_cr {
background-color: #f10215;
}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
<div id="lb">
<img class="bl" src="img/1.jpg"/>
<img src="img/2.jpg"/>
<img src="img/3.jpg"/>
<img src="img/4.jpg"/>
<img src="img/5.jpg"/>
<img src="img/6.jpg"/>
<img src="img/7.jpg"/>
<img src="img/8.jpg"/>
<div id="turn">
<span id="tl"><</span>
<span id="tr">></span>
</div>
<ul id="xb">
<li class="xb_cr"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
<script>
index = 0
lbs = $('#lb img');
lis = $('#xb li');
target_node = () => {
lbs.removeClass('bl')
lbs.fadeOut('5000')
lis.removeClass('xb_cr')
lbs[index].className = 'bl'
$(lbs[index]).fadeIn('5000')
lis[index].className = 'xb_cr'
}
dsq = () => {
var interval = setInterval(function () {
if (index > lbs.length - 1) {
index = 0
}
target_node()
index++
}, 2000)
return interval
}
inl = dsq()
$('#lb').on('mouseover', function () {
clearInterval(inl)
})
$('#lb').on('mouseout', function () {
inl = dsq()
})
$('#tl').on('click', function () {
if (index <= 0) {
index = lbs.length
}
index--
target_node()
})
$('#tr').on('click', function () {
if (index >= lbs.length - 1) {
index = -1
}
index++
target_node()
})
for (i = 0; i < lis.length; i++) {
lis[i].setAttribute('index', i)
lis[i].onclick = function () {
index = this.getAttribute('index')
target_node()
}
}
</script>
</html>