topitme

JS

vart=n=0,

count;

$(document).ready(function(){

//获取图⽚标签长度

count=$("#banner_lista").length;

//不是当前显⽰的图⽚隐藏

$("#banner_lista:not(:first-child)").hide();

//点击切换图⽚

$("#bannerli").click(function(e){

vartarget=;//获取对应⽬标元素

varchildren=$("#ul").children();//获取ul⾥⾯的所有li元素集合

varindex=0;

for(i=0;i<;i++){

if(target==children[i]){//对⽐⽬标元素和li集合元素

index=i;//输出⽬标元素的下标

break;

}

}

n=index;

if(index>=count)return;

moveNext(index);

});

//轮播间隔时间

t=tInterval("showAuto()",10000);

//切换图⽚

functionmoveNext(val){

//淡⼊淡出效果

$("#banner_lista").filter(":visible").fadeOut(0).parent().children().eq(val).fadeIn(500);

//响应点击

$("#ul").children().eq(val).toggleClass("on");

//切换按钮的时候让上⼀个按钮回归原来的样式

$("#ul").children().eq(val).siblings().removeAttr("class");

}

//⼿机触摸效果

//⼿机触摸效果

varstartX,endX,moveX;

functiontouchStart(event){

vartouch=s[0];

startX=;

}

functiontouchMove(event){

vartouch=s[0];

endX=;

}

functiontouchEnd(event){

moveX=startX-endX;

if(moveX>50){

if(n>=(count-1)){

n=0;

moveNext(n);

}el{

++n;

moveNext(n);

}

}elif(moveX<-50){

if(n<=0){

n=count-1;

moveNext(n);

}el{

--n;

moveNext(n);

}

}

}

mentById("banner_list").addEventListener("touchstart",touchStart,fal);

mentById("banner_list").addEventListener("touchmove",touchMove,fal);

mentById("banner_list").addEventListener("touchend",touchEnd,fal);

});

$("#banner").hover(

function(){

clearInterval(t)

},

function(){

t=tInterval("showAuto()",10000);

}

);

//⾃动轮播

functionshowAuto(){

n=n>=count?0:++n;

$("#bannerli").eq(n).trigger('click');

}

CSS

body{

background:rgba(165,165,165,0.16);

padding:0;

margin:0;

width:100%;

height:auto;

}

#banner{

position:relative;

}

#banner_list{

width:100%;

height:400px;

overflow:hidden;

}

img{

width:100%;

height:400px;

padding:0;

margin:0auto;

}

ul{

width:33%;

margin-top:0;

margin-bottom:10px;

position:absolute;

bottom:10px;

margin:auto33%;

list-style-type:none;

display:flex;

flex-direction:row;

flex-wrap:wrap;

justify-content:center;

}

li{

margin-right:20px;

-webkit-border-radius:50%;

-moz-border-radius:50%;

border-radius:50%;

width:15px;

height:15px;

background:rgba(255,255,255,.38);

border:1pxsolidrgba(0,0,255,.1);

cursor:pointer;

}

.on{

background:#FFF;

}