简单一个css(就是加在图片上面的小黑点的左浮动有点问题 没有报错 就是显示有点错误)
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.slider {
width: 790px;
height: 340px;
margin: 100px auto;
position: relative;
}
.slider>ul>li {
display: none;
position: absolute;
}
.slider li:first-child {
display: block;
}
.arrow {
display: none;
}
.slider:hover .arrow,
.slider:hover .box {
display: block;
}
.left,
.right {
width: 30px;
height: 60px;
font-size: 30px;
background-color: wheat;
color: red;
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
cursor: pointer;
}
.left:hover,
.right:hover {
background-color: yellow;
}
.left {
left: 0;
}
.right {
right: 0;
}
.box {
width: 150px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 20px;
display: none;
}
.box li {
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
display: inline-block;
float: left;
margin-left: 12px;
}
.show {
background-color: orange !important;
}
img {
width: 790px;
height: 340px;
}
</style>
jquery是下载的最新的一个版本
<script src="jquer.min.js"></script>
简单的HTML (图片什么的自己随便找)
<div class="slider">
<ul class="img">
<li>
<a href="#"><img src="https://img2.baidu.com/it/u=867436592,3708161481&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=291" alt=""></a>
</li>
<li>
<a href="#"><img src="https://img1.baidu.com/it/u=3801391254,1886875664&fm=253&fmt=auto&app=138&f=JPG?w=500&h=295" alt=""></a>
</li>
<li>
<a href="#"><img src="https://img1.baidu.com/it/u=2782517172,2403300180&fm=253&fmt=auto&app=138&f=JPG?w=831&h=500" alt=""></a>
</li>
<li>
<a href="#"><img src="https://img2.baidu.com/it/u=2638131986,3789001392&fm=253&fmt=auto&app=138&f=JPG?w=847&h=500" alt=""></a>
</li>
<li>
<a href="#"><img src="https://img2.baidu.com/it/u=1039761252,3980622941&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt=""></a>
</li>
</ul>
<div class="arrow">
<span class="left"><</span>
<span class="right">></span>
</div>
<div class="box">
<ul>
<li class="show"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
js部分
<script>
$(function() {
//设置图片下标为0
let num = 0
//向右添加点击事件
$('.right').click(function() {
num++
if (num === $('.slider>ul>li').length) {
num = 0
}
$('.slider li').eq(num).fadeIn().siblings('li').fadeOut()
$('.box li').eq(num).addClass('show').siblings('li').removeClass('show')
})
//向左添加点击事件
$('.left').on('click', function() {
num--
if (num === -1) {
num = $('.slider>ul>li').length - 1
}
$('.slider li').eq(num).fadeIn().siblings('li').fadeOut()
$('.box li').eq(num).addClass('show').siblings('li').removeClass('show')
})
//给圆点添加点击事件
$('.box li').click(function() {
let idx = $(this).index()
$('.img li').eq(idx).fadeIn().siblings('li').fadeOut()
$('.box li').eq(idx).addClass('show').siblings('li').removeClass('show')
})
//自动转换图片
let time
time = setInterval(function() { //定时器
$('.right').click()
}, 1000)
//当鼠标移到图片页面不动
$('.slider').hover(function() {
clearInterval(time) //关闭定时器
time = null
}, function() { //当鼠标移开图片定时器重新运行
time = setInterval(function() {
$('.right').click()
}, 1000)
})
})
</script>