轮播联动跳页（放大）

作者: 陈哲_b5da | 来源:发表于2018-06-28 16:33 被阅读0次

轮播联动跳页（放大）
RN-第三方之react-native-image-zoom-v
第十节小例子
下拉轮播图放大
swift 简单的闭包传值
ios 仿简书微博等个人主页
滑动轮播，中间放大
轮播图点击图片放大
图片轮播+放大缩小+拖动
jq点击图片放大轮播

引入样式：swiper插件

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="format-detection" content="telephone=no">
        <meta http-equiv="x-rim-auto-match" content="none">
        <meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
        <meta name="applicable-device" content="mobile">
        <meta http-equiv="cleartype" content="on">
        <meta http-equiv="Cache-Control" content="no-transform " />
        <title>亿阁房源详情</title>
        <link href="reset.css" rel="stylesheet" />
        <link href="swiper-4.1.6.min.css" rel="stylesheet" />
        <link href="DetailYiGe.css" rel="stylesheet" />
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript" src="AllPhone.js"></script>
        <script type="text/javascript" src="swiper-4.1.6.min.js"></script>
        <script type="text/javascript" src="detail.js"></script>
    </head>

    <body>

        <div class="lunbo">
            <div class="swiper-container" id="allList">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /></div> </div>
                    <div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
                    <div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
                    <div class="swiper-slide" id="keting"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
                    <div class="swiper-slide" id="huxing"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
                    <div class="swiper-slide" id="huxing"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
                    <div class="swiper-slide" id="woshi" > <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
                    <div class="swiper-slide" id="chufang"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /></div> </div>
                    <div class="swiper-slide" id="yushi"> <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /> </div></div>
                    <div class="swiper-slide" id="yushi"> <div class="swiper-zoom-container"><img src="img/detail/demo5.png" /> </div></div>
                    <div class="swiper-slide" id="yangtai" > <div class="swiper-zoom-container"><img src="img/detail/demo4.png" /></div> </div>
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>
            </div>
        </div>
        <div class="list">
            <div class="falist" id="listBox">
                <ul>

                    <li id="keting" class="active">
                        客厅(<span>4</span>)

                    </li>
                    <li id="huxing">
                        户型图(<span>2</span>)
                    </li>
                    <li id="woshi">
                        卧室(<span>1</span>)
                    </li>
                    <li id="chufang">
                        厨房(<span>1</span>)
                    </li>
                    <li id="yushi">
                        浴室(<span>2</span>)
                    </li>
                    <li id="yangtai">
                        阳台(<span>1</span>)
                    </li>
                </ul>
            </div>
        </div>

    </body>

</html>

style样式控制

body,
html {
    background: #333;
    overflow: hidden;
    height: 100%;
}

.content {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 2.5rem;
    overflow: auto;
}

.lunbo {
    position: relative;
    width: 100%;
    height: 11.8%;
    top: 4rem;
    left: 0;
    z-index: 8;
}

.swiper-container {
    width: 100%;
    height: 11.8rem;
    position: relative;
}

.swiper-pagination-fraction {
    z-index: 12;
    width: 2.25rem;
    height: 0.9rem;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    left: inherit;
    background: rgba(0, 0, 0, 0.25);
    text-align: center;
    color: #fff;
    border-radius: 0.45rem;
    font-size: 0.6rem;
}

.swiper-pagination-fraction span {
    height: 0.9rem;
    display: inline-block;
    line-height: 0.9rem;
}

.list {
    /*display: none;*/
    position: fixed;
    bottom: 0.25rem;
    left: 0;
    width: 100%;
    z-index: 103;
}

.list .falist {
    width: 18.75rem;
    height: 2rem;
    margin: 0 auto;
    position: relative;
    left: 0;
    bottom: 0;
    overflow: hidden;
}

.list .falist ul {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 200%;
}

.list .falist ul li {
    width: 3.75rem;
    height: 2rem;
    text-align: center;
    line-height: 2rem;
    float: left;
    color: #fff;
}
.list .falist ul li a{
    display: block;
}
.list .falist ul li.active {
    width: 3.75rem;
    background: #F5A00A;
    border-radius: 2px;
}

.list .falist ul li a {
    display: block;
    width: 100%;
    height: 100%;
    color: #fff;
}

.list .falist ul li a span {
    color: #fff;
    padding: 0 0.1rem;
}

detail.js

