美文网首页
jquery 轮播

jquery 轮播

作者: 黑色的五叶草 | 来源:发表于2018-03-13 14:18 被阅读0次

相关思想：下一页先移再拿，上一页先拿再移。 外部容器position：relative; 因为容器内部是一个面板，面板需要绝对定位才可以偏移。所以父容器要相对定位

轮播写法一：克隆第0位和第末位的li，添加到父容器上。实现第0位跳转，第末位跳转

  • 总体思想：
    1.父容器相对定位 内部元素绝对定位
    2.克隆第0位，第末位。取得克隆后父容器宽度，实现子元素在父容器内调整水平偏移值（负值）
    3.绑定上一页，下一页点击按钮
    4.对下滑块绑定事件，添加隔页跳转判断
    5.定义下滑块跳转函数，同时定义下滑块class操作函数
<!DOCTYPE html>
<html>
    <head> 
    
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

        <title>Learn</title>
        <meta name="description" content="">
        <meta name="keywords" content="">
        <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
        <style type="text/css">

        
        html,body,ul,li,p{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        
        .carousel{
            position: relative;
            width: 310px;
            height: 206px;
            overflow: hidden;  /*overflow:hidden 窗口看到的区域只有显示出的部分，隐藏滚动条*/
        }
        .carousel .img-ct{
            position: absolute;
        }
        .carousel .img-ct img{
            width: 310px;
            height: 206px;
        }
        .carousel .img-ct:after{
            content: ' ';
            display: block;
            clear: both;
        }
        .carousel .img-ct li{
            float: left;
        }

        .arrow{
            position: absolute;
            top: 50%;
            margin-top: -15px;  /*自身高度的一半居中*/
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background: #4E443C;
            color: #fff;
            border-radius: 30px;
            box-shadow: 0 0 2px #999;
            opacity: 0.8
        }
        .arrow:hover {
            opacity: 1;
        }
        .pre{
            left: 10px;
        }
        .next{
            right: 10px;
        }
        ul.bullet {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);  /*水平方向偏移盒子自身的50%*/
        }
        ul.bullet li {
            width: 16px;
            height: 4px;
            border-radius: 2px;
            background: #fff;
            display: inline-block;
            cursor: pointer;
        }

        ul.bullet li.active {
            background: #666;
        }


        </style>

    </head>
    <body>

        <div class="carousel">
            <ul class="img-ct">
                <li data-id=0><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/26.jpg"></a></li>
                <li data-id=1><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg"></a></li>
                <li data-id=2><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/24.jpg"></a></li>
                <li data-id=3><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/23.jpg"></a></li>
            </ul>
            <a class="pre arrow" href="#"><</a>
            <a class="next arrow" href="#">></a>
            <ul class="bullet">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>


        
        <script type="text/javascript">
            var $ct = $('.img-ct'),
                $items = $ct.children(),
                $pre = $('.pre'),
                $next = $('.next'),
                $bullet = $('.bullet'),
                imgWidth = $items.width(),  //图片的宽度，用js获取代码复用性会更强
                imgCount = $ct.children().size();  //li的数量，共4个li

            $ct.prepend($items.last().clone());  //img-ct的最后一个li克隆到img-ct的第一个孩子的位置
            $ct.append($items.first().clone());  //img-ct的第一个li克隆到img-ct的最后一个孩子的位置
            $ct.width((imgCount+2)*imgWidth);  //得到6个li在水平方向所需的宽度。不计算容器宽度，就会纵向排列6个li
            /*imgRealCount = $ct.children().size();  //添加完成后真实的数量，等同于imgCount+2
            console.log(imgRealCount);*/
            // $ct.css({left: 0-imgWidth, width: imgRealCoundt*imgWidth});  //调整基准点，将prepend的li向左偏移一个图片宽度，让第0位的li与面板对应


            var curIdx = 0;  //下标滑块历史位置
            var isAnimate = false;  //可以点击状态

            $next.on('click', function(){
                playNext();
            });
            $pre.on('click', function(){
                playPre();
            });
            $bullet.find('li').on('click', function(){  //跳转下标滑块
                var idx = $(this).index();  //点击的第几个li
                console.log($(this).index());
                if(idx > curIdx){
                    playNext(idx - curIdx);
                } else if (idx < curIdx){
                    playPre(curIdx - idx);
                }
            });

            // autoPlay();
            function stopAuto(){
                clearInterval(clock);
            }
            function autoPlay(){
                clock = setInterval(function(){
                    playNext();
                }, 3000);
            }
            
            function setBullet(){
                $bullet.children().removeClass('active') //等同于$bullet.find(li)
                                  .eq(curIdx).addClass('active');  //.eq(curIdx)索引到当前的curIdx上
            }

            function playNext(idx){
                var idx = idx || 1;
                if(!isAnimate){  //如果没有设锁
                    isAnimate = true;  //上锁 
                    $ct.animate({left: '-='+(imgWidth*idx)}, function(){  //'-='+(imgWidth*idx)向左偏移图片的宽度乘以移动的值
                        curIdx = (curIdx + idx)%imgCount;  //当前的curIdx的位置。imgCount等于4，(3 + 1)%4 余数0，curIdx回到初始位置(替换成历史面板)-23分23秒
                        if(curIdx === 0){  
                            $ct.css({left: 0-imgWidth});  //还原初始状态到面板1处
                        }
                        /*写法2
                        curIdx++;
                        if(curIdx === imgCount){
                            $ct.css({left: 0-imgWidth});
                            curIdx = 0;*/
                        isAnimate = false;  //当动画执行完成之后再设置为false解锁，变成可以点击状态
                        setBullet();
                    });
                }
            }

            function playPre(idx){
                var idx = idx || 1;
                if(!isAnimate){  //如果没有设锁
                    isAnimate = true;  //锁住
                    $ct.animate({left: '+='+imgWidth*idx}, function(){  //向右移动一格 
                        curIdx = (imgCount + curIdx - idx)%imgCount;  //临界条件：(4+0-1)%4余3，相当于处于-1位置上。此时替换面板将curIdx位置在第四个li上。
                        if(curIdx === (imgCount - 1)){
                            $ct.css({left: 0-imgWidth*imgCount});  //替换到原始面板3处
                        }
                        isAnimate = false;  
                        setBullet();                        
                    });
                }
            }
            /*其实这里的isAnimate就是个锁  为了不让你往死里滑。
            先不看if当你执行动画时，先上个锁，isAnimate = true ，这时候你马上又执行一次动画，
            由于isAnimate为true  意思是“动画正在执行”  所以就直接返回
            啥时候执行完了  啥时候给 isAnimate=false
            当为false时，你再滑 就能继续往下滑了
            比如说这个动画要执行1s才结束，如果按这里的写法，你必须等到1s之后再执行动画
            如果不上这个锁  那你可以在动画没执行完就一直滑   比如滑个200次  那动画就会执行200s*/
        </script>
    </body>
