다중 이미지 캐러셀
今天我们主要用三种方式实现多张图片轮播,运用的语言是web中的html,使用软件是HBuilder。
达到以下这种效果:![可以通过下方原点点击或者左右两侧点击进行图片的切换](https://img-blog.csdnimg.cn/59365cb3e7454d0eadc15f9eb57d3d51.png#pic_center)
首先我们看html文件中先建立一个盒子,里面装载所有的图片,叠放在一堆。
<div id="wrap">
<ul class="imgs">
<li class="active"><a href="#"><img src="img/1.jpg"/></a></li>
<li><a href="#"><img src="img/2.jpg"/></a></li>
<li><a href="#"><img src="img/3.jpg"/></a></li>
<li><a href="#"><img src="img/4.jpg"/></a></li>
<li><a href="#"><img src="img/5.jpg"/></a></li>
<li><a href="#"><img src="img/6.jpg"/></a></li>
<li><a href="#"><img src="img/7.jpg"/></a></li>
</ul>
<ul class="lrbtn">
<li><</li>
<li>></li>
</ul>
<ul class="btn">
<li class="on"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
그런 다음 css의 일부 설정을 통해 그림 스타일의 크기를 수정합니다.
*{
margin: 0;
padding: 0;
}
#wrap{
position: relative;/*容器盒子都是设为相对定位*/
width: 590px;
height: 470px;
margin: 50px auto;/*左右居中*/
}
/*图前面的小点和箭头去掉*/
#wrap ul{
list-style: none;
}
/*将图片都叠加到一块(布局)*/
#wrap .imgs li{
position: absolute;/*所有图片居中集合*/
display: none;
}
/*当前活动图的展示*/
#wrap .imgs li.active{
display: block;
}
/*左右按钮的布局*/
#wrap .lrbtn li{
position: absolute;
top: 50%;/*垂直布局*/
margin-top: -40px;/*相对居中*/
width:40px ;
height: 80px;
background-color: white;/*背景色*/
opacity: 0.5;/*透明度*/
line-height: 80px;/*小箭头垂直居中,行高设置与按钮同高就可以*/
}
#wrap .lrbtn li:last-child{
right: 0;
}
/*轮播按钮的布局设计*/
#wrap .btn{
position: absolute;
bottom: 10px;
left: 0;
right: 0;
margin: auto;
background-color: pink;
display: flex;
width: 210px;
height: 30px;
border-radius: 20px;
}
#wrap .btn li{
width: 20px;
height: 20px;
flex:1;
border-radius: 10px;
background-color: white;
margin: 5px;
}
#wrap .btn li.on{
background-color: red;
}
마지막으로 js 애니메이션을 사용하여 사진 회전식 효과의 세 가지 방식을 달성합니다. 자동 재생, 하단 버튼을 클릭하여 사진을 전환하고 왼쪽과 오른쪽을 클릭하여 위아래 사진을 전환합니다.
<script >
//图片自动轮播方法
//下方焦点切换方法
var curIndex =0;
var imgs=document.querySelectorAll("#wrap .imgs li")
var btns=document.querySelectorAll("#wrap .btn li")
/*测试输出*/
// console.log(btns,imgs)
for(let i=0;i<btns.length;i++){
btns[i].index=i
btns[i].onclick=start
}
function start(){
curIndex=this.index;
// console.log(curIndex);
for(let i=0;i<btns.length;i++){
btns[i].classList.remove("on")
imgs[i].classList.remove("active")
}
btns[curIndex].classList.add("on")
imgs[curIndex].classList.add("active")
}
//左右按钮的图片切换方法
//获取左右按钮
let left = document.querySelector('#wrap .lrbtn').firstElementChild
let right = document.querySelector('#wrap .lrbtn').lastElementChild
//点击左按钮,索引减少,图片切到上一张
left.onclick = function() {
if(curIndex===0){
curIndex=6
}else{
curIndex--
}
for(let i=0;i<btns.length;i++){
btns[i].classList.remove("on")
imgs[i].classList.remove("active")
}
btns[curIndex].classList.add("on")
imgs[curIndex].classList.add("active")
}
//点击右按钮,索引增加,图片切到下一张
right.onclick = function() {
curIndex=(++curIndex)%7
for(let i=0;i<btns.length;i++){
btns[i].classList.remove("on")
imgs[i].classList.remove("active")
}
btns[curIndex].classList.add("on")
imgs[curIndex].classList.add("active")
}
</script>
마지막으로 모든 분들께 도움이 되었으면 합니다. 이것은 웹 페이지의 작은 기능입니다. 이해가 되지 않으면 메시지를 남기거나 개인 메시지를 보낼 수 있습니다. 시간이 있을 때 하나씩 답변해 드리겠습니다!