轮播图效果
CSS样式:
<style>
.box{
height: 190px;
width: 375px;
background-color: aqua;
overflow: hidden;
}
.box2{
height: 150px;
width: 1390px;
margin-left: 0;
}
.img{
height: 150px;
width: 330px;
float: right;
margin-top: 20px;
margin-right: 15px;
}
.left{
position: absolute;
left: 30px;
top: 95px;
}
.right{
position: absolute;
left: 300px;
top: 95px;
}
.btnBox{
display: flex;
position: absolute;
top: 25.5vh;
left: 16vw;
}
.btn{
height: 10px;
width: 10px;
background-color: white;
margin-right: 1vw;
border-radius: 20px;
}
.showRed{
background-color: #f10327;
}
</style>
HTML代码:
<body>
<div class="box">
<div class="box2">
<div class="img" style="background-color:red"> </div>
<div class="img" style="background-color:yellow;"> </div>
<div class="img" style="background-color:pink"> </div>
<div class="img" style="background-color: orange;"> </div>
</div>
</div>
<!-- 左右按钮 -->
<div class="left">left</div>
<div class="right">right</div>
<!-- 跳转图标 -->
<div class="btnBox">
<div class="btn showRed" onclick="btn(0)"></div>
<div class="btn" onclick="btn(1)"></div>
<div class="btn" onclick="btn(2)"></div>
<div class="btn" onclick="btn(3)"></div>
</div>
</body>
JavaScript代码:
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
// length 偏移量 newNum 图片索引
let length = 0;
let newNum = 0;
//点击右按钮
$('.right').click(function() {
if(length <= -1035){
return
}
$('.box2').css("margin-left",(length-345) + 'px')
length -= 345
$('div').removeClass('showRed')
$('.btnBox').children().eq(newNum+1).addClass('showRed')
newNum += 1
})
//点击左按钮
$(".left").click(function(){
if(length >= 0){
return
}
$('.box2').css("margin-left",(length+345) + 'px')
length += 345
$('div').removeClass('showRed')
$('.btnBox').children().eq(newNum-1).addClass('showRed')
newNum -= 1
})
//点击跳转按钮
function btn(num) {
$('.box2').css("margin-left",(num * -345) + 'px')
length = num * -345
$('div').removeClass('showRed')
$('.btnBox').children().eq(num).addClass('showRed')
newNum = num
}
好久没写轮播图已经快忘了怎么写了,记录一下。