zoukankan html css js c++ java

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

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

<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{
     7.3rem;
    height: 4.54rem;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
}
img{
    position: absolute;top: 0;
    height: 4.54rem; 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{
             7.3rem;
            height: 4.54rem;
            position: relative;
            overflow: hidden;
            margin: 0 auto;
        }
        img{
            position: absolute;top: 0;
            height: 4.54rem; 7.3rem;
        }
        #img1{
            left: 0;
        }
        #img2{
            left: 7.3rem;
        }
        .circle{
            height: .15rem;
             .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>
当然,以上代码是本人对轮播的一些体会,以后可能会写的更简介,酷炫.大家如果有更好的方法,欢迎提出交流~

查看全文

相关阅读:
android的布局管理器
 android控件---自定义带文本的ImageButton
新建android项目src和layout文件夹中没有内容的问题
 android控件---spinner
maven+springMVC+mybatis+junit详细搭建过程 ***
JUnit4的使用
 Jenkins集成Docker镜像实现自动发布
 Docker部署tomcat及应用
 Docker的离线安装
 Java中的static关键字解析

原文地址：https://www.cnblogs.com/Ricky-Huang/p/5072531.html