本文详细介绍了一种基于HTML和CSS实现的图集轮播效果，包括图片切换、标题更新及焦点跟随等功能，通过JavaScript控制图片顺序和循环播放，适用于网页设计中的图片展示需求。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{padding: 0;margin: 0;}
#wrap{
width: 700px;
text-align: center;
margin: 0 auto;
}
#box{
width: 700px;
height: 525px;
border: 1px solid;
position: relative;
}
#box img{
width: 700px;
height: 525px;
}
#box p{
position: absolute;
width: 100%;
line-height: 30px;
background: rgba(0,0,0,.3);
color: #fff;
}
#box .title1{
top: 0;
}
#box .title2{
bottom: 0;
}
#box button{
position: absolute;
width: 35px;
height: 50px;
font-size: 30px;
top: 50%;
margin-top: -25px;
background:rgba(0,0,0,.3);
color: #fff;
}
#box .leftBut{
left: 0;
}
#box .rightBut{
right: 0;
}
.focus-list{
width: 80px;
position: absolute;
bottom: 50px;
left: 50%;
margin-left: -40px;
z-index:999;
}
.focus-list span{
float: left;
width: 10px;
height: 10px;
margin: 0 5px;
border-radius: 50%;
background-color: #fff;
}
</style>
</head>
<body>
<div id="wrap">
<button>顺序</button>
<button>循环</button>
<div id="box">
<img src="img/1.jpg" alt="">
<p class="title1">1/4</p>
<p class="title2">美女1</p>
<button class="leftBut"><</button>
<button class="rightBut">></button>
<!-- 焦点列表 -->
<div class="focus-list">
<span style="background-color: orange;"></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script>
var imgArr = ['img/dm.jpeg','img/dm1.jpeg','img/dm3.jpg','img/dm3.jpg'];
var oWrap = document.getElementById('wrap');
var btn1 = oWrap.getElementsByTagName('button')[0];
var btn2 = oWrap.getElementsByTagName('button')[1];
var oPic = oWrap.getElementsByTagName('img')[0];
var title1 = oWrap.getElementsByTagName('p')[0];
var title2 = oWrap.getElementsByTagName('p')[1];
var leftBtn = oWrap.getElementsByTagName('button')[2];
var rightBtn = oWrap.getElementsByTagName('button')[3];
var focusList = oWrap.getElementsByClassName('focus-list')[0];
var spans = focusList.getElementsByTagName('span');//[span,span,span,span]
//点击右箭头,切换下一张
var step = 0; // step表示要显示的图片的索引值
var flag = 0; // flag用来标记循环还是顺序, 0表示顺序 , 1表示循环
rightBtn.onclick = function(){
//点击一次右箭头,step+1
step++;
if(step === 4){
// if(flag === 0){
// step = 3;
// }else{
// step = 0;
// }
flag == 0 ? step = 3 : step = 0;
}
// 取出数组中对应的图片路径,设置给图片的src属性
oPic.src = imgArr[step];
// 把title1里面的数字同步切换
title1.innerHTML = (step+1) + '/4';
// 把title2里面的数字同步切换
title2.innerHTML = '美女' + (step+1);
focusFllow();
}
leftBtn.onclick = function(){
//点击一次左箭头,step-1
step--;
if(step === -1){
flag === 0 ? step = 0 : step = 3;
}
// 取出数组中对应的图片路径,设置给图片的src属性
oPic.src = imgArr[step];
// 把title1里面的数字同步切换
title1.innerHTML = (step+1) + '/4';
// 把title2里面的数字同步切换
title2.innerHTML = '美女' + (step+1);
focusFllow();
}
//点击顺序按钮,flag赋值为0
btn1.onclick = function(){
flag = 0;
}
//点击循环按钮,flag赋值为1
btn2.onclick = function(){
flag = 1;
}
// 焦点跟随
function focusFllow(){
for(var i = 0; i < spans.length; i++){
spans[i].style.backgroundColor = "#fff";
}
spans[step].style.backgroundColor = 'orange';
}
</script>
</body>
</html>
实现效果如下
扫一扫
1801
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
