本文使用JQuery的动画，完成了一组轮播特效。
长白岛--后街咖啡 2021-12-5.jpg
使用方法：
补上三张图片，效果可见！
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./scripts/jquery.js"></script>
<style>
#gallery {
position: relative;
margin: 0 auto;
width: 900px;
height: 400px;
overflow: hidden;
}
#gallery>img {
width: 100%;
height: 100%;
position: absolute;
left: 800%;
z-index: 3;
border-radius: 20px;
}
.pointer{
bottom: 30px;
right: 30px;
position:absolute;
z-index: 8;
color: tomato;
}
.pointer span{
padding: 0px 10px;
background-color:antiquewhite;
border-radius: 18px;
opacity: 0.6;
margin: 5px;
}
.pointer span:hover{
cursor: pointer;
opacity: 1;
}
.pointer .current-pointer{
border:2px red solid;
opacity:1;
font-weight:800;
}
</style>
</head>
<body>
<div id="wraper" style="text-align: center;">
<div id="gallery">
<img src="./images/a.jpg" alt="">
<img src="./images/b.jpg" alt="">
<img src="./images/c.jpg" alt="">
<div class="pointer">
</div>
</div>
<button style="width: 300px;height: 60px;">next</button>
<button style="width: 300px;height: 60px;">prev</button>
</div>
<script>
$(function(){
let size=$('#gallery>img').length;
/*这一段特殊处理的代码：
把指示器处理的事件注册到父元素上，进而减少绑定的次数
*/
$('.pointer').on('click',function(event){
//此处需要判断是否点到了数字的span上
if(!(event.target instanceof HTMLDivElement)){
let index=$(event.target).data('index');
if(!$('img').is(":animated")){
reShow(index)
}
}
})
/*
此函数的处理逻辑如下：
将(index-1)张图片放到显示区域，将index指定的图片放到显示区域的下一处，
然后将图片全部向左平移（应用动画）。
删除所有的指示器，并重新生成指示器，同进将当前图片对应的指示器，加入特殊css
*/
function reShow(index){
$('img').css({left:'800%'})//将所有的img扔到一个不能被看到的地方的即可
//清空指示器，并重新渲染出指示器
$('.pointer').empty()
for(let i=0;i<size;i++){
$('<span></span>').text(i+'')
.data('index',i)//将数字绑定到了span的data上，便于分离出事件注册的代码
.appendTo('.pointer')
}
$('img').eq((size-1+index)%size).css({left:'0%'})
$('img').eq(index).css({left:'100%'})
//更新指示器的颜色
$('.pointer>span').eq(index%size).addClass('current-pointer')
$('img').animate({left:"-=100%"},1000)
}
//初始化：显示第一张图片
reShow(0)
//为两个按键注册处理方法
$('button:contains("next")').on('click',function(){
if(!$('img').is(":animated")){
reShow((++cur)%size)
}
})
$('button:contains("prev")').on('click',function(){
if(!$('img').is(":animated")){
cur+=(size-1)
reShow(cur%size)
}
})
})
</script>
</body>
</html>
网友评论