无缝轮播

HTML

<!--content-->
        <ul class="slides">
            <li>
                <a href="javascript:void(0)">
                    <img src="images/n-2.jpg" class="slide-img">
                    <p class="slide-info">艺术学院工会</p>
                    <div class="img-mask"></div>
                </a>
                <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <img src="images/i1.jpg" class="slide-img">
                    <p class="slide-info">艺术学院工会</p>
                    <div class="img-mask"></div>
                </a>
                <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <img src="images/n-3.jpg" class="slide-img">
                    <p class="slide-info">艺术学院工会</p>
                    <div class="img-mask"></div>
                </a>
                <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p>
            </li>
            <li>
                <a href="javascript:void(0)">
                    <img src="images/n-4.jpg" class="slide-img">
                    <p class="slide-info">艺术学院工会</p>
                    <div class="img-mask"></div>
                </a>
                <p class="slide-title">中国美术学院工会组织教职工开展登山、健步走活动</p>
            </li>
        </ul>
        <!--control btn-->
        <div id="left-btn" class="img-btn"></div>
        <div id="right-btn" class="img-btn"></div>
        <ol class="slide-control">
            <li class="iconfont icon-zuojiantou-copy"></li>
            <li class="iconfont icon-jiantou"></li>
        </ol>

CSS/LESS

.slides {
    width: 100%;
    height: 383px;
    position: relative;
    li {
      -webkit-transition: all .45s;
      -moz-transition: all .45s;
      -ms-transition: all .45s;
      -o-transition: all .45s;
      transition: all .45s;
      .slide-img, .slide-info, .slide-title, .img-mask {
        -webkit-transition: all .45s;
        -moz-transition: all .45s;
        -ms-transition: all .45s;
        -o-transition: all .45s;
        transition: all .45s;
      }
      .slide-img {
        display: block;
        width: 100%;
        height: auto;
        min-height: 100%;
      }
      .slide-info {
        background: #2e79bf;
        color: #fff;
        font-size: 16px;
        padding: 7px 20px;
        position: absolute;
        left: 50%;
        bottom: 28px;
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;
      }
      .slide-title {
        width: 543px;
        margin: 0 auto;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: #474747;
        text-align: center;
        margin-top: 11px;
        opacity: 0;
      }
      .img-mask {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.5);
        position: absolute;
        top: 0;
        left: 0;
      }
    }
    .slide-li-focus {
      .slide-info {
        opacity: 1;
      }
      .slide-title {
        opacity: 1;
      }
      .img-mask {
        background: rgba(255, 255, 255, 0);
      }
    }
  }
  .slide-control {
    width: 623px;
    margin: 0 auto;
    margin-top: 6px;
    li {
      color: #474747;
      font-size: 30px;
      float: left;
      cursor: pointer;
      -webkit-transition: all .3s;
      -moz-transition: all .3s;
      -ms-transition: all .3s;
      -o-transition: all .3s;
      transition: all .3s;
      &:hover {
        color: #2e79bf;
      }
    }
    .icon-jiantou {
      float: right;
    }
  }
  .img-btn {
    width: 290px;
    height: 308px;
    position: absolute;
    z-index: 200;
    top: 106px;
    cursor: pointer;
  }
  #right-btn {
    right: 0;
  }

JS

slide: function () {
                var slide_box = $('.slides');
                var box_width = slide_box.width();
                var slide_li = slide_box.children('li');
                var li_width = 500;
                var li_height = 308;
                var li_length = slide_li.length;
                var li_focus_height = 383;
                var li_focus_width = 623;
                var click_num = 1;//点击次数
                //初始化样式
                slide_box.children('li').eq(1).addClass('slide-li-focus');
                //初始化轮播样式
                function init() {
                    var focus_li = $('.slide-li-focus');
                    slide_li.css({
                        'position': 'absolute',
                        'width': li_width,
                        'height': li_height,
                        'top': (li_focus_height - li_height) / 2,
                        'left': (box_width / 2 - li_width / 2),
                        'z-index': 10,
                        'opacity': 0
                    });
                    focus_li.css({
                        'top': 0,
                        'width': li_focus_width,
                        'height': li_focus_height,
                        'left': (box_width / 2 - li_focus_width / 2),
                        'z-index': 288,
                        'opacity': 1
                    });
                    //如果是第一张
                    if (focus_li.index() === 0) {
                        slide_box.children('li').eq(li_length - 1).css({
                            'left': 0,
                            'z-index': 90,
                            'opacity': 1
                        });
                        focus_li.next().css({
                            'left': (box_width - li_width),
                            'z-index': 100,
                            'opacity': 1
                        });
                        //如果是最后一张
                    } else if (focus_li.index() === (li_length - 1)) {
                        focus_li.prev().css({
                            'left': 0,
                            'z-index': 100,
                            'opacity': 1
                        });
                        slide_box.children('li').eq(0).css({
                            'left': (box_width - li_width),
                            'z-index': 90,
                            'opacity': 1
                        });
                    } else {
                        focus_li.prev().css({
                            'left': 0,
                            'z-index': 100,
                            'opacity': 1
                        });
                        focus_li.next().css({
                            'left': (box_width - li_width),
                            'z-index': 100,
                            'opacity': 1
                        });
                    }
                }

                init();
                var left_btn = $('.icon-zuojiantou-copy');
                var right_btn = $('.icon-jiantou');
                left_btn.on('click', function () {
                    click_left();
                });
                right_btn.on('click', function () {
                    click_right();
                });
                $('#left-btn').on('click', function () {
                    click_left();
                });
                $('#right-btn').on('click', function () {
                    click_right();
                });
                //点击right
                function click_right() {
                    if (click_num === (li_length - 1)) {
                        slide_box.children('li').eq(0).addClass('slide-li-focus').siblings('li').removeClass('slide-li-focus');
                        click_num = 0;
                    } else {
                        $('.slide-li-focus').removeClass('slide-li-focus').next().addClass('slide-li-focus');
                        click_num++;
                    }
                    init();
                }

                //点击left
                function click_left() {
                    if (click_num === 0) {
                        slide_box.children('li').eq(li_length - 1).addClass('slide-li-focus').siblings('li').removeClass('slide-li-focus');
                        click_num = li_length - 1;
                    } else {
                        $('.slide-li-focus').removeClass('slide-li-focus').prev().addClass('slide-li-focus');
                        click_num--;
                    }
                    init();
                }

                //自动轮播
                var timer = setInterval(click_right, 3000);
                //鼠标移入暂停
                $('.activity').on('mouseenter', function () {
                    clearInterval(timer)
                });
                //移出恢复
                $('.activity').on('mouseleave', function () {
                    timer = setInterval(click_right, 3000);
                });
            },