通用輪播(包括響應式~)

時間 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>固然,以上代碼是本人對輪播的一些體會,之後可能會寫的更簡介,酷炫.你們若是有更好的方法,歡迎提出交流~

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。