首页 前端知识 【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放 手动播放

【学会轮播图这一篇文章就足够啦】JS 网页轮播图详解 自动播放 手动播放

2024-06-22 01:06:48 前端知识 前端哥 121 952 我要收藏

long=numwindows.offsetWidth-6num;

run(circleul,-long);

我们点击右侧按钮,图片滚动的同时,小圆圈也应该跟着切换才对,该怎么实现呢?

每点击一次都让circlechange这个变量自增,当自增到值和 circleul.children.length-1 的值相等时(即滚动到了克隆过去的最后一张图片),这时让 circlechange 变为 0 即可

circlechange++;

if(circlechange==circleul.children.length-1){

circlechange=0;

}

for(var i=0;i<circleol.children.length;i++){ //排他思想

circleol.children[i].className=‘’;

}

circleol.children[circlechange].className=‘circlecolor’;

})


五:左侧按钮滚动实现 以及 下方点点同步改变

=======================

向左切换和向右切换的原理类似,在此我们只研究第一张图片开始往左无缝衔接最后一张图片的过程

第一次点击左侧按钮后:

代码实现:

leftbtn.addEventListener(‘click’,function(){

if(num==0){

circleul.style.left=(circleul.children.length-1)*windows.offsetWidth;

num=circleul.children.length-1;

}

num–;

long=numwindows.offsetWidth-6num;

run(circleul,-long);

点击左侧按钮,小圆圈跟随切换:

circlechange–;

if(circlechange<0){

circlechange=circleol.children.length-1; //注意此处是ol的子节点的长度-1

}

for(var i=0;i<circleol.children.length;i++){

circleol.children[i].className=‘’;

}

circleol.children[circlechange].className=‘circlecolor’;

})


六:自动播放实现

========

自动播放最简单!,只需要一个自动点击即可

**此处为右侧按钮自动点击:**rightbtn.click()

将其添加在定时器中就可以完成我们的轮播图啦

var timer=setInterval(function(){

rightbtn.click();

},2000)

完整JS代码:

=======

我们的 JS 是单独的一个文件,所以加入了 load 事件等文档流执行完毕后,再执行 JS 的内容

window.addEventListener(‘load’,function(){

var leftbtn=document.querySelector(‘.leftbtn’);

var rightbtn=document.querySelector(‘.rightbtn’);

var windows=document.querySelector(‘.windows’);

var circleul=document.querySelector(‘.imgbox’);

var circleol=document.querySelector(‘.circle’);

//光标移动至轮播图区域按钮显示,移开隐藏,点击按钮的变化效果

windows.addEventListener(‘mouseenter’,function(){

leftbtn.style.display=‘block’;

rightbtn.style.display=‘block’;

clearInterval(timer)//清除定时器自动播放

timer=null;

})

windows.addEventListener(‘mouseleave’,function(){

leftbtn.style.display=‘none’

rightbtn.style.display=‘none’

timer=setInterval(function(){

rightbtn.click();

},2000)

})

leftbtn.addEventListener(‘click’,function(){

leftbtn.style.color=‘grey’

var timer=setTimeout(function(){

leftbtn.style.color=‘aliceblue’

},100)

})

rightbtn.addEventListener(‘click’,function(){

rightbtn.style.color=‘grey’

var timer=setTimeout(function(){

rightbtn.style.color=‘aliceblue’

},100)

})

//点击小圆圈可以滚动

for(var i=0;i<circleul.children.length;i++){

lis=document.createElement(‘li’);

lis.setAttribute(‘index’,i);

circleol.appendChild(lis);

lis.addEventListener(‘click’,function(){

var currentindex=this.getAttribute(‘index’);//bug整改(3行)

num=currentindex;

circlechange=currentindex;

for(var i=0;i<circleol.children.length;i++){

circleol.children[i].className=‘’;

}

this.className=‘circlecolor’;

var imgwidth=windows.offsetWidth-6;

var long=this.getAttribute(‘index’)*imgwidth;

run(circleul,-long);

})

}

circleol.children[0].className=‘circlecolor’;

//克隆第一张图片至末尾

var firstimg=circleul.children[0].cloneNode(true);

circleul.appendChild(firstimg);

//右侧按钮点击滚动

num=0;

circlechange=0;

rightbtn.addEventListener(‘click’,function(){

if(num==circleul.children.length-1){

circleul.style.left=0;

num=0;

}

num++;

long=numwindows.offsetWidth-6num;

run(circleul,-long);

//小圆圈跟着一起变化

circlechange++;

if(circlechange==circleul.children.length-1){

circlechange=0;

}

for(var i=0;i<circleol.children.length;i++){

circleol.children[i].className=‘’;

}

circleol.children[circlechange].className=‘circlecolor’;

})

//左侧按钮滚动

leftbtn.addEventListener(‘click’,function(){

if(num==0){

circleul.style.left=(circleul.children.length-1)*windows.offsetWidth;

num=circleul.children.length-1;

}

num–;

long=numwindows.offsetWidth-6num;

run(circleul,-long);

//小圆圈跟着一起变化

circlechange–;

if(circlechange<0){

circlechange=circleol.children.length-1; //注意此处是ol的子节点的长度-1

}

for(var i=0;i<circleol.children.length;i++){

circleol.children[i].className=‘’;

}

circleol.children[circlechange].className=‘circlecolor’;

})

//自动播放

var timer=setInterval(function(){

rightbtn.click();

},2000)

})