</html>

轮播写法二：淡入淡出，直接跳转点击位

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>无限轮播</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        html,
        body,
        ul,
        li,
        p {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
        }

        .carousel {
            position: relative;
            width: 310px;
            height: 206px;
            overflow: hidden;
        }

        .carousel .img-ct {
            position: absolute;
        }

        .carousel .img-ct img {
            width: 310px;
            height: 206px;
        }

        .carousel .img-ct:after {
            display: block;
            content: '';
            clear: both;
        }

        .carousel .img-ct li {
            float: left;
        }

        .arrow {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            /*自身高度的一半居中*/
            width: 30px;
            height: 30px;
            line-height: 27px;
            text-align: center;
            background: #4E443C;
            color: #fff;
            border-radius: 30px;
            box-shadow: 0 0 2px #999;
            opacity: 0.8;
        }

        .arrow:hover {
            opacity: 1;
        }

        .pre {
            left: 10px;
        }

        .next {
            right: 10px;
        }

        ul.bullet {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
            /*水平方向偏移盒子自身的50%*/
        }

        ul.bullet li {
            width: 16px;
            height: 4px;
            border-radius: 2px;
            background: #fff;
            display: inline-block;
            cursor: pointer;
        }

        ul.bullet li.active {
            background: #666;
        }
    </style>
