1、本文使用js+jQuery实现轮播图，需要引用jquery包，另种实现分别是animate实现自适应的轮播，以及transform平滑轮播（在注释代码中）。
2、代码中的图片大家自己更换就可以了，样式和逻辑均写在js里。
3、html标签代码，js代码
<div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png"></p> <p class="nextpic"><img src="../images/next.png"></p> //轮播图片 <ul id="slides" class="slides clearfix"> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li> </ul></div>
<script type="text/javascript"> $(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<-50){
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--;
// }
) }
);
</script>
以上所述是小编给大家介绍的JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
