js中图片无缝切换的两种方法

最新推荐文章于 2024-05-15 10:15:46 发布

冰雪为融

最新推荐文章于 2024-05-15 10:15:46 发布

阅读量5.4k

点赞数

分类专栏： js学习笔记整理文章标签： js 无缝切换 dom节点

本文链接：https://blog.csdn.net/lhjuejiang/article/details/79555393

版权

js学习笔记整理专栏收录该内容

56 篇文章 7 订阅

订阅专栏

第一种：只适应于可视区只有一个元素的时候，例如整屏切换效果。下面我写的是自适应屏幕宽度的轮播图

实现步骤：

1、屏幕自适应的处理：当屏幕大小大于1000的时候，让图片居中，解决办法是，用图片的宽度减去可视区的宽度，整体除以2，来实现图片的居中

2、图片的轮播切换（此处，主要需要解决的问题是想办法是改变第一个元素的定位）

当然我们都很清楚，实现图片的自动轮播切换，一定离不了的是定时器，下面我就写我的实现步骤

HTML：

<body>
<!--
[if lte IE 6]>
<div class="ie6-out"><div class="ie6-in">
<![endif]
-->//因为IE6下，没有min-width的属性，所以在body中添加头和尾实现兼容
<div id="div1">
    <ul>
        <li><img src="img/a.jpg"/></li>
        <li><img src="img/b.jpg"/></li>
        <li><img src="img/c.jpg"/></li>
    </ul>
        <div id="btn">//此处使用a标签作按钮，因为当给它加display：inline-block时它可以自适应居中，排成一排，如果不使用a标签，使用其他标签，IE6下它不是排成一排而是排成一列，所以此处建议使用a标签作为按钮
            <a  class="active"></a>
            <a></a>
            <a></a>
        </div>

</div>

<!-- [if lte IE 6]>
</div>
</div>
<![endif]
-->
</body>

CSS代码

 <style>
        *{padding:0; margin:0;}
        li{list-style:none;}
        #div1{min-width:1000px; height:396px; position:relative; overflow:hidden;}
        #div1 ul{position:absolute; left:0;}
        #div1 ul li{float:left;}
        #div1 ul li img{position:relative; width:1920px; height:396px;}
        #btn{position:absolute; width:100%; text-align:center; bottom:0;}
        #btn a{cursor:pointer; display:inline-block;width:11px; height:11px; background:white; border-radius:50%;}
        #btn  .active{background:red;}
        #btn a:hover{background:red;}
        *html .ie6-out{margin-left:1000px; zoom:1;}//解决IE6不兼容的效果（min-width）
        *html .ie6-in{position:relative; float:left; margin-left:-1000px;}
    </style>

JS代码

首先我们需要引入运动框架，有兴趣的点击运动框架

 <script src="move.js"></script>
    <script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var aImg = oUl.getElementsByTagName('img');
            var oBtn = document.getElementById('btn');
            var aA = document.getElementsByTagName('a');
            var imgWidth = 1920;
            var iNow = 0;
            var iNow2 = 0;
            var iTimer = null;
            oUl.style.width = imgWidth*aImg.length+'px';
            function reSize(){
                var veiwWidth = document.documentElement.clientWidth;//计算可视区的宽度
                if(veiwWidth>1000){
                    for(var i=0; i<aImg.length;i++){
                        aImg[i].style.left = -(imgWidth-veiwWidth)/2 +'px';//让图片居中
                    }
                }
            }
            reSize();
            window.onresize = function(){
                reSize()
            };
 iTimer = setInterval(function(){

                if(iNow == aA.length-1){//当iNow等于图片的个数减一的时候，把第一个li设置为相对定位，并让其的left的值为图片的个数乘以图片的宽度，当下面的startMove函数执行完毕后，再将定位去除，并让oUl的left值为0，实现无缝切换

                   aLi[0].style.position = 'relative';
                   aLi[0].style.left=imgWidth*aLi.length+'px';
                    iNow = 0;

                }else{
                    iNow++;
                }
                iNow2++;
                for(var i=0; i<aA.length;i++){
                    aA[i].className='';
                }
                aA[iNow].className='active';

                    startMove(oUl,{left:-imgWidth*iNow2},function(){
                        if(iNow==0){
                            aLi[0].style.position = 'static';
                            oUl.style.left = 0;
                            iNow2 = 0;
                        }

                    })



            },3000);
        }
</script>

第二种是利用dom节点的方法实现无缝切换

原理：将oUl中的第一个li剪切掉然后追加到oUl的最后，不断重复实现图片的无缝切换

HTML和css代码和上面的一样，下面只写js代码

此处也需要首先引入运动框架，点击运动框架

<script>
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            var oUl = oDiv.getElementsByTagName('ul')[0];
            var aLi = oUl.getElementsByTagName('li');
            var aImg = oUl.getElementsByTagName('img');
            var oBtn = document.getElementById('btn');
            var aA = document.getElementsByTagName('a');
            var imgWidth = 1920;
            var iNow = 0;
            var iTimer = null;
            oUl.style.width = imgWidth*aImg.length+'px';
            function reSize(){
                var veiwWidth = document.documentElement.clientWidth;
                if(veiwWidth>1000){
                    for(var i=0; i<aImg.length;i++){
                        aImg[i].style.left = -(imgWidth-veiwWidth)/2 +'px';
                    }
                }
            }
            reSize();
            window.onresize = function(){
                reSize();
            };
            var onOff = true;
iTimer = setInterval(function(){
             if(onOff){
                 onOff = false;
                 startMove(oUl,{left:-imgWidth});//要先运动再开始剪切复制节点，如果一开始就把运动和剪切复制节点在一起，那么不管运动是在前面还是后面，它都是后执行的，所以要先将运动单独放在一个作用域中，否则和剪切节点在一起造成先剪切和复制，后运动，导致第一次运动出错，后面的就没事了
             }else{
                 oUl.appendChild(aLi[0]);
                 oUl.style.left = 0;
                 startMove(oUl,{left:-imgWidth});
             }
                if(iNow ==aA.length-1){
                    iNow = 0;
                }else{
                    iNow++;
                }

                for(var i=0; i<aA.length;i++){
                    aA[i].className='';
                }
                aA[iNow].className='active';

            },3000);
        }
    </script>

上面的两种方法就是实现无缝切换的两种思路。第二种方法比较通用，并且好理解一点。但当可视区只有一个图片显示的时候，从性能优化的方向考虑使用第一种会好一点。但当可视区有多个图片的时候只能使用第二种方法

冰雪为融

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
1
评论
js中图片无缝切换的两种方法

第一种：只适应于可视区只有一个元素的时候，例如整屏切换效果。下面我写的是自适应屏幕宽度的轮播图实现步骤：1、屏幕自适应的处理：当屏幕大小大于1000的时候，让图片居中，解决办法是，用图片的宽度减去可视区的宽度，整体除以2，来实现图片的居中2、图片的轮播切换（此处，主要需要解决的问题是想办法是改变第一个元素的定位）当然我们都很清楚，实现图片的自动轮播切换，一定离不了的是定时器，下面我就写我的实现步骤...
复制链接

扫一扫