</head>

<body>
    <div class="carousel">
        <ul class="img-ct">
            <li data-id=0>
                <a href="">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/26.jpg" alt="">
                </a>
            </li>
            <li data-id=1>
                <a href="">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/25.jpg" alt="">
                </a>
            </li>
            <li data-id=2>
                <a href="">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/24.jpg" alt="">
                </a>
            </li>
            <li data-id=3>
                <a href="">
                    <img src="http://cdn.jirengu.com/book.jirengu.com/img/23.jpg" alt="">
                </a>
            </li>
        </ul>

        <a href="#" class="pre arrow">
            <</a>
                <a href="#" class="next arrow">></a>

                <ul class="bullet">
                    <li class="active"></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
    </div>


    <script>
        $(function () {
            var $ct = $('.img-ct'),
                $items = $ct.children(),
                $pre = $('.pre');
                $next = $('.next'),
                $bullet = $('.bullet'),
                imgWidth = $items.width(),
                imgCount = $ct.children().size(); //4个li
                
            $ct.width(imgCount* imgWidth);

            var curIdx = 0;
                isAnimate = false;

            $next.on('click', function () {
                playNext();
            });
            $pre.on('click', function () {
                playPre();
            });
            $bullet.find('li').on('click', function(){  //跳转下标滑块
                var idx = $(this).index();  //点击的第几个li
                play(idx);
            });


            play(0);
            // autoPlay();
            function stopAuto() {
                clearInterval(clock);
            }

            function autoPlay() {
                clock = setInterval(function () {
                    playNext();
                }, 1500);
            }

            function playNext() {
                play((curIdx + 1) % imgCount); //临界条件：(3 + 1)%4 余数0，相当于处于4位置上。此时替换面板将curIdx位置在第一位li上。clone()后共六个li，第一位li即第二个li上
            }

            function playPre() {
                play((imgCount + curIdx - 1) % imgCount); //临界条件：(4+0-1)%4余3，相当于处于-1位置上。此时替换面板将curIdx位置在第四位li上。
            }

            function setBullet() {
                $bullet.children().removeClass('active')
                    .eq(curIdx).addClass('active');
            }

            function play(idx) {
                if (isAnimate) return; //如果动画执行中，直接返回
                isAnimate = true; //如果动画没有执行；上锁这里不可重复点击，执行下面代码，下面代码执行后解锁
                $items.eq(curIdx).fadeOut(500, function () { //淡出
                    isAnimate = false;
                }); 
                $items.eq(idx).fadeIn(500, function () { //淡入
                    isAnimate = false;
                });
                curIdx = idx;
                setBullet();
            }
        });
    </script>
</body>

</html>

