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

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实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

(0)

相关推荐

  • 原生js实现轮播图

    本文实例为大家分享了js轮播图的具体实现代码,供大家参考,具体内容如下 CSS: <style> * { margin: 0; padding: 0; list-style: none; text-decoration: none; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serifsans-serif; } body { background: #eee; } #Bigbox { width: 720p

  • 简单实现AngularJS轮播图效果

    本文实例为大家分享了AngularJS轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.baid

  • 原生js实现旋转木马轮播图效果

    话不多说,请看代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>旋转木马特效</title> <style type="text/css"> *{margin: 0;padding: 0;list-style:none;} #demo{width:1200px;mar

  • 基于vue.js轮播组件vue-awesome-swiper实现轮播图

    一般做移动端轮播图的时候,最常用的就是Swiper插件了,而vue.js也有一个轮播组件vue-awesome-swiper,用法跟swiper相似. 1.安装vie-awesome-swiper nam install vue-awesome-swiper --save-dev 2.引用vie-awesome-swiper组件,这里我是用vie-cli创建的项目,在main.js: import VueAwesomeSwiper from 'vue-awesome-swiper'; Vue.u

  • 原生JS京东轮播图代码

    本文实例为大家分享了JS轮播图的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <link rel="stylesheet" href="css/reset.css" rel="external

  • angularjs实现首页轮播图效果

    本文实例为大家分享了angularjs轮播图展示的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <meta charset="UTF-8"> <title>AngularJS carousel</title> <link href="http://libs.ba

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

    1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了,样式和逻辑均写在js里. 3.html标签代码,js代码 <div class="slider"> //轮播箭头 <p class="lastpic"><img src="../images/prev.png">&

  • 原生JS实现手动轮播图效果实例代码

    手动轮播图,为轮播图中的一种,轮播图主要有无缝轮播,手动轮播,延迟轮播,切换轮播等等... 轮播图主要用于展现图片,新出商品,词条,又能美观网页.給网页中增加动态效果. 手动轮播,是小编认为最简单的一种轮播方式,既能左右翻页,还能通过悬浮按钮,快速预览图片,所以今天就给大家写一个原生js手动轮播图. 一,利用JavaScript制作手动轮播图,首先排版. 引入默认样式表(可以手写): <link rel="stylesheet" href="css/Default st

  • swift实现自动轮播图效果(UIScrollView+UIPageControl+Timer)

    本文实例为大家分享了swift实现自动轮播图效果的具体代码,供大家参考,具体内容如下 比较简单,原理就不说了,这里只做记录: 代码如下: 1.准备 var pageControl:UIPageControl? var myscrollView:UIScrollView? var myTimer:Timer? var mycurrentPage:NSInteger? var courses = [ ["name":"first","pic":&qu

  • js实现京东轮播图效果

    本文实例为大家分享了js实现京东轮播图效果的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body,ul,li{padding:0;margin:0;} li{list-style-type:none;} .wr

  • android常见手动和自动轮播图效果

    本文实例为大家分享了android手动和自动轮播图效果的具体代码,供大家参考,具体内容如下 1.准备好需要的轮播图片,图片标题(初始化,声明). /**轮播图片*/ private int[] imageIds=new int[]{ R.drawable.ic_launcher, R.drawable.simple_player_control_focused_holo, R.drawable.dot_player1_1, R.drawable.jt5, }; /**轮播图片的标题*/ priv

  • 原生js实现简单轮播图效果

    本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 效果如下: 分析: 分析效果: 分析实现: 1.通过 document.querySelector('.类名') 的形式获取到装轮播图的大盒子(.carousel).装轮播图左右按钮的标签的父元素(.chevron).获取左右按钮(.chevron-left ..chevron-right).获取放轮播图图片的父元素ul(.carousel-body)[注:这里获取ul而不是回去li,是因为移动轮播图的时候是整个ul

  • js实现简单轮播图效果

    本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 使用transform = translateX()实现的图片切换 <style> .box { position: relative; overflow: hidden; margin: 200px auto; width: 600px; height: 400px; } .img { width: 3000px; height: 400px; } img { float: left; width: 600px;

  • js实现3D轮播图效果

    本文实例为大家分享了js实现3D轮播图效果的具体代码,供大家参考,具体内容如下 主要有平移和旋转构成3d效果的轮播图,小白一只,不足之处还请大家多多指教,代码如下 css代码: *{ padding: 0; margin: 0; } .box{ position: relative; width: 100%; height: 100%; top: 200px; margin: auto; } .warpper{ position: absolute; width: 100%; height: 1

  • Bootstrap实现基于carousel.js框架的轮播图效果

    本文实例为大家分享了Bootstrap轮播图效果展示的具体代码,供大家参考,具体内容如下 声明式触发需要使用到的几个data-*属性 1.data-ride:作用在最外层容器上,固定值:carousel 2.data-target:作用在class=carousel-indicators的每个子元素li上面,标注对那个元素进行点击轮播 3.data-slide:作用在前翻页和后翻页的两个a链接上,prev表示前翻页,next表示后翻页 4.data-slide-to:作用在class=carou

  • js实现无缝轮播图效果

    本文实例为大家分享了js实现无缝轮播图的具体代码,供大家参考,具体内容如下 //Utils.js //封装 预加载图片 var Utils=(function () { return { //SSS loadImg:function (srcList,callBack) {//图片地址 回调函数 var img=new Image(); img.num=0;//初始化num为0 图片数 img.imgList=[];//存放图片 img.srcList=srcList; img.callBack

随机推荐