轮播的实现

作者: GaoYangTongXue丶 | 来源:发表于2017-04-03 01:20 被阅读13次

任务27 - jquery实战 - 轮播
swift轮播图的实现－UIScrollView
轮播图心得
swiper实现自动轮播的问题，不能跳转到第一个slide的解决
Swift实现轮播图以及自定义UIPageControl
轮播
轮播图实现
关于轮播的思路（使用clone 移动宽度）
项目-轮播图
iOS高效图片轮播 - 两个imageView实现

题目1 轮播的实现原理是怎样的？如果让你来实现，你会抽象出哪些函数(or接口供使用？（比如 play()）

和iOS的实现原理一样，在要循环轮播的一组图片的第一张加上此组图片的最后一张，在此组图片的最后一张后面加上第一张。这样就当用户从第一张向左滚动时，看到的此组最后一张图片，其实是你添加的此组最后一张图片，等到滚动完成后，直接改变位置（用户是看不到这个效果的），这时候才真正是此组最后一张图片。最后一张向后滚动如是。
设置向下一张滚动的方法playNext()
设置向上一张滚动的方法playPre()
设置显示当前页数的方法setCurrentPage()

题目2：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>gaoyang</title>
    <style>
        .contain {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        .cycle {
            position: absolute;
            margin: 0;
            list-style: none;
            padding: 0;
            width: 3000px;
            height: 100%;
            overflow: hidden;
        }
        
        .cycle>li {
            width: 500px;
            height: 100%;
            margin: 0;
            padding: 0;
            float: left;
            font-size: 0;
        }
        
        .cycle>li img {
            width: 100%;
            height: 100%;
        }
        
        .btn {
            display: inline-block;
            position: absolute;
            color: #fff;
            text-decoration: none;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            background: #333;
            opacity: 0.7;
            text-align: center;
            font-size: 25px;
            top: 170px;
        }
        
        .btn-pre {
            left: 20px;
        }
        
        .btn-next {
            right: 20px;
        }
        
        .btn span {
            display: block;
            margin-top: 8px;
        }
        
        .page {
            position: absolute;
            width: 100%;
            bottom: 20px;
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }
        
        .page>li {
            display: inline-block;
            margin: 5px;
            padding: 0;
            /*float: left;*/
            width: 20px;
            height: 6px;
            background-color: #333;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0;
        }
        
        .page>li>a {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
        
        .page>li.active {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="contain">
        <ul class='cycle'>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/76cf0df54c6a8bc1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/3588f8ad9708d2ab.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/eb53bcee7eb6b277.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/080e4fa82be772c5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/76cf0df54c6a8bc1.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/3588f8ad9708d2ab.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
        </ul>
        <a href="javascript:;" class="btn btn-pre"><span><</span></a>
        <a href="#" class="btn btn-next"><span>></span></a>
        <ul class="page">
            <li class="active">
                <!--<a href="javascript:;"></a>-->
            </li>
            <li>
                <!--<a href="javascript:;"></a>-->
            </li>
            <li>
                <!--<a href="javascript:;"></a>-->
            </li>
            <li>
                <!--<a href="javascript:;"></a>-->
            </li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        var $cycle = $('.cycle');
        $cycle.css('left', '-500px');
        var $btnNext = $('.btn.btn-next');
        var $btnPre = $('.btn.btn-pre');
        var $pageCon = $('.page');
        var currentPage = 0;
        var continueP = true;

        //点击下一张
        $btnNext.on('click', function (e) {
            e.preventDefault()
            playNext();
        })

        //点击上一张
        $btnPre.on('click', function () {
            playPre();
        })

        //点击page跳到相对应图片
        $('.page>li').on('click', function () {
            var index = $(this).index();
            playPage(index);
        })


        function playPage(index) {
            continueP = false;
            $cycle.animate({ left: -(index + 1) * 500 }, function () {
                currentPage = index;
                continueP = true;
                pageControll();
            })
        }

        function playNext(n) {
            if (!continueP) {
                return;
            };
            continueP = false;
            $cycle.animate({ left: '-=500' }, function () {
                currentPage++;
                if (currentPage === $cycle.children().length - 2) {
                    $cycle.css('left', '-500px');
                    currentPage = 0;
                }
                continueP = true;
                pageControll();
            })


        }


        function playPre(n) {
            if (!continueP) {
                return;
            };
            continueP = false;
            $cycle.animate({ left: '+=500' }, function () {
                currentPage--;
                if (currentPage === -1) {
                    $cycle.css('left', -($cycle.children().length - 2) * 500);
                    currentPage = 3;
                }
                continueP = true;
                pageControll();
            })

        }

        function pageControll() {
            $pageCon.children()
                .removeClass('active')
                .eq(currentPage)
                .addClass('active');
        }
    </script>
</body>

</html>

题目3：

<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>gaoyang</title>
    <style>
        .contain {
            position: relative;
            width: 500px;
            height: 400px;
            margin: 50px auto;
            overflow: hidden;
        }
        
        .cycle {
            position: relative;
            margin: 0;
            list-style: none;
            padding: 0;
            width: 500px;
            height: 100%;
            overflow: hidden;
        }
        
        .cycle>li {
            position: absolute;
            width: 500px;
            height: 100%;
            margin: 0;
            padding: 0;
            /*float: left;*/
            font-size: 0;
            z-index: -2;
            display: none;
        }
        
        .cycle>li.active {
            display: block;
        }
        
        .cycle>li img {
            width: 100%;
            height: 100%;
        }
        
        .btn {
            display: inline-block;
            position: absolute;
            color: #fff;
            text-decoration: none;
            width: 60px;
            height: 60px;
            border-radius: 30px;
            background: #333;
            opacity: 0.7;
            text-align: center;
            font-size: 25px;
            top: 170px;
        }
        
        .btn-pre {
            left: 20px;
        }
        
        .btn-next {
            right: 20px;
        }
        
        .btn span {
            display: block;
            margin-top: 8px;
        }
        
        .page {
            position: absolute;
            width: 100%;
            bottom: 20px;
            margin: 0;
            padding: 0;
            list-style: none;
            text-align: center;
        }
        
        .page>li {
            display: inline-block;
            margin: 5px;
            padding: 0;
            /*float: left;*/
            width: 20px;
            height: 6px;
            background-color: #333;
            border-radius: 5px;
            cursor: pointer;
            font-size: 0;
        }
        
        .page>li>a {
            display: inline-block;
            width: 100%;
            height: 100%;
            text-decoration: none;
        }
        
        .page>li.active {
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="contain">
        <ul class='cycle'>
            <li class="active">
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/3588f8ad9708d2ab.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/d88fc49c7f1f8879.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/080e4fa82be772c5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
            <li>
                <a href="javascript:;">![](https://img.haomeiwen.com/i1909214/24a354ffde9f653e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)</a>
            </li>
        </ul>
        <a href="javascript:;" class="btn btn-pre"><span><</span></a>
        <a href="#" class="btn btn-next"><span>></span></a>
        <ul class="page">
            <li class="active">
                <!--<a href="javascript:;"></a>-->
            </li>
            <li>
                <!--<a href="javascript:;"></a>-->
            </li>
            <li>
                <!--<a href="javascript:;"></a>-->
            </li>
            <li>
                <!--<a href="javascript:;"></a>-->
            </li>
        </ul>
    </div>
    <script src="jquery.js"></script>
    <script>
        var $cycle = $('.cycle');
        var $btnNext = $('.btn.btn-next');
        var $btnPre = $('.btn.btn-pre');
        var $pageCon = $('.page');
        var currentPage = 0;
        var continueP = true;
        var timer;
        var clearTimer;
        //开始计时
        setIn();

        //点击下一张
        $btnNext.on('click', function (e) {
            e.preventDefault()
            playNext();
            clearIn();
        })

        //点击上一张
        $btnPre.on('click', function () {
            playPre();
            clearIn();
        })

        //点击page跳到相对应图片
        $('.page>li').on('click', function () {
            var index = $(this).index();
            playPage(index);
            clearIn();
        })


        function playPage(index) {
            $cycle.children().eq(currentPage).fadeOut(800)
            currentPage = index;
            $cycle.children().eq(currentPage).fadeIn(800, function () {
                continueP = true;
                pageControll();

                if (clearTimer === timer) {
                    setIn();
                }

            })
        }

        function playNext(n) {
            if (!continueP) {
                return;
            };
            continueP = false;
            $cycle.children().eq(currentPage).fadeOut(800)
            currentPage++;
            if (currentPage === $cycle.children().length) {

                currentPage = 0;
            }
            $cycle.children().eq(currentPage).fadeIn(800, function () {
                continueP = true;
                pageControll();
                if (clearTimer === timer) {
                    setIn();
                }


            })
        }

        function playPre(n) {
            if (!continueP) {
                return;
            };
            continueP = false;
            $cycle.children().eq(currentPage).fadeOut(800)
            currentPage--;
            if (currentPage === -1) {

                currentPage = 3;
            }
            $cycle.children().eq(currentPage).fadeIn(800, function () {
                continueP = true;
                pageControll();

                if (clearTimer === timer) {
                    setIn();
                }

            })
        }

        function pageControll() {
            $pageCon.children()
                .removeClass('active')
                .eq(currentPage)
                .addClass('active');
        }
        function setIn() {
            timer = setInterval(function () {
                playNext();
            }, 3000);
        }
        function clearIn() {
            clearTimer = timer;
            clearInterval(timer)
        }
    </script>
</body>

</html>

任务27 - jquery实战 - 轮播
代码实现如下轮播效果展示、代码实现上述轮播效果,在一个页面有三个轮播展示、代码实现如下无限循环滚动轮播效...
swift轮播图的实现－UIScrollView
目标：UIScrollView＋三UIImageView的轮播图实现原理：利用UIScrollView实现轮播...
轮播图心得
轮播图写轮播图之前我们要认识到几个问题：一、什么是轮播图？二、怎么实现轮播效果？三、轮播图还有什么小功能可以实现...
swiper实现自动轮播的问题，不能跳转到第一个slide的解决
ionic+swiper实现自动轮播在实现自动轮播的时候，请求回来的图片数据不能正常轮播，在每次轮播的时候总是会跳...
Swift实现轮播图以及自定义UIPageControl
无限轮播的实现思路轮播图最核心的部分是如何实现无限轮播。我的实现方式是：在UIScrollView上添加三个U...
轮播
轮播: UIScrollview轮播UICollectionView轮播实现步骤：（1）添加并设置定时器（2）...
轮播图实现
轮播图在实际应用开发使用较多，本文说明一下具体的实现过程。一、实现轮播图的基本控件介绍。实现轮播图需要将多张图片...
关于轮播的思路（使用clone 移动宽度）
实现如下轮播效果(渐变轮播)task27-1 一个页面有3个轮播task-27-2 实现如下无限循环滚动轮播效果t...
项目-轮播图
整个轮播图分为三部分：轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多，...
iOS高效图片轮播 - 两个imageView实现
iOS高效图片轮播 - 两个imageView实现 iOS高效图片轮播 - 两个imageView实现