基于jquery的移动端JS无缝切换

Html：

 <div id="slide-box-1">
             <ul>
                 <li>
                     <a href="javascript:void(0);">
                         <div class="slide-img">
                             <img src="data:images/ambassador/a-1.jpg">
                         </div>
                         <div class="slide_text">
                             <h3>国家领导人1</h3>
                             <div>
                                 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p>
                             </div>
                         </div>
                     </a>
                     <img src="data:images/public/slide-bg.jpg" class="slide-bgimg">
                 </li>
                 <li>
                     <a href="javascript:void(0);">
                         <div class="slide-img">
                             <img src="data:images/ambassador/a-1.jpg">
                         </div>
                         <div class="slide_text">
                             <h3>国家领导人2</h3>
                             <div>
                                 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p>
                             </div>
                         </div>
                     </a>
                     <img src="data:images/public/slide-bg.jpg" class="slide-bgimg">
                 </li>
                 <li>
                     <a href="javascript:void(0);">
                         <div class="slide-img">
                             <img src="data:images/ambassador/a-1.jpg">
                         </div>
                         <div class="slide_text">
                             <h3>国家领导人3</h3>
                             <div>
                                 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p>
                             </div>
                         </div>
                     </a>
                     <img src="data:images/public/slide-bg.jpg" class="slide-bgimg">
                 </li>
                 <li>
                     <a href="javascript:void(0);">
                         <div class="slide-img">
                             <img src="data:images/ambassador/a-1.jpg">
                         </div>
                         <div class="slide_text">
                             <h3>国家领导人4</h3>
                             <div>
                                 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p>
                             </div>
                         </div>
                     </a>
                     <img src="data:images/public/slide-bg.jpg" class="slide-bgimg">
                 </li>
                 <li>
                     <a href="javascript:void(0);">
                         <div class="slide-img">
                             <img src="data:images/ambassador/a-1.jpg">
                         </div>
                         <div class="slide_text">
                             <h3>国家领导人5</h3>
                             <div>
                                 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p>
                             </div>
                         </div>
                     </a>
                     <img src="data:images/public/slide-bg.jpg" class="slide-bgimg">
                 </li>
             </ul>
         </div>
         <ul id="slide-box-2">
             <li><img src="data:images/ambassador/a-4-1.jpg"></li>
             <li><img src="data:images/ambassador/a-1-1.jpg"></li>
             <li><img src="data:images/ambassador/a-2-1.jpg"></li>
             <li><img src="data:images/ambassador/a-3-1.jpg"></li>
             <li><img src="data:images/ambassador/a-3-1.jpg"></li>
         </ul>

Css：

 #slide-box-1 {
   width: 100%;
   height: 20rem;
 }
 #slide-box-1 > ul {
   width: 10000%;
   height: 100%;
   position: relative;
   left: -14.6rem;
 }
 #slide-box-1 > ul li {
   width: 15.5rem;
   height: 20rem;
   background: #fff;
   -webkit-border-radius: 0.25rem;
   -moz-border-radius: 0.25rem;
   border-radius: 0.25rem;
   position: relative;
   overflow: hidden;
   margin-right: 0.75rem;
   float: left;
 }
 #slide-box-1 > ul li a {
   position: absolute;
   z-index:;
 }
 #slide-box-1 > ul li a .slide-img {
   width: 100%;
   height: 7.75rem;
   margin-bottom: 1.25rem;
   overflow: hidden;
 }
 #slide-box-1 > ul li a .slide-img img {
   width: 100%;
   height: auto;
   display: block;
 }
 #slide-box-1 > ul li a .slide_text {
   padding: 0 0.6rem;
 }
 #slide-box-1 > ul li a .slide_text > h3 {
   font-size: 0.7rem;
   color: #333;
   font-weight:;
   margin-bottom: 0.3rem;
 }
 #slide-box-1 > ul li a .slide_text > div {
   font-size: 0.6rem;
   color: #666;
   line-height: 1rem;
 }
 #slide-box-1 > ul li a .slide_text > div p {
   font-size: 0.6rem;
   color: #666;
   line-height: 1rem;
 }
 #slide-box-1 > ul li .slide-bgimg {
   width: 100%;
   height: auto;
   position: absolute;
   bottom:;
 }
 #slide-box-2 {
   width: 10000%;
   height: 3.7rem;
   position: absolute;
   bottom:;
   margin-left: -4.7rem;
   overflow: hidden;
 }
 #slide-box-2 li {
   width: 4.7rem;
   height: 3.7rem;
   float: left;
   margin-top: 1.2rem;
   -webkit-transition: margin-left 0.3s, margin-top 0.3s;
   -moz-transition: margin-left 0.3s, margin-top 0.3s;
   -ms-transition: margin-left 0.3s, margin-top 0.3s;
   -o-transition: margin-left 0.3s, margin-top 0.3s;
   transition: margin-left 0.3s, margin-top 0.3s;
   position: relative;
   overflow: hidden;
 }
 #slide-box-2 li img {
   width: 5.55rem;
   height: 3.7rem;
   display: block;
 }
 #slide-box-2 li:first-child {
   margin-left: 4.7rem;
 }
 #slide-box-2 .slide-active {
   margin-top:;
   width: 5.55rem;
   z-index:;
 }

