Html：
1 <div id="slide-box-1"> 2 <ul> 3 <li> 4 <a href="javascript:void(0);"> 5 <div class="slide-img"> 6 <img src="images/ambassador/a-1.jpg"> 7 </div> 8 <div class="slide_text"> 9 <h3>国家领导人1</h3> 10 <div> 11 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p> 12 </div> 13 </div> 14 </a> 15 <img src="images/public/slide-bg.jpg" class="slide-bgimg"> 16 </li> 17 <li> 18 <a href="javascript:void(0);"> 19 <div class="slide-img"> 20 <img src="images/ambassador/a-1.jpg"> 21 </div> 22 <div class="slide_text"> 23 <h3>国家领导人2</h3> 24 <div> 25 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p> 26 </div> 27 </div> 28 </a> 29 <img src="images/public/slide-bg.jpg" class="slide-bgimg"> 30 </li> 31 <li> 32 <a href="javascript:void(0);"> 33 <div class="slide-img"> 34 <img src="images/ambassador/a-1.jpg"> 35 </div> 36 <div class="slide_text"> 37 <h3>国家领导人3</h3> 38 <div> 39 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p> 40 </div> 41 </div> 42 </a> 43 <img src="images/public/slide-bg.jpg" class="slide-bgimg"> 44 </li> 45 <li> 46 <a href="javascript:void(0);"> 47 <div class="slide-img"> 48 <img src="images/ambassador/a-1.jpg"> 49 </div> 50 <div class="slide_text"> 51 <h3>国家领导人4</h3> 52 <div> 53 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p> 54 </div> 55 </div> 56 </a> 57 <img src="images/public/slide-bg.jpg" class="slide-bgimg"> 58 </li> 59 <li> 60 <a href="javascript:void(0);"> 61 <div class="slide-img"> 62 <img src="images/ambassador/a-1.jpg"> 63 </div> 64 <div class="slide_text"> 65 <h3>国家领导人5</h3> 66 <div> 67 <p>银泰百货杭州湖滨店是一条紧邻西湖的综合性商业街区，这里是Dolce & Gabbana 中国大陆第一家旗舰店、Giorgio Armani 中国单体面积最大旗舰店的所在地，也是Hermes 和Versace 杭州首家旗舰店的诞生地。Prada、MaxMara、YSL、Ferragamo 等一线顶级奢侈品牌的强势登陆，LV 更在此开设7层大的亚洲旗舰店。</p> 68 </div> 69 </div> 70 </a> 71 <img src="images/public/slide-bg.jpg" class="slide-bgimg"> 72 </li> 73 </ul> 74 </div> 75 <ul id="slide-box-2"> 76 <li><img src="images/ambassador/a-4-1.jpg"></li> 77 <li><img src="images/ambassador/a-1-1.jpg"></li> 78 <li><img src="images/ambassador/a-2-1.jpg"></li> 79 <li><img src="images/ambassador/a-3-1.jpg"></li> 80 <li><img src="images/ambassador/a-3-1.jpg"></li> 81 </ul>
Css：
1 #slide-box-1 { 2 width: 100%; 3 height: 20rem; 4 } 5 #slide-box-1 > ul { 6 width: 10000%; 7 height: 100%; 8 position: relative; 9 left: -14.6rem; 10 } 11 #slide-box-1 > ul li { 12 width: 15.5rem; 13 height: 20rem; 14 background: #fff; 15 -webkit-border-radius: 0.25rem; 16 -moz-border-radius: 0.25rem; 17 border-radius: 0.25rem; 18 position: relative; 19 overflow: hidden; 20 margin-right: 0.75rem; 21 float: left; 22 } 23 #slide-box-1 > ul li a { 24 position: absolute; 25 z-index: 100; 26 } 27 #slide-box-1 > ul li a .slide-img { 28 width: 100%; 29 height: 7.75rem; 30 margin-bottom: 1.25rem; 31 overflow: hidden; 32 } 33 #slide-box-1 > ul li a .slide-img img { 34 width: 100%; 35 height: auto; 36 display: block; 37 } 38 #slide-box-1 > ul li a .slide_text { 39 padding: 0 0.6rem; 40 } 41 #slide-box-1 > ul li a .slide_text > h3 { 42 font-size: 0.7rem; 43 color: #333; 44 font-weight: 500; 45 margin-bottom: 0.3rem; 46 } 47 #slide-box-1 > ul li a .slide_text > div { 48 font-size: 0.6rem; 49 color: #666; 50 line-height: 1rem; 51 } 52 #slide-box-1 > ul li a .slide_text > div p { 53 font-size: 0.6rem; 54 color: #666; 55 line-height: 1rem; 56 } 57 #slide-box-1 > ul li .slide-bgimg { 58 width: 100%; 59 height: auto; 60 position: absolute; 61 bottom: 0; 62 } 63 #slide-box-2 { 64 width: 10000%; 65 height: 3.7rem; 66 position: absolute; 67 bottom: 0; 68 margin-left: -4.7rem; 69 overflow: hidden; 70 } 71 #slide-box-2 li { 72 width: 4.7rem; 73 height: 3.7rem; 74 float: left; 75 margin-top: 1.2rem; 76 -webkit-transition: margin-left 0.3s, margin-top 0.3s; 77 -moz-transition: margin-left 0.3s, margin-top 0.3s; 78 -ms-transition: margin-left 0.3s, margin-top 0.3s; 79 -o-transition: margin-left 0.3s, margin-top 0.3s; 80 transition: margin-left 0.3s, margin-top 0.3s; 81 position: relative; 82 overflow: hidden; 83 } 84 #slide-box-2 li img { 85 width: 5.55rem; 86 height: 3.7rem; 87 display: block; 88 } 89 #slide-box-2 li:first-child { 90 margin-left: 4.7rem; 91 } 92 #slide-box-2 .slide-active { 93 margin-top: 0; 94 width: 5.55rem; 95 z-index: 100; 96 }
Js：
1 //滑动轮播 2 function Touch_slide() { 3 var startX = 0; 4 var startY = 0; 5 var endX = 0; 6 var endY = 0; 7 var moveX = 0;//滑动距离 8 var li = null;//轮播元素 9 var list_index = 0;//轮播个数 10 var list_width = 0;//轮播图片宽度 11 var list_margin = 0;//轮播元素外边距 12 var list_distance = 0;//轮播距离 13 var ul_left = 0;//当前偏移量 14 var ul_left_copy = 0;//初始偏移量 15 var first_li = null;//第一个轮播元素 16 var last_li = null;//最后一个轮播元素 17 var first_li_down = null;//下方目录li第一个轮播元素 18 var last_li_down = null;//下方目录li最后一个轮播元素 19 var this_index = 0;//当前显示元素的index 20 //初始化 21 this.init = function (box, box_2) { 22 var container = box;//调用对象的容器 23 var con = box_2;//下方目录ul 24 var ul = container.children('ul');//轮播列表 25 li = ul.children('li'); 26 list_index = li.length;//元素个数 27 list_width = li.width();//元素宽度 28 list_margin = parseFloat(li.css('margin-right'));//元素右边距 29 list_distance = list_width + list_margin;//一次轮播滚动的距离 30 var screen_width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;//获取网页可见区域的宽度 31 ul_left_copy = (584 / 750) * screen_width;//由于火狐计算rem有问题，反向计算rem(ul元素的初始偏移量) 32 //复制第一个和最后一个 33 var first_li_copy = ul.children().eq(0).clone(); 34 var last_li_copy = ul.children().eq(list_index - 1).clone(); 35 ul.append(first_li_copy); 36 ul.prepend(last_li_copy); 37 //手指触摸到屏幕 38 start(container, ul); 39 //开始滑动 40 //move(box); 41 //滑动结束 42 touch_end(container, ul, con); 43 }; 44 var start = function (box) { 45 box.on('touchstart', function (event) { 46 var event = event || window.event; 47 event.preventDefault(); 48 startX = event.originalEvent.changedTouches[0].pageX; 49 startY = event.originalEvent.changedTouches[0].pageY; 50 }); 51 }; 52 var move = function (box) { 53 box.on('touchmove', function (event) { 54 var event = event || window.event; 55 event.preventDefault(); 56 startX = event.originalEvent.changedTouches[0].pageX; 57 startY = event.originalEvent.changedTouches[0].pageY; 58 }); 59 }; 60 var touch_end = function (box, ul, uldown) { 61 box.on('touchend', function (event) { 62 var event = event || window.event; 63 event.preventDefault(); 64 endX = event.originalEvent.changedTouches[0].pageX; 65 endY = event.originalEvent.changedTouches[0].pageY; 66 touch_if(ul, uldown); 67 }); 68 }; 69 //判断左滑还是右滑 70 var touch_if = function (ul, uldown) { 71 moveX = startX - endX;//滑动距离 72 ul_left = -parseFloat(ul.css('left'));//当前偏移量 73 var max_left = (list_distance * (list_index - 1) + ul_left_copy);//最大偏移量 74 var min_left = (ul_left_copy);//最小偏移量 75 if (moveX > 30) {//左滑 76 if (ul_left > max_left || ul_left == max_left) { 77 ul.animate({'left': -(ul_left + list_distance)}, function () { 78 ul.css({'left': -ul_left_copy}); 79 }); 80 } else { 81 ul.animate({'left': -(ul_left + list_distance)}); 82 } 83 //当前显示的li的index 84 this_index++; 85 if (this_index > (list_index - 1)) { 86 this_index = 0; 87 } 88 uldown.children('li').eq(this_index).addClass('slide-active').siblings('li').removeClass('slide-active'); 89 } else if (moveX < -30) {//右滑 90 if ((ul_left - 1) < min_left || ul_left == min_left) { 91 ul.animate({'left': -(ul_left - list_distance)}, function () { 92 ul.css('left', -max_left); 93 }); 94 } else { 95 ul.animate({'left': -(ul_left - list_distance)}); 96 } 97 //当前显示的li的index 98 this_index--; 99 if (this_index < 0) { 100 this_index = list_index-1; 101 } 102 uldown.children('li').eq(this_index).addClass('slide-active').siblings('li').removeClass('slide-active'); 103 } 104 } 105 } 106 107 var touch_slide = new Touch_slide(); 108 var slide_box = $('#slide-box-1'); 109 var li1 = slide_box.find('li'); 110 var slide_box_2 = $('#slide-box-2'); 111 var li2 = slide_box_2.children('li'); 112 //初始化时给下方列表第二个元素添加class 113 slide_box_2.children('li').eq(0).addClass('slide-active'); 114 //初始化时给上下两个ul添加value 115 li1.each(function (index, li) { 116 $(this).attr('val', index); 117 }); 118 li2.each(function (index, li) { 119 $(this).attr('val', index); 120 }); 121 //初始化 122 touch_slide.init(slide_box, slide_box_2);