$(function() {

    //轮播图的首次
    var mySwiper = new Swiper('#allList', {
        loop: false,
        zoom : true,//定义放大缩小
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            type: "fraction"
        },
        on: {
            slideChangeTransitionStart: function() {
                var k =  this.activeIndex;//切换结束时，告诉我现在是第几个slide
                var swiperId = $(".lunbo .swiper-slide").eq(k).attr("id");
                var lisiId = $('.list .falist ul li.active').attr("id");
                if(swiperId != lisiId){//获取到想对应id的列表项下表
                    $(".list .falist ul li").each(function() {
                        if($(this).attr("id") == swiperId ){
//                          alert($(this).index())
                            Change($(this).index());
                        }
                    })
                    
                }
//              
            },
        },

    })
    //  点击切换轮播图片
    $('.list .falist ul li').click(function(e) {
        e.stopPropagation(); //阻止  的 click 事件冒泡  
        e.preventDefault(); //阻止提交按钮的默认行为（提交表单）
        //控制轮播器的滑动
        var j = 0;
        var lisiId = $(this).attr("id");
        $(".lunbo .swiper-slide").each(function() {
            var swiperId = $(this).attr("id");
            if(lisiId == swiperId) {
                j = $(this).index();
                return false //跳出本循环
            }
        })
        mySwiper.slideTo(j, 1000, false);
        //控制底部列表滑动的小标
        var i = $(this).index();
        Change(i);
    })

    //列表的滑动 
    function G(s) {
        return document.getElementById(s);
    }
    //  js获取css样式    封装getStyle （获取样式currentStyle getComputedStyle兼容处理）

    function getStyle(obj, attr) {
        if(obj.currentStyle) {
            return obj.currentStyle[attr];
        } else {
            return getComputedStyle(obj, false)[attr];
        }
    }
    //定义定时器，过度时间的设定
    var timer = null;

    function Animate(obj, json) {

        if(obj.timer) {
            clearInterval(obj.timer);
        }
        obj.timer = setInterval(function() {
            for(var attr in json) {
                var iCur = parseInt(getStyle(obj, attr));
                iCur = iCur ? iCur : 0;
                var iSpeed = (json[attr] - iCur) / 5;
                iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
                obj.style[attr] = iCur + iSpeed + 'px';
                //console.log(obj.style[attr])
                if(iCur == json[attr]) {
                    clearInterval(obj.timer);
                }
            }
        }, 30);
    }
    var oList = G("listBox");
    var oListLi = oList.getElementsByTagName("li");
    var len2 = oListLi.length; // 列表的各项个数
    var oListUl = oList.getElementsByTagName("ul")[0];
    var w2 = parseInt($(".list .falist ul li").width()); //列表中项目的宽度；
    var num = 5; //显示页面的个数
    var num2 = Math.ceil(num / 2);
    // 点击后 偏移的像素
    function Change(index) {
        $(".list .falist ul li").eq(index).addClass("active").siblings().removeClass("active");
        if(index < num2) {
            Animate(oListUl, {
                left: 0
            });
        } else if(index + num2 <= len2) {
            Animate(oListUl, {
                left: -(index - num2 + 1) * w2
            });
        } else {
            Animate(oListUl, {
                left: -(len2 - num) * w2
            });
            //          console.log(- (len2 - num) * w2)
        }
    }

    //列表的长度控制
    function fnList() {
        var liWid = $(".list .falist ul li").width();
        var lise = $(".list .falist ul li").size();
        $(".list .falist ul").width(liWid * lise);
    }

    fnList()

})

轮播联动跳页（放大）
引入样式：swiper插件 style样式控制 detail.js
RN-第三方之react-native-image-zoom-v
本文内容多张图片放大后轮播、捏合效果单张图片放大捏合效果多张图片放大后轮播、捏合效果单张图片放大捏合效果
第十节小例子
1、轮播效果 2、弹出广告 3、隔行换色 4、全选、取消全选 5、省市联动 6、左右选中
下拉轮播图放大
先来张效果图（第一次录制（手抖）比较模糊）关键部分代码--要把头部图片放进scrollView里面，再放进Tab...
swift 简单的闭包传值
在返回值页面:声明: 跳页返回时候接受返回值的页面:(其实也是点击跳页的方法中)
ios 仿简书微博等个人主页
YWPersonDemo 介绍仿简书微博等个人主页，在此基础上加上头部轮播及下拉轮播放大效果，并且允许左右滑动，...
滑动轮播，中间放大
Alexander McQueen秋季 Gustavsson演绎朋克的性感 Alexander McQu...
轮播图点击图片放大
图片轮播+放大缩小+拖动
一、react+antd创建项目npm install -g create-react-app //全局安装脚手...
jq点击图片放大轮播
展示效果: 实现逻辑:点击图片的时候把第一块(外观)的所有图片数据直接赋值到弹框上. 用的swiper这个轮播...