Js：

 //滑动轮播
                 function Touch_slide() {
                     var startX = 0;
                     var startY = 0;
                     var endX = 0;
                     var endY = 0;
                     var moveX = 0;//滑动距离
                     var li = null;//轮播元素
                     var list_index = 0;//轮播个数
                     var list_width = 0;//轮播图片宽度
                     var list_margin = 0;//轮播元素外边距
                     var list_distance = 0;//轮播距离
                     var ul_left = 0;//当前偏移量
                     var ul_left_copy = 0;//初始偏移量
                     var first_li = null;//第一个轮播元素
                     var last_li = null;//最后一个轮播元素
                     var first_li_down = null;//下方目录li第一个轮播元素
                     var last_li_down = null;//下方目录li最后一个轮播元素
                     var this_index = 0;//当前显示元素的index
                     //初始化
                     this.init = function (box, box_2) {
                         var container = box;//调用对象的容器
                         var con = box_2;//下方目录ul
                         var ul = container.children('ul');//轮播列表
                         li = ul.children('li');
                         list_index = li.length;//元素个数
                         list_width = li.width();//元素宽度
                         list_margin = parseFloat(li.css('margin-right'));//元素右边距
                         list_distance = list_width + list_margin;//一次轮播滚动的距离
                         var screen_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//获取网页可见区域的宽度
                         ul_left_copy = (584 / 750) * screen_width;//由于火狐计算rem有问题，反向计算rem(ul元素的初始偏移量)
                         //复制第一个和最后一个
                         var first_li_copy = ul.children().eq(0).clone();
                         var last_li_copy = ul.children().eq(list_index - 1).clone();
                         ul.append(first_li_copy);
                         ul.prepend(last_li_copy);
                         //手指触摸到屏幕
                         start(container, ul);
                         //开始滑动
                         //move(box);
                         //滑动结束
                         touch_end(container, ul, con);
                     };
                     var start = function (box) {
                         box.on('touchstart', function (event) {
                             var event = event || window.event;
                             event.preventDefault();
                             startX = event.originalEvent.changedTouches[0].pageX;
                             startY = event.originalEvent.changedTouches[0].pageY;
                         });
                     };
                     var move = function (box) {
                         box.on('touchmove', function (event) {
                             var event = event || window.event;
                             event.preventDefault();
                             startX = event.originalEvent.changedTouches[0].pageX;
                             startY = event.originalEvent.changedTouches[0].pageY;
                         });
                     };
                     var touch_end = function (box, ul, uldown) {
                         box.on('touchend', function (event) {
                             var event = event || window.event;
                             event.preventDefault();
                             endX = event.originalEvent.changedTouches[0].pageX;
                             endY = event.originalEvent.changedTouches[0].pageY;
                             touch_if(ul, uldown);
                         });
                     };
                     //判断左滑还是右滑
                     var touch_if = function (ul, uldown) {
                         moveX = startX - endX;//滑动距离
                         ul_left = -parseFloat(ul.css('left'));//当前偏移量
                         var max_left = (list_distance * (list_index - 1) + ul_left_copy);//最大偏移量
                         var min_left = (ul_left_copy);//最小偏移量
                         if (moveX > 30) {//左滑
                             if (ul_left > max_left || ul_left == max_left) {
                                 ul.animate({'left': -(ul_left + list_distance)}, function () {
                                     ul.css({'left': -ul_left_copy});
                                 });
                             } else {
                                 ul.animate({'left': -(ul_left + list_distance)});
                             }
                             //当前显示的li的index
                             this_index++;
                             if (this_index > (list_index - 1)) {
                                 this_index = 0;
                             }
                             uldown.children('li').eq(this_index).addClass('slide-active').siblings('li').removeClass('slide-active');
                         } else if (moveX < -30) {//右滑
                             if ((ul_left - 1) < min_left || ul_left == min_left) {
                                 ul.animate({'left': -(ul_left - list_distance)}, function () {
                                     ul.css('left', -max_left);
                                 });
                             } else {
                                 ul.animate({'left': -(ul_left - list_distance)});
                             }
                             //当前显示的li的index
                             this_index--;
                             if (this_index < 0) {
                                 this_index = list_index-1;
                             }
                             uldown.children('li').eq(this_index).addClass('slide-active').siblings('li').removeClass('slide-active');
                         }
                     }
                 }

                 var touch_slide = new Touch_slide();
                 var slide_box = $('#slide-box-1');
                 var li1 = slide_box.find('li');
                 var slide_box_2 = $('#slide-box-2');
                 var li2 = slide_box_2.children('li');
                 //初始化时给下方列表第二个元素添加class
                 slide_box_2.children('li').eq(0).addClass('slide-active');
                 //初始化时给上下两个ul添加value
                 li1.each(function (index, li) {
                     $(this).attr('val', index);
                 });
                 li2.each(function (index, li) {
                     $(this).attr('val', index);
                 });
                 //初始化
                 touch_slide.init(slide_box, slide_box_2);