通用轮播(包括响应式~)

时间 2019-11-09

标签通用包括响应繁體版

原文原文链接

话很少说,先上一段代码.此代码可根据浏览器窗口的大小自动改变根元素(html)的字体大小(即rem),把页面上须要设置宽高的元素,都以rem做为单位,只要rem不变,则宽高不变.rem改变,则宽高相应改变.而rem的大小会自动根据浏览器的可视范围大小而定,这样咱们即可以根据rem来愉快的设定响应式了....css

<script>
    !(function(win, doc){
        function setFontSize() {
            // 获取window 宽度
            var winWidth =  window.innerWidth;
            doc.documentElement.style.fontSize = (winWidth / 730) * 100 + 'px' ;
        };//这里标红的730指的是UI原稿中页面的大小.若是你的原稿是980,只需将730改为980便可.

        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';

        var timer = null;

        win.addEventListener(evt, function () {
            clearTimeout(timer);

            timer = setTimeout(setFontSize, 300);
        }, false);

        win.addEventListener("pageshow", function(e) {
            if (e.persisted) {
                clearTimeout(timer);

                timer = setTimeout(setFontSize, 300);
            }
        }, false);

        // 初始化
        setFontSize();

    }(window, document));
</script>

接下来咱们开始作轮播.

html部分:

<div class="father">
    <div class="img">
        <img src="../img/b1.jpg" alt="img1" id="img1"/>
        <img src="../img/b2.jpg" alt="img2" id="img2"/>
        <div class="circle circle1" id="circle1"></div>
        <div class="circle circle2" id="circle2"></div>
        <div class="circle circle3" id="circle3"></div>
        <div class="circle circle4" id="circle4"></div>
        <div class="circle circle5" id="circle5"></div>
    </div>
</div>

CSS部分:

.img{
    width: 7.3rem;
    height: 4.54rem;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
img{
    position: absolute;top: 0;
    height: 4.54rem;width: 7.3rem;
}
#img1{
    left: 0;
}
#img2{
    left: 7.3rem;
}
思路就是页面正中有一个div,有两个大小一致的img子元素,假设img的宽度为1,而div的宽度也为1,且设置了该div over:hidden.这样页面上的可见范围就只有一个1的宽度了.
接下来咱们将全部要参与轮播的图片的src放入一个数组.只须要设置一个定时器,让img中,left值为0的这个img的left值改成-1(改成-1以后,立刻让他变为1,并切换src为接下来须要播放的图片的src);而img中left值为1的img的left值改成0,这样不断循环,达到轮播的效果.提及来可能有点绕,因此把完整代码附上.

<head lang="en">    <meta charset="UTF-8">    <meta name="viewpoint" content="width=device-width,initial-scale=1"/>    <title></title>    <link rel="stylesheet" href="normalize.css"/>    <script src="jquery-1.7.2.min.js"></script>    <style>        .img{            width: 7.3rem;            height: 4.54rem;            position: relative;            overflow: hidden;            margin: 0 auto;        }        img{            position: absolute;top: 0;            height: 4.54rem;width: 7.3rem;        }        #img1{            left: 0;        }        #img2{            left: 7.3rem;        }        .circle{            height: .15rem;            width: .15rem;            border-radius: .075rem;            position: absolute;            background-color: #c9c3ff;        }        .circle1{            top: 4rem;left: 3.2rem;        }        .circle2{            top: 4rem;left: 3.4rem;        }        .circle3{            top: 4rem;left: 3.6rem;        }        .circle4{            top: 4rem;left: 3.8rem;        }        .circle5{            top: 4rem;left: 4rem;        }    </style></head><body><div class="father">    <div class="img">        <img src="../img/b1.jpg" alt="img1" id="img1"/>        <img src="../img/b2.jpg" alt="img2" id="img2"/>        <div class="circle circle1" id="circle1"></div>        <div class="circle circle2" id="circle2"></div>        <div class="circle circle3" id="circle3"></div>        <div class="circle circle4" id="circle4"></div>        <div class="circle circle5" id="circle5"></div>    </div></div></body><script>    $(function () {        var arrSrc=['../img/b1.jpg','../img/b2.jpg','../img/b3.jpg','../img/b4.jpg','../img/b5.jpg'];        var circleArr=$('.circle');        var nImg=1;        var nCircle=1;        var arrImg=[$('#img1'),$('#img2')];        $(circleArr[0]).css('backgroundColor','#5c43ff');        //定义自动播放函数        function play(){            $('.circle').css('backgroundColor','#c9c3ff');            $(circleArr[nCircle]).css('backgroundColor','#5c43ff');            $(arrImg).each(function (j){                if(parseInt($(this).position().left)<0){                    $(this).css('left','7.3rem');                    $(this).attr('src',arrSrc[nImg]);                }            });            $(arrImg).each(function (i) {                if($(this).position().left>0){                    $(this).animate({                        left:0                    },1000)                }else if($(this).position().left==0){                    $(this).animate({                        left:-7.3+'rem'                    },1000);                }            });            nImg++;            nCircle++;            if(nCircle>=5){                nCircle=0            }            if(nImg>=5){                nImg=0            }        }        var autoPlay=window.setInterval(function () {            play()        },4000);        //鼠标移入圆点时的事件        $('.circle').mouseenter(function () {            $('.circle').css('backgroundColor','#c9c3ff');            $(this).css('backgroundColor','#5c43ff');            var obj=$(this);            var objImg;            window.clearInterval(autoPlay);            $(arrImg).each(function (j){                if($(this).position().left==0){                    objImg=$(this);                }            });            if($(this).attr('id')=='circle1'){                objImg.attr('src',arrSrc[0]);                nImg=1;                nCircle=1;            }else if($(this).attr('id')=='circle2'){                objImg.attr('src',arrSrc[1]);                nImg=2;                nCircle=2;            }else if($(this).attr('id')=='circle3'){                objImg.attr('src',arrSrc[2]);                nImg=3;                nCircle=3;            }else if($(this).attr('id')=='circle4'){                objImg.attr('src',arrSrc[3]);                nImg=4;                nCircle=4;            }else if($(this).attr('id')=='circle5'){                objImg.attr('src',arrSrc[4]);                nImg=0;                nCircle=0;            }        });        $('.circle').mouseleave(function () {             autoPlay=window.setInterval(function () {                 play()             },4000)        })    })</script><script>    !(function(win, doc){        function setFontSize() {            // 获取window 宽度            // zepto实现 $(window).width()就是这么干的            var winWidth =  window.innerWidth;            doc.documentElement.style.fontSize = (winWidth / 730) * 100 + 'px' ;        }        var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';        var timer = null;        win.addEventListener(evt, function () {            clearTimeout(timer);            timer = setTimeout(setFontSize, 300);        }, false);        win.addEventListener("pageshow", function(e) {            if (e.persisted) {                clearTimeout(timer);                timer = setTimeout(setFontSize, 300);            }        }, false);        // 初始化        setFontSize();    }(window, document));</script>固然,以上代码是本人对轮播的一些体会,之后可能会写的更简介,酷炫.你们若是有更好的方法,欢迎提出交流~