<div class="slide"> <div class="slide-box"> <ul class="slide-ul"> <li><a href="" title="1111"><img src="http://www.heibaipig.com/demo/images/test/1.jpg"></a></li> <li><a href="" title="2222"><img src="http://0.thumb.pc6.com/up/2016-5/20165199297.jpg"></a></li> <li><a href="" title="33333"><img src="http://0.thumb.pc6.com/up/2016-4/201642814841.jpg"></a></li> <li><a href="" title="44444"><img src="http://m.pc6.com/public/img/20151202.jpg"></a></li> </ul> </div> <div class="title-box"><p class="title">1111</p><span class="circle"><em class="active"></em><em></em><em></em><em></em></span></div> </div>
*{ padding:0; margin:0;} /*.slide{position:relative} .slide-box{height:100%; margin:0 auto;position:relative; overflow:hidden} .slide ul{ position:absolute; left:0; top:0; 100%; min-height:160px;} .slide ul li{ float:left; list-style:none; position:relative} .slide ul li img{ 100%; height:100%;}*/ /* focus_pic */ .slide{clear:both;position:relative;z-index:0;width:100%;max-width:960px;max-height:480px;margin:0 auto 0.3em auto;overflow:hidden;} .slide-box{ width:100%;height:100%; margin:0 auto;position:relative; overflow:hidden} .slide .slide-ul{position:absolute;z-index:1;left:0;width:10000px;} .slide .slide-ul li{float:left;display:block;} .slide .slide-ul li img{display:block;width:100%;height:100%;} .slide .title-box{ width:90%; padding:0 5%; z-index:999; height:30px; line-height:30px; color:#fff; font-size:14px; background:rgba(0,0,0,.5); position:absolute; left:0; bottom:0;} .slide .circle{ float:right;} .slide .title{ float:left; display:inline-block;} .slide .circle em{ display:inline-block; width:5px; height:5px; margin-left:5px; background-color:#fff; border-radius:50%;} .slide .circle .active{ background-color:#f00}
<script> //自适应 function sizeShow(){ var pic_w=$(window).width(); var pic_h=pic_w*0.5; $(".slide").height(pic_h); $(".slide li").width(pic_w).height(pic_h); $(".slide ul").width(pic_w*4) }; function scrollAuto(){ sizeShow(); $(window).resize(function(){sizeShow()}); var oclass=$(".slide"); var w=oclass.find("li").width(); var iNow = 0, index = 1, timer = null; var touch={ "s":[], "m":[], "e":[], "d":"" }; oclass[0].addEventListener('touchstart', function(e){ touch.s[0] = e.targetTouches[0].pageX; touch.s[1] = e.targetTouches[0].pageY; touch.s[2] = (new Date()).getTime(); clearInterval(timer) }, false); oclass[0].addEventListener('touchmove', function(e){ var a=Math.abs(e.targetTouches[0].pageX-touch.s[0]) var b=Math.abs(e.targetTouches[0].pageY-touch.s[1]); console.log("dMove:"+touch.d) if(a>=b && touch.d==""){ touch.d=1;//左右 //touch.m[0]=touch.s[0] }else if(touch.d==""){ touch.d=0;//上下或者偏上下 } console.log(a+":::"+b) if(touch.d==1){//左右滚动 e.preventDefault(); $(".slide ul").css({"left":-iNow*w+e.targetTouches[0].pageX-touch.s[0]}); // touch.m[0]=e.targetTouches[0].pageX; //touch.m[1]=e.targetTouches[0].pageY; } }, false); oclass[0].addEventListener('touchend', function(e){ console.log("dEnd:"+touch.d) if(touch.d==1){ if((new Date()).getTime()-touch.s[2]>700){ if(e.changedTouches[0].pageX-touch.s[0]>w/3){ auto("right") }else if(touch.s[0]-e.changedTouches[0].pageX>w/3){ auto("left") }else{ auto("reset") } }else{ if(e.changedTouches[0].pageX>touch.s[0]){ auto("right"); }else if(touch.s[0]>e.changedTouches[0].pageX){ auto("left") } } } touch.d=""; timer=setInterval(function(){ if(iNow>=$(".slide li").length-1){ iNow=0; }else{ iNow++ } $(".slide ul").animate({"left":-w*iNow}) $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active"); $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title")) },3000); }, false); function auto(c){ if(c=="left"){ if(iNow>=$(".slide li").length-1){ iNow=$(".slide li").length-1 }else{ iNow++ } console.log(iNow) $(".slide ul").animate({"left":-w*iNow}) }else if(c=="right"){ if(iNow<=0){ iNow=0 }else{ iNow-- } $(".slide ul").animate({"left":-w*iNow}) }else if(c=="reset"){ $(".slide ul").animate({"left":-w*iNow}) } $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active"); $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title")) }; timer=setInterval(function(){ if(iNow>=$(".slide li").length-1){ iNow=0; }else{ iNow++ } $(".slide ul").animate({"left":-w*iNow}) $(".circle em").eq(iNow).addClass("active").siblings().removeClass("active"); $(".title-box .title").html($(".slide li").eq(iNow).find("a").attr("title")) },3000); } $(function(){ scrollAuto(); }) </script>
实现效果: