• 售前

  • 售后

热门帖子
入门百科

HTML5轮播图全代码

[复制链接]
忆困血馆闻 显示全部楼层 发表于 2021-8-14 14:29:51 |阅读模式 打印 上一主题 下一主题
轮播图原理大概是这样的,假定三张图片必要做轮播效果,首先必要将这三张图片并列放置,然后将这个整体并列向左移动,每当一张图片完整的从表现框走出,则将这张图片放置到最后面,循环往复就可以实现图片向左(或一个方向)移动。然后,必要有两个定时器,一个定时器A控制三张图片整体左移速率,另一个定时器B控制每当一张完整的图片走进这个表现框就等待一到两秒得到更好的用户体验。
我这里用三个div框看成轮播图来演示。
在html的body中添加一个div作为表现框,然后在这个div内部添加三个子div作为图片表现。代码如下:
  1. <div id="box">
  2.         <div id="red" class="slide"></div>
  3.         <div id="green" class="slide"></div>
  4.         <div id="blue" class="slide"></div>
  5. </div>
复制代码
头部添加css样式:
此时网页中应该是有一个黑色表现框div,内部有红、绿、蓝三个div框,三个框从上到下分列。
第一步,必要将三张图片都并列表现。
要实现将div挪动,且div比力方便控制每时每刻的位置(移动),只能使用相对定位,且为方便,三个子div位置移动应该是相对box,以是box应该作为相对的参照点。分别为box和slide代码添加position属性:
  1. #box{
  2.         width:100px;
  3.         height:100px;
  4.         border:1px solid black;
  5.         position:relative;
  6. }
  7. .slide{
  8.         width:100px;
  9.         height:100px;
  10.         position:absolute;
  11. }
复制代码
为整个页面添加onload加载完成事故,当欣赏器打开并加载完并主动实行事故中的代码块。这部门js代码写在刚才css下面即可,保持同级布局。
  1. <script type="text/javascript">
  2. onload=function(){
  3.         var arr = document.getElementsByClassName("slide");
  4.         for(var i=0;i<arr.length;i++){
  5.                 arr[i].style.left = i*100+"px";
  6.         }
  7. }
  8. </script>
复制代码
当页面加载完全,三个div应该并列在一起。
接下来,必要实现将这三个div整体向左移动,使用定时器,即前面的定时器A。*onload同级下面添加如下代码:
  1. function LeftMove(){
  2.                 var arr = document.getElementsByClassName("slide");//获取三个子div
  3.                 for(var i=0;i<arr.length;i++){
  4.                         var left = parseFloat(arr[i].style.left);
  5.                         left-=2;
  6.                         var width = 100;//图片的宽度
  7.                         if(left<=-width){
  8.                                 left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
  9.                         }
  10.                         arr[i].style.left = left+"px";
  11.                 }
  12.                 }
  13.         moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器,并给自己取名
  14. **此时,三个div已经能够缓慢向左移动。现在需要再开启一个定时器B,并将A定时器装入到B定时器中,A的定时器时间间隔应该长于一个div完全走进显示框的时间,我这里设置为3秒。然后,将A定时器装入到方法divInterval中,B定时器调用这个方法。且为了用户体验效果更好,当一个div完全走入显示框后,应该等待一段时间,再开是移动。所以在LeftMove方法中,*if判断中还需关闭moveId这个定时器*,停止此时移动的div定时器。当3秒不到的时间后,定时器B又会开启一个新的定时器A。**
  15.         if处添加一句代码为:
  16.                
  17. if(left<=-width){
  18.                                 left=(arr.length-1)*width;//当图片完全走出显示框,拼接到末尾
  19.                                 clearInterval(moveId);
  20.                         }
  21.                
  22.                 function divInterval(){
  23.                 moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器
  24.                 }
  25.                 timeId=setInterval(divInterval,3000);//设置一个3秒的定时器。
复制代码
到这里,轮播图根本已经实现了。然后,还必要在css样式中为box添加overflow,将超出表现框的div隐蔽。
  1.         #box{
  2. width:100px;
  3. height:100px;
  4. border:1px solid black;
  5. position:relative;
  6. overflow:hidden;}
复制代码
然后为相识决当鼠标悬停在轮播图,轮播图停止轮播效果,必要在box上添加鼠标移入和移失事故。开始标签:
  1. <div id="box" onmouseover="stop()" onmouseout="start()">
复制代码
添加js代码:
  1. function stop(){
  2.         clearInterval(timeId);//鼠标停留关闭B定时器
  3. }
  4. function start(){
  5.         clearInterval(timeId);//重新打开一个定时前,先关闭之前定时器。
  6.         timeId=setInterval(divInterval,2000);//重启一个定时器
  7. }
复制代码
当欣赏器窗口切出或页面切换到其他页面一段时间再返来时,轮播效果会有短暂加速(随切出时间加长而加长)。主要是由于固然窗口切出去了,定时器依然在实行,但页面却没有将效果表现,以是切返来后会将之前的效果表现出来而加速轮播图。以是添加页面焦点事故:
  1. //页面失去焦点定时器停止
  2. onblur = function(){
  3.         stop();
  4. }
  5. //页面获取焦点时重启定时器
  6. onfocus = function(){
  7.         start();
  8. }
复制代码
全部代码如下:
  1. <!DOCTYPE html><html><head><meta charset="UTF-8"><title>轮播图</title><style type="text/css">        #box{                width:100px;                height:100px;                border:1px solid black;                position:relative;                overflow:hidden;        }        #red{                background-color:red;                width:100px;        }        #green{                background-color:green;                width:100px;        }        #blue{                background-color:blue;                width:100px;        }        .slide{                width:100px;                height:100px;                position:absolute;        }</style><script type="text/javascript">        onload=function(){                var arr = document.getElementsByClassName("slide");                for(var i=0;i<arr.length;i++){                        arr[i].style.left = i*100+"px";                }        }        function LeftMove(){                var arr = document.getElementsByClassName("slide");//获取三个子div                for(var i=0;i<arr.length;i++){                        var left = parseFloat(arr[i].style.left);                        left-=2;                        var width = 100;//图片的宽度                        if(left<=-width){                                left=(arr.length-1)*width;//当图片完全走出表现框,拼接到末尾                                clearInterval(moveId);                        }                        arr[i].style.left = left+"px";                }        }        function divInterval(){                moveId=setInterval(LeftMove,10);//设置一个10毫秒定时器        }                        timeId=setInterval(divInterval,2000);//设置一个3秒的定时器。                function stop(){                clearInterval(timeId);        }        function start(){                clearInterval(timeId);                timeId=setInterval(divInterval,2000);        }                //页面失去焦点停止        onblur = function(){                stop();        }        //页面获取焦点时开始        onfocus = function(){                start();        }</script></head><body>        <div id="box" onmouseover="stop()" onmouseout="start()">                <div id="red" class="slide"></div>                <div id="green" class="slide"></div>                <div id="blue" class="slide"></div>        </div></body></html>
复制代码
到此这篇关于HTML5轮播图全代码的文章就介绍到这了,更多相干HTML5轮播图内容请搜刮草根技术分享以前的文章或继承欣赏下面的相干文章,盼望大家以后多多支持草根技术分享!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作