先上效果图：

项目中要求做成上面的效果，在swiper官网找了一下找到类似的，但是起始位置在中间，没办法，只能自己动手借用swiper的css（刚开始用swiper写的，有些样式懒得改。。。）做出自己想要的效果（细节方面没做好不要介意，手动捂脸！）

html：

<div id="big">
        <div class="swiper-container">
            <div class="swiper-wrapper">
                </div>
              </div> 
    </div>
    <div id="left">
        <div class="leftTitle">
        </div>
    </div>

css：

<link rel="stylesheet" href="https://unpkg.com/swiper/css/swiper.css"> 
.swiper-container{
        position: relative;
	width: 90%;
	height: 36px;
	/* margin: 50px auto; */
	padding: 48px 0 6px 0;
        }
.swiper-wrapper{
       /* width: 100%; */
       left: 0;
       /* float: left; */
       /* white-space:nowrap; */
       padding-left: 36px;
       /* border:1px red solid; */
        }
.swiper-slide{
	width: 108px !important;
        height: 1px;
        background:#00a0e9;
        display:block;
	color:#1da6ff
        }
.swiper-slide:last-child{
        background:transparent;
        }
.swiper-slide span{
	position: relative;
	top: -5px;
	display: block;
	width: 10px;
	height: 10px;
        border-radius: 5px;
        background: #07193d;
        border:1px #0096dc solid;
	/* background:rgba(255,255,255,0.5); */
	}
.swiper-slide p{
	position: absolute;
	left: -16px;
	top: -30px;
	/* z-index: 999; */
	/* border:1px red solid; */
        }
.swiper-slide i{
	position: absolute;
	left: -16px;
	font-style: normal;
        top: 14px;
        width: 42px;
        display: block;
        text-align: center
	}
.orange{
        color:orange
        }
.orange span{
         background: orange;
        }

　js：

<script src=”http://code.jquery.com/jquery-1.11.1.js”></script>
　　　　　var data = ['10.01','10.02','10.03','10.04','10.05','10.06','10.07','10.08','10.09','10.10','10.11','10.12','10.13','10.14','10.15','10.16','10.17','10.18']
        var data1 = ['1条','2条','3条','4条','5条','6条','7条','8条','9条','10条','11条','12条','13条','14条','15条','16条','17条','18条']
        var num = 0
        var swiperSlide = document.getElementsByClassName('swiper-slide');
        var swiperWrapper = document.getElementsByClassName('swiper-wrapper')[0]; 
        $(function(){
            for(var i=0;i<data.length;i++){
                $('.swiper-wrapper').append('<div class="swiper-slide">'
            +'<i>'+data1[i]+'</i>'
            +'<span>'+'</span>'
            +'<p>'+data[i]+'</p>'
            +'</div>')
            }
            var lefts = $('.swiper-wrapper').width();           //时间轴位置
            var a = $('.swiper-slide').width();                 //单个元素的宽度(每次移动的距离)
            var abs = Math.floor(lefts/a/2);                    //时间轴元素要显示的个数20，从第二十的一半开始移动
            var i = 0
            var b = $('.swiper-wrapper').offset().left          //起始位置
            function time(){
                $('#left .leftTitle')[0].innerText=data[i];
                i++;
                if(i>data.length-1){
                    i=0
                };
                if(num<abs){                                            //小于10不移动
                    lefts = 0
                    $(".swiper-slide").eq(num).addClass('orange').siblings().removeClass('orange');
                    // console.log(1)
                }else if(num>=abs&&num<swiperSlide.length-abs){         //移动区间
                    $(".swiper-slide").eq(num).addClass('orange').siblings().removeClass('orange');
                    $('.swiper-wrapper').offset({'left':lefts})
                    lefts = lefts-a                                     //最后一页不移动
                    console.log(lefts)
                }else if(num>=swiperSlide.length-abs&&num<swiperSlide.length){                
                    $(".swiper-slide").eq(num).addClass('orange').siblings().removeClass('orange');
                    // console.log(3)
                }else if(num>swiperSlide.length-1){                      //大于元素总长度清零
                    num=0;
                    $(".swiper-slide").eq(num).addClass('orange').siblings().removeClass('orange');
                    $('.swiper-wrapper').offset({'left':b})
                    
                }
                num++;
        }time()
        setInterval(time,1000)
        }())

　　

版权声明：本文为hangzhou728原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/hangzhou728/p/11550591.html