jquery banner无缝轮播，左右切换 自动播放

jquery banner无缝轮播，左右切换 自动播放

效果展示

html代码

<div class="graphic-box">
    <div class="gra-imageList">
        <ul class="gra-list-parent">
            <li><img src="../images/timg.jpeg"></li>
            <li><img src="../images/timg1.jpeg"></li>
            <li><img src="../images/timg2.jpeg"></li>
        </ul>
        <ul class="gra-icon"></ul>
        <div class="gra-switch">
            <a href="javascript:void(0)" class="switch-left"><i class="iconfont"></i></a>
            <a href="javascript:void(0)" class="switch-right"><i class="iconfont"></i></a>
        </div>
    </div>
    <div class="gra-text">
        <div class="gra-text-inner">
            <h2>是标题啊</h2>
            <p class="gra-page"></p>
            <div class="gra-content">第一张图的文字说明</div>
        </div>
    </div>
</div>

css

/* 切换图片 */
/* 切换图片 */
.graphic-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  width: 1200px;
  margin: 40px auto;
  height: 510px;
  padding: 0 30px 0 20px;
  background: #151112;
  /* 左边图片 */
  /* 右边文字 */
  /* 圆点样式 */
}
.graphic-box .gra-imageList {
  position: relative;
  width: 763px;
  height: 100%;
  overflow: hidden;
  /* 图片 */
}
.graphic-box .gra-imageList > .gra-list-parent {
  width: 6650px;
  height: 477px;
  margin-top: 11px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: absolute;
}
.graphic-box .gra-imageList > .gra-list-parent li {
  overflow: hidden;
  height: 100%;
}
.graphic-box .gra-imageList > .gra-list-parent li img {
  width: 763px;
  height: 477px;
  object-fit: cover;
}
.graphic-box .gra-switch > a {
  position: absolute;
  top: 50%;
  width: 58px;
  height: 58px;
  line-height: 58px;
  color: #ffffff;
  text-align: center;
  border-radius: 29px;
  display: inline-block;
  background: rgba(0, 0, 0, 0.5);
}
.graphic-box .gra-switch > a .iconfont {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
}
.graphic-box .gra-switch > a.switch-left {
  left: 5px;
}
.graphic-box .gra-switch > a.switch-left .iconfont {
  -webkit-transform: rotate(-135deg);
          transform: rotate(-135deg);
}
.graphic-box .gra-switch > a.switch-right {
  right: 5px;
}
.graphic-box .gra-switch > a.switch-right .iconfont {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
}
.graphic-box .gra-text {
  width: 300px;
  padding: 44px 0 56px 50px;
  color: #cccccc;
  font-size: 16px;
}
.graphic-box .gra-text h2 {
  color: #ffffff;
  font-size: 24px;
}
.graphic-box .gra-text .gra-page {
  margin-bottom: 14px;
}
.graphic-box .gra-text .gra-page > em {
  color: #ff3232;
  font-size: 24px;
}
.graphic-box .gra-text .gra-content {
  line-height: 24px;
  height: 242px;
}
.graphic-box .gra-text .gra-text-time {
  margin-top: 24px;
}
.graphic-box .gra-icon {
  position: absolute;
  bottom: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.graphic-box .gra-icon li {
  margin-left: 5px;
}
.graphic-box .gra-icon li a {
  width: 10px;
  height: 10px;
  display: inline-block;
  background-color: #fff;
  border-radius: 50%;
}
.graphic-box .gra-icon li a.active {
  background-color: #1b7e5a;
}
.graphic-box .gra-icon li:first-child {
  margin-left: 0;
}

jquery

var graText = ['第一张图的文字说明', '2图方案', '3图文字'],   //切换文字内容
                liLength = $(".gra-imageList .gra-list-parent li").length,
                ulCont = $(".gra-imageList .gra-list-parent"),
                ulContWidth = $(".gra-imageList").width(),
                i=0,
                max=liLength-1,
                icon=$('.gra-icon'); //圆点盒子
                ulCont.children().eq(0).clone().appendTo(ulCont);
            $('.gra-page').append(`<em>${i+1}</em>`+'/'+liLength);
            /* 圆点添加class active */
            function picIconAll(liLength, camp) {
                var index = liLength > max ? 0 : liLength;
                $('.gra-icon li').eq(index).children().addClass("active").parent().siblings().children().removeClass("active");
                $('.gra-content').text(graText[index]);
                i = index;
                ulCont.stop().animate({left:-1*ulContWidth*liLength},{duration:600,complete:camp});
                $('.gra-page em').text(index+1)
            }
            //生成圆点
            $((new Array(liLength+1)).join(`<li><a href="javascript:void(0)"></a></li>`)).each(function (index,element) {
                $(element).attr({index: index}); //data存在$.cache中 attr存在标签中
                $('.gra-icon li').eq(i).find("a").addClass("active");
                icon.append(element);
            });
            //单击圆点,添加class
            icon.on("click","a",function() {
                picIconAll($(this).parent().attr('index'));
            });
            //左右按钮
            function move(num){
                var t;
                if(num>1){
                    t = i - 1;
                    if (t < 0) {
                        t = max;
                        ulCont.css({left: -1 * ulContWidth * (max + 1)});
                        return picIconAll(t);
                    } else {
                        return picIconAll(t);
                    }
                }else{
                    t = i + 1;
                    if (t <= max) {
                        return picIconAll(t);
                    }
                    return picIconAll(t, function(){
                        ulCont.css({left: 0});
                    });
                }
            }
            $('.gra-switch').on('click', 'a', function(ev) {
                move($(this).is('.switch-right') ? 0 : 2);
            });
            //自动轮播
            var timeAuto=setInterval(move,3000);
            $('.gra-imageList').hover(function(){
                clearInterval(timeAuto);
            },function () {
                timeAuto=setInterval(move,3000)
            })