大家在开发活动详情页的前端部分是不是没有好的思路，在这里给大家推荐一个好的方法，就不需要大家自己去写了，直接复制我的代码，喜欢请留下小心心谢谢！
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
*{
padding:0;
margin:0;
}body{width: 835px;margin:0 auto;}
.list-style-seven .clearfix{width: 100%;padding: 10px ;border: 1px solid #d3d3d378;}
.mylunbo{
margin:20px auto;
position: relative;
width: 720px;
height: 432px;
/*background-color: purple;*/
overflow: hidden;
}
img{
width:720px;
height:432px;
}
.mylunbo ul{
position: absolute;
top: 0;
left: 0;
width:500%;
}
ul li{
float:left;
list-style-type: none;
}
ol li{
list-style-type: none;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;/*高度40，上移20*/
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 350px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(240, 120, 120, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
a:hover{
color:red;
}
.lihalf {
float: left;
width: 50%;
}
.jieshao{padding: 10px;width: 100px;height:30px}
.content{padding:30px 10px }
</style>
<script type="text/javascript">
function animate(obj,length,callback){
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var step=(length-obj.offsetLeft)/10; // 缓动效果，步长=（目标值-当前值）/10
step=step>0 ? Math.ceil(step) : Math.floor(step);
if(obj.offsetLeft==length){
clearInterval(obj.timer);
if(callback)
callback();
//callback && callback()
}
obj.style.left=obj.offsetLeft+step+'px';
},15);
}
window.addEventListener('load',function(){
const lunbo=document.querySelector(".mylunbo");
const arrowl=document.querySelector(".arrow-l");
const arrowr=document.querySelector(".arrow-r");
var num=0; // 左右移动按钮定位图片
var circle=0; // 定位小圆点
var flag=true; // 节流阀
//1、右侧按钮，左侧按钮
lunbo.addEventListener('mouseenter',function(){
arrowl.style.display='block';
arrowr.style.display='block';
clearInterval(timer); // 清楚计时器，轮播图不自动播放
//timer=null; // 清楚timer变量
});
lunbo.addEventListener('mouseleave',function(){
arrowl.style.display='none';
arrowr.style.display='none';
timer=setInterval(function(){
arrowr.click();
},5000);
});
//2、创建小圆点
const ul=lunbo.querySelector("ul");
const ol=lunbo.querySelector("ol");
for(let i=0;i<ul.children.length;i++){ // 根据图片数量生成小圆点
let li=document.createElement("li");
li.setAttribute('index',i); // 添加自定义属性index
ol.appendChild(li);
//3、添加小圆圈点击事件
li.onclick=function(){
for(let i=0;i<ol.children.length;i++){
ol.children[i].className='';
}
this.className='current';
//4、小圆圈动画
let lunbowidth=lunbo.offsetWidth;
let index=this.getAttribute('index');
num=circle=index; // 点击小圆点时，将num和circle的值赋值为index，即将小圆点顺序和左右按钮的num定位到当前图片
animate(ul,-index*lunbowidth); // 调用动画函数，-index*lunboWidth为终点位置
}
}
//5、克隆子元素-->ABCDA，此时最后一张图为第一张图的复制！！
let child=ul.children[0].cloneNode(true);
ul.appendChild(child);
ol.children[0].className='current';
//6、右侧按钮点击事件
arrowr.addEventListener('click',function(){
if(flag){
flag=false; // 未完成轮播动画，不能轮播，设置为false
if(num==ul.children.length-1){
ul.style.left=0; // 当点击到最后一个图片时，即和第一幅图相同的那张，num为ul.children.length-1,先切换到第一张(很快),执行动画切换到第二张
num=0; // num重新设为0，后面再加1
}
num++;
animate(ul,-num*lunbo.offsetWidth,function(){
flag=true; // 将flag设置为true，可以再次点击轮播
});
circle++;
if(circle==ol.children.length) // 当小圆圈移动到最后，点击右移，circle+1,此时circle为ol.children.length
circle=0;
setCurrent();
}
})
//7、左侧点击事件
arrowl.addEventListener('click',function(){
if(flag){
flag=false;
if(num==0){
num=ul.children.length-1; // 当轮播图为第一张图时，num设为最后一张图的index，之后再减一
ul.style.left=-num*lunbo.offsetWidth+'px'; // 先切换到最后一张图，之后再调用动画函数到实际倒数第二图
}
num--;
animate(ul,-num*lunbo.offsetWidth,function(){
flag=true;
});
circle--;
if(circle==-1) // 当小圆圈在第一个位置时，点击左移，circle-1，此时circle为-1
circle=ol.children.length-1;
setCurrent();
}
});
var timer=setInterval(function(){
arrowr.click();
},5000);
function setCurrent(){
for(let i=0;i<ol.children.length;i++){
ol.children[i].className='';
}
ol.children[circle].className='current';
}
})
</script>
</head>
<body>
<div class="mylunbo">
<a href="javascript:;" class="arrow-l"><</a>
<a href="javascript:;" class="arrow-r">></a>
<ul>
<li>
<a href="#"><img src="1.jpg" width="720" height="432" alt="" /></a>
</li>
<li>
<a href="#"><img src="1.jpg" width="720" height="432" alt="" /></a>
</li>
<li>
<a href="#"><img src="1.jpg" width="720" height="432" alt="" /></a>
</li>
<li>
<a href="#"><img src="1.jpg" width="720" height="432" alt="" /></a>
</li>
</ul>
<ol class="circle">
</ol>
</div>
<div class="list-columnrow">
<ul class="list-style-seven">
<li class="clearfix">
<div class="lihalf"><span class="ttl">时间：</span><span class="dtl">2023年10月27日 - 10月29日</span></div>
<div class="lihalf"><span class="ttl">地点：</span><span class="dtl">南京奥体中心东广场</span></div></li>
<li class="clearfix">
<div class="lihalf"><span class="ttl">类型：</span><span class="dtl"><a href="https://www.chezhanri.com/fangche" target="_bank">房车展</a></span></div>
<div class="lihalf"><span class="ttl">门票：</span><span class="dtl">未知</span></div></li>
<li class="clearfix"><span class="tt2">主办：</span><span class="dt2">中国汽车新闻工作者协会</span></li>
<li class="clearfix"><span class="tt2">承办：</span><span class="dt2">《房车时代》传媒、南京艾狄尔旅游文化发展有限公司</span></li>
<li class="clearfix"><span class="tt2">声明：</span><span class="dt2">1、本站不举办任何车展，所收录车展信息均来自网络，仅代表主办方当时有举办此车展的计划，并不保证一定会如期举行。2、如无特别说明，本站领取门票通道均为主办方链接，相关事宜请咨询主办方。</span></li>
</ul>
</div>
<div class="jieshao">展览介绍</div>
<div class="content">展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍展览介绍</div>
</body>
</html>
2296
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