动画函数代码:

=======

function run(obj,long,callback){

clearInterval(obj.timer)

obj.timer=setInterval(function(){

if(obj.offsetLeft==long){

window.clearInterval(obj.timer);

if(callback){

callback();

}

}else{

step=(long-obj.offsetLeft)/10

step=step>0?Math.ceil(step):Math.floor(step)

obj.style.left=obj.offsetLeft+step+‘px’;

}

},20)

}

HTML+CSS 完整代码:

==============

Document < >
    • 轮播图

    • 轮播图

    • 轮播图

    • 轮播图

      **自我介绍一下,小编13年上海交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**

      深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

      因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

      img

      既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

      由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

      如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)

      最后

      正值金三银四招聘旺季,很多小伙伴都询问我有没有前端方面的面试题,特地整理出来赠送给大家!

      资料领取方式:点击这里前往获取

      交大毕业,曾经在小公司待过,也去过华为、OPPO等大厂,18年进入阿里一直到现在。**

      深知大多数前端工程师,想要提升技能,往往是自己摸索成长或者是报班学习,但对于培训机构动则几千的学费,着实压力不小。自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前!

      因此收集整理了一份《2024年Web前端开发全套学习资料》,初衷也很简单,就是希望能够帮助到想自学提升又不知道该从何学起的朋友,同时减轻大家的负担。

      [外链图片转存中…(img-OfBmiuwp-1713000453650)]

      [外链图片转存中…(img-go2D0psK-1713000453651)]

      既有适合小白学习的零基础资料,也有适合3年以上经验的小伙伴深入学习提升的进阶课程,基本涵盖了95%以上前端开发知识点,真正体系化!

      [外链图片转存中…(img-NTDcMiwF-1713000453651)]

      由于文件比较大,这里只是将部分目录截图出来,每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频,并且会持续更新!

      如果你觉得这些内容对你有帮助,可以扫码获取!!(备注:前端)

      最后

      正值金三银四招聘旺季,很多小伙伴都询问我有没有前端方面的面试题,特地整理出来赠送给大家!

      资料领取方式:点击这里前往获取

      前端资料图.PNG

    转载请注明出处或者链接地址:https://www.qianduange.cn//article/13201.html
    标签
    评论
    发布的文章

    HTML5 多人游戏开发(二)

    2024-07-20 17:07:44

    web前端(第一天HTML)

    2024-07-20 17:07:16

    HTML 音频(Audio)

    2024-07-20 17:07:15

    大家推荐的文章
    会员中心 联系我 留言建议 回顶部
    复制成功!