您正在使用IPV4(35.168.110.128)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器
[公益]文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】多款云产品1折起,买云服务器送免费机器,最长免费续3个月      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 中秋节 21
2022年 国庆节 42
2023年 元 旦 134
2023年 春 节 155
 
本类新增
本类热门文章
您现在的位置:首页 >> 脚本程序 >> 内容
JavaScript实现无缝轮播图的示例代码
内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'metahttp-equiv='X-UA-Compatible'content='IE=edge'metaname='viewport'content='width=device-width,initial-scale=1.0'titleDocument/titl......
<!DOCTYPEhtml>

<htmllang="en">

<head>

<metacharset="UTF-8">

<metahttp-equiv="X-UA-Compatible"content="IE=edge">

<metaname="viewport"content="width=device-width,initial-scale=1.0">

<title>Document</title>

<style>

*{

margin:0;

padding:0;

box-sizing:border-box;

}

.carousel-container{

margin:0auto;

position:relative;

width:500px;

height:300px;

/*overflow:hidden;*/

background-color:#ccc;

}

.carousel-container.carousel-list{

position:relative;

display:flex;

height:100%;

width:100%;

}

.carousel-container.carousel-list.slide{

flex:00100%;

height:100%;

width:100%;

}

.slidea{

display:flex;

justify-content:center;

align-items:center;

height:100%;

width:100%;

}

.slideaimg{

width:100%;

}

.carousel-container.carousel-arrow{

display:none;

position:absolute;

width:36px;

height:36px;

border-radius:50%;

color:white;

text-align:center;

line-height:36px;

cursor:pointer;

background-color:rgba(31,45,61,.2);

}

.carousel-container:hover.carousel-arrow{

display:block;

}

.carousel-container:hover.carousel-arrow:hover{

background-color:rgba(31,45,61,.4);

}

.carousel-container.carousel-arrow-left{

top:50%;

left:2%;

transform:translateY(-50%);

}

.carousel-container.carousel-arrow-right{

top:50%;

right:2%;

transform:translateY(-50%);

}

.carousel-container.indicator{

display:flex;

position:absolute;

left:50%;

top:90%;

transform:translateX(-50%)

}

.carousel-container.indicatorspan{

margin:2px5px;

padding:3px;

width:5px;

height:5px;

border:1pxsolidwhite;

border-radius:5px;

}

.active{

background-color:#fff;

}

</style>

</head>

<body>

<divclass="carousel-container">

<divclass="carousel-list">

<divclass="slide">

<ahref="">

<img

src="https://ts4.cn.mm.bing.net/th?id=OIP-C.kB-Ovasi0GW67-rmwnAcwAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2">

</a>

</div>

<divclass="slide">

<ahref="">

<img

src="https://ts1.cn.mm.bing.net/th?id=OIP-C.QPH1IBosDYBqaU3O6wV3YAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"></a>

</div>

<divclass="slide">

<ahref="">

<img

src="https://ts2.cn.mm.bing.net/th?id=OIP-C.P3NSGTdAYdyqy5zJpb5QXQHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.25&pid=3.1&rm=2"

alt=""></a>

</div>

</div>

<divclass="carousel-arrowcarousel-arrow-left">&lt</div>

<divclass="carousel-arrowcarousel-arrow-right">&gt</div>

<divclass="indicator">

<spanclass="active"></span>

<span></span>

<span></span>

</div>

</div>

</body>

<script>

window.onload=function(){

constdoms={

carouselList:document.querySelector('.carousel-list'),

arrowLeft:document.querySelector('.carousel-arrow-left'),

arrowRight:document.querySelector('.carousel-arrow-right'),

indicator:document.querySelectorAll('.indicatorspan')

}

letcurrentIndex=0;

functionmoveTo(index){

doms.carouselList.style.transform=`translateX(-${index*100}%)`

doms.carouselList.style.transition='.5s'

//去掉导航点选中效果

letactive=document.querySelector('.indicatorspan.active')

active.classList.remove('active')

//添加选中效果

doms.indicator[index].classList.add('active')

currentIndex=index

}

//给导航点添加事件

doms.indicator.forEach((item,i)=>{

item.onclick=function(){

moveTo(i);

}

})

//复制第一张放最后,最后一张图片放第一张之前

functioninit(){

letlastImg=doms.carouselList.lastElementChild.cloneNode(true)

letfirstImg=doms.carouselList.firstElementChild.cloneNode(true)

doms.carouselList.appendChild(firstImg)

doms.carouselList.insertBefore(lastImg,doms.carouselList.firstElementChild)

lastImg.style.position='absolute'

lastImg.style.transform='translateX(-100%)'

}

letindicatorLength=doms.indicator.length;

functionpreSlide(){

if(currentIndex===0){

doms.carouselList.style.transition='none'

doms.carouselList.style.transform=`translateX(-${indicatorLength*100}%)`

doms.carouselList.clientHeight

moveTo(indicatorLength-1)

}else{

moveTo(currentIndex-1)

}

}

functionnextSlide(){

if(currentIndex===doms.indicator.length-1){

doms.carouselList.style.transition='none'

doms.carouselList.style.transform='translateX(100%)'

doms.carouselList.clientHeight

moveTo(0)

}else{

moveTo(currentIndex+1)

}

}

doms.arrowLeft.onclick=function(){

preSlide();

}

doms.arrowRight.onclick=function(){

nextSlide()

}

functionstart(time=2000){

setInterval(()=>{

nextSlide()

},time)

}

start()

init()

}

</script>

</html>

上一篇:JS实现模态框拖拽动态效果 下一篇:JS实现时间选择器
发布日期:2022/7/8
手机扫二维码直达本页
发布时间:14:40:04
点击:117
录入:壹家怡园
相关文章
Baidu

YiJiaCMS 6.3.1.220701(MSSQL) 闽ICP备05000814号-1
本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护
Copyright©2000-2022