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

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

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

3、html标签代码,js代码

//轮播图片

    暂无<a href=图片">
  • 暂无<a href=图片">
  • 暂无<a href=图片">
  • 暂无<a href=图片">
//给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:(len100).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',// 'transform':'translateX(-'+(i+1)width+'px)'
// })
// }
// i++;
// });
// $(".lastpic").click(function(){
// if(i==0){
// i=len+1;
// $(".slider .slides").css({
// 'transition-timing-function':'linear',// 'transform':'translateX(-'+len
width+'px)'
// })
// }else{
// $(".slider .slides").css({
// 'transition-timing-function':'linear',// 'transform':'translateX(-'+(i-1)*width+'px)'
// })
// }
// i--;
// })

});

以上所述是小编给大家介绍的JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...