轮播写法三：思路与写法一相同，滚动逻辑较一简单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>l两种方法实现无限轮播-2</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        ul, li {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        a {
            text-decoration: none;
        }

        .carousel {
            position: relative;
            width: 320px;
            height: 180px;
            overflow: hidden;
        }

        .carousel .img-ct {
            position: absolute;
            overflow: hidden;
        }
        .carousel .img-ct li {
            float: left;
        }
        .carousel .img-ct:after{
            display: block;
            content: '';
            clear: both;
        }
        .carousel .img-ct img {
            width: 320px;
            height: 180px;
        }

        .carousel .arrow {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 30px;
            height: 30px;
            line-height: 27px;
            border-radius: 30px;
            border: 1px solid #fff;
            color: #fff;
            text-align: center;
        }
        .carousel .arrow:hover {
            opacity: 0.8;
        }
        .carousel .pre {
            left: 10px;
        }
        .carousel .next {
            right: 10px;
        }

        .carousel .bullet {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        .carousel .bullet li {
            display: inline-block;
            width: 16px;
            height: 4px;
            border: 1px solid #ccc;
            border-radius: 4px;
            cursor: pointer;
        }
        .carousel .bullet li.active {
            background: #ccc;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <ul class="img-ct">
            <li data-id=0><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/2.jpg"></a></li>
            <li data-id=1><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/3.jpg"></a></li>
            <li data-id=2><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/4.jpg"></a></li>
             <li data-id=3><a href="#"><img src="http://cdn.jirengu.com/book.jirengu.com/img/5.jpg"></a></li>
        </ul>
        <a class="pre arrow" href="#"><</a>
        <a class="next arrow" href="#">></a>
        <ul class="bullet">
            <li class="active"></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
        

    <script>
        $(function(){
            var $ct = $('.img-ct'),
                $items = $ct.children(),
                $pre = $('.pre'),
                $next = $('.next'),
                $bullet = $('.bullet'),
                imgCount = $items.size(),
                imgWidth = $items.width();

            $ct.prepend($items.last().clone());
            $ct.append($items.first().clone());
            $ct.width((imgCount+2)*imgWidth);
            $ct.css({left: 0-imgWidth});

            var curIdx = 0;
            var isAnimate = false;
            
            $next.on('click', function(){
                playNext();
            });
            $pre.on('click', function(){
                playPre();
            });
            $bullet.find('li').on('click', function(){
                var index = $(this).index();  //此index是跳转的位数
                console.log(index);
                if(index > curIdx){
                    playNext(index - curIdx);
                } else if (index < curIdx){
                    playPre(curIdx - index);
                }
            });

            function playNext(idx){  //此idx是跳转的步数  idx=|curidx-index|
                // console.log(idx);
                var idx = idx ? idx : 1;
                // console.log(idx);
                if(isAnimate) return;
                isAnimate = true;
                $ct.animate({left: '-='+imgWidth*idx}, function(){
                    curIdx = curIdx + idx;  //curIdx += index;
                    if(curIdx === imgCount){
                        curIdx = 0;
                        $ct.css({left: 0-imgWidth});
                    }
                    isAnimate = false;
                    setBullet();
                });
            }
            function playPre(idx){
                var idx = idx ? idx : 1;
                if(isAnimate) return;
                isAnimate = true;
                $ct.animate({left: '+='+imgWidth*idx}, function(){
                    curIdx = curIdx - idx;
                    if(curIdx < 0){
                        curIdx = imgCount - 1;
                        $ct.css({left: 0-imgCount*imgWidth});
                    }
                    isAnimate = false;
                    setBullet();
                });
            }
            function setBullet(){
                $bullet.find('li').eq(curIdx)
                                  .addClass('active')
                                  .siblings()
                                  .removeClass('active');
            }
        });
    </script>
</body>
</html>

轮播写法四：全屏轮播

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>全屏轮播</title>
    <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
    <style>
        html, body, ul, li, p {
            margin: 0;
            padding: 0;
        }
        li {
            list-style: none;
        }
        a {
            text-decoration: none;
        }

        html, body, #header, #header .carousel, #header .carousel .img-ct {
            width: 100%;
            height: 100%;
        }

        #header .carousel {
            position: relative;
            overflow: hidden;
        }

        #header .img-ct {
            position: absolute;
        }
        #header .img-ct:after {
            display: block;
            content: '';
            clear: both;
        }
        #header .img-ct .item {
            float: left;
            position: relative;  /*内部元素应用绝对定位，所以父元素设置了相对定位*/
            height: 100%;
        }

        #header .main {
            position: absolute;
            width: 600px;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            z-index: 1;
            color: #fff;
            text-align: center;
        }
        #header .main h3 {
            font-size: 34px;
        }
        #header .main p {
            font-size: 16px;
            line-height: 2;
        }
        #header .cover {
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            background-repeat: no-repeat;
            background-position: center center;
            background-size: cover;
            opacity: 0.8;
        }

        .arrow {
            position: absolute;
            top: 50%;
            margin-top: -15px;
            width: 30px;
            height: 30px;
            line-height: 27px;
            text-align: center;
            background: #4E443C;
            color: #fff;
            border-radius: 30px;
            box-shadow: 0 0 2px #999;
            opacity: 0.8;
        }
        .arrow:hover {
            opacity: 1;
        }
        .pre {
            left: 10px;
        }
        .next {
            right: 10px;
        }

        ul.bullet {
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        ul.bullet li {
            width: 16px;
            height: 4px;
            border-radius: 2px;
            background: #fff;
            display: inline-block;
            cursor: pointer;
        }
        ul.bullet li.active {
            background: #666;
        }
    </style>
</head>
<body>
    <div id="header">
        <div class="carousel">
            <ul class="img-ct">
                <li class="item">
                    <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/6.jpg"></div>
                    <div class="main">
                        <h3>夜空中最亮的星</h3>
                        <p>是否在意</p>
                    </div>
                </li>

                <li class="item">
                    <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/7.jpg"></div>
                    <div class="main">
                        <h3>只因在人群中看你一眼</h3>
                        <p>是否在意</p>
                    </div>
                </li>

                <li class="item">
                    <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/8.jpg"></div>
                    <div class="main">
                        <h3>往城市边缘开</h3>
                        <p>把车窗摇下来</p>
                    </div>
                </li>

                <li class="item">
                    <div class="cover" data-bg-img="http://cdn.jirengu.com/book.jirengu.com/img/9.jpg"></div>
                    <div class="main">
                        <h3>夜空中最亮的星</h3>
                        <p>你是否在意</p>
                    </div>
                </li>
            </ul>


            <a class="pre arrow" href="#"><</a>
            <a class="next arrow" href="#">></a>
              
            
            <ul class="bullet">
                <li class="active"></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
        </div>
    </div>
    

    <script>
        $(function(){
            var $ct = $('.img-ct'),
                $items = $ct.children(),
                $pre = $('.pre'),
                $next = $('.next'),
                $bullet = $('.bullet'),
                imgWidth = $(window).width(),
                imgCount = $ct.children().size();  
            console.log($items, imgCount);
            
            $ct.prepend($items.last().clone());
            $ct.append($items.first().clone());
            $ct.find('.item').css('width', imgWidth);  //将class为item的li元素的宽度，替换成变量imgWidth —— 窗口宽度
            $ct.find('.cover').css('width', imgWidth);  //将div块级元素的宽度，替换成变量imgWidth —— 窗口宽度
            imgRealCount = $ct.children().size();
            $ct.css({left: 0-imgWidth, width: imgRealCount*imgWidth});

            var curIdx = 0;
            var isAnimate = false;

            $next.on('click', function(){
                playNext();
            });
            $pre.on('click', function(){
                playPre();
            });
            $bullet.find('li').on('click', function(){
                var index = $(this).index();
                if(index > curIdx){
                    playNext(index - curIdx);
                } else if (index < curIdx){
                    playPre(curIdx - index);
                }
            });

            setBg(1);  //共6个li，从第1位的li开始设置
            autoPlay();

            function stopAuto(){
                clearInterval(clock);
            }
            function autoPlay(){
                clock = setInterval(function(){
                    playNext();
                }, 2500);
            }


            //这里为了性能让图片用了懒加载
            function setBg(idx){
                var idx = idx || 0,
                    $node = $ct.children().eq(idx),  //取得点击的第几个li
                    $cover = $node.find('.cover'),  //找到索引的背景蒙层
                    imgUrl = $cover.attr('data-bg-img');  //返回选中元素data-ba-img属性的值
                if($node.data('isBgSet')) return;  //如果取得的li的数据存储有isBgSet属性，就直接返回
                $cover.css('background-image', 'url("' +imgUrl+ '")');  //将cover的背景图地址设置为imgUrl的地址
                $node.data('isBgSet', true);  //如果取得的li上没有data数据存储，就在其身上保存属性isBgSet,值true。<li isBgSet="true">
            }

            function setBullet(){
                $bullet.children().removeClass('active')
                                  .eq(curIdx).addClass('active');
            }

            function playNext(idx){  //idx=|curIdx-index|
                var idx = idx ? idx : 1;  // var idx = idx || 1; if(idx){idx=idx}else{idx=1}
                if(!isAnimate){
                    isAnimate = true;
                    setBg(curIdx + 2);  //滚动条：（3 0 1 2 3 0），假设从0滚到2，curIdx=2 2+2为横轴上的第四张图
                    $ct.animate({left: '-='+(imgWidth*idx)}, function(){
                        curIdx = (curIdx + idx)%imgCount;  //临界条件：(3 + 1)%4 余数0，相当于处于4位置上。此时替换面板将curIdx位置在第一位li上。clone()后共六个li，第一位li即第二个li上
                        if(curIdx === 0){
                            $ct.css({left: 0-imgWidth});
                        }
                        isAnimate = false;
                        setBullet();
                    });
                }
            }
            function playPre(idx){
                var idx = idx || 1;
                if(!isAnimate){
                    isAnimate = true;
                    setBg(curIdx);  //滚动条：（3 0 1 2 3 0），假设从2滚到0，curIdx=2 2为横轴上的第二张图
                    $ct.animate({left: '+='+(imgWidth*idx)}, function(){
                        curIdx = (imgCount + curIdx - idx)%imgCount;  //临界条件：(4+0-1)%4余3，相当于处于-1位置上。此时替换面板将curIdx位置在第四位li上。
                        if(curIdx === (imgCount-1)){
                            $ct.css({left: 0-imgWidth*imgCount});
                        }
                        isAnimate = false;
                        setBullet();
                    });
                }
            }
        });
    </script>
</body>
</html>

相关文章

  • Vue轮播图的实现以及其与jQuery轮播图的简单对比

    最近在学习Vue，然后做了一个轮播图，然后想起之前用jQuery做的轮播图，就打算进行一个对比。 jQuery轮播...

  • jQuery相关插件

    jQuery全屏滚动插件fullPage.js jquery轮播图插件unslider

  • 前端学习笔记本

    jQuery轮播图插件slider-prohttp://www.htmleaf.com/jQuery/Slides...

  • 用 jQuery 做个轮播

    初次体验jQuery 之后，体验一下jQuery强大之处，做一个简单的轮播，实现图片切换。 点击按钮切换轮播 页面...

  • 项目-轮播图

    整个轮播图分为三部分：轮播指标、轮播项目及轮播导航。用boostrap实现轮播图要比用js、jQuery方便的多，...

  • jquery代码实现爱奇艺轮播图效果

    爱奇艺轮播图效果的jquery代码实现。 html部分： css部分： jquery部分：

  • jquery 轮播

    相关思想：下一页先移再拿，上一页先拿再移。 外部容器position：relative; 因为容器内部是一个面板，...

  • jquery轮播

    1. 轮播的实现原理是怎样的？ 如上图所示，黑色的为显示区域，后面的红色矩形只有在黑色框内才能显示，其他时刻均不可...

  • jquery 轮播

    1.渐变轮播，图片淡入淡出 代码预览代码 2.无限循环滚动轮播效果 代码预览代码 3.全屏轮播(图片大加载比较慢)...

  • Jquery 轮播

    HTML CSS JS 无缝 原理：clone首图放入父容器末；clone尾图放入父容器头。丨 show 丨clo...

网友评论

      本文标题：jquery 轮播

      本文链接：https://www.haomeiwen.com/subject/yjwpfftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|jquery 轮播|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！