html5触屏图片自动轮播,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...

1、本文使用js+jQuery实现轮播图，需要引用jquery包，另种实现分别是animate实现自适应的轮播，以及transform平滑轮播(在注释代码中)。

2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。

3、html标签代码，js代码

//轮播箭头

//轮播图片

• 
• 
• 
• 

$(document).ready(function() {

var len = $(".slider li").length-1;

//给slider设置样式

$(".slider").css({

"width":"100%",

"height": "inherit",

"overflow": "hidden",

"display":"inline-block"

});

//给ul设置宽度

$(".slides").css({

"position": "relative",

"width":((len+1)*100).toString()+"%",

"margin":"0",

"padding":"0"});

//给li设置百分比宽度

$(".slides li").css({

"width":(100/(len+1)).toString()+"%",

"float":"left"

});

//给图片设置宽度

$(".responsive").css({

"width":"100%",

"height":"inherit"

});

//控制点样式

$(".slider p").css({

"position": "absolute",

"z-index":"999",

"cursor": "pointer"

});

$(".slider .lastpic").css({

"left":"0",

"margin-top":"7%"

});

$(".slider .nextpic").css({

"right":"0",

"margin-top":"7%"

});

//animate移动

var i = 0;

$(".nextpic").click(function(){

moveNext(i);

});

$(".lastpic").click(function(){

moveLast(i);

});

//自动轮播

var timer = setInterval(function(){

moveNext(i);

},5000);

moveNext = function(n){

if(n==len){

i=-1;

$(".slider .slides").animate({right: ""},800);

}else{

$(".slider .slides").animate({right:((n+1)*100).toString()+"%"}, 800);

}

i++;

}

moveLast = function(n){

if(n==0){

i=len+1;

$(".slider .slides").animate({right:(len*100).toString()+"%"}, 800);

}else{

$(".slider .slides").animate({right:((n-1)*100).toString()+"%"}, 800);

}

i--;

}

//手机触摸效果

var startX,endX,moveX;

function touchStart(event){

var touch = event.touches[0];

startX = touch.pageX;

}

function touchMove(event){

var touch = event.touches[0];

endX = touch.pageX;

}

function touchEnd(event){

moveX = startX - endX;

if(moveX>50){

moveNext(i);

}else if(moveX

moveLast(i);

}

}

document.getElementById("slides").addEventListener("touchstart",touchStart,false);

document.getElementById("slides").addEventListener("touchmove",touchMove,false);

document.getElementById("slides").addEventListener("touchend",touchEnd,false);

//transition移动固定宽度，无法自适应

// $(".nextpic").click(function(){

// if(i==len){

// i=-1;

// $(".slider .slides").css({

// 'transition-timing-function':'linear',

// 'transition-duration':'800ms',

// 'transform':'translateX(0px)'

// })

// }else{

// $(".slider .slides").css({

// 'transition-timing-function':'linear',

// 'transition-duration':'800ms',

// 'transform':'translateX(-'+(i+1)*width+'px)'

// })

// }

// i++;

// });

// $(".lastpic").click(function(){

// if(i==0){

// i=len+1;

// $(".slider .slides").css({

// 'transition-timing-function':'linear',

// 'transition-duration':'800ms',

// 'transform':'translateX(-'+len*width+'px)'

// })

// }else{

// $(".slider .slides").css({

// 'transition-timing-function':'linear',

// 'transition-duration':'800ms',

// 'transform':'translateX(-'+(i-1)*width+'px)'

// })

// }

// i--;

// })

});

以上所述是小编给大家介绍的JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！