原生JS相容移動端的輪播圖

阿新 • • 發佈：2018-12-19

關於輪播圖 :

原生JS
相容IE9+等各大瀏覽器
相容移動端
自適應（根據圖片原比例）
左右箭頭切換
點選索引切換
移動端滑動切換
只需修改圖片路徑

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" 
>
 <title>原生JS相容移動端-輪播圖</title>
 <style>
   *,
   ::before,
   ::after{
     padding: 0;
     margin: 0;
     box-sizing: border-box;
     -webkit-box-sizing: border-box;
     -webkit-tap-highlight-color: transparent;/*清除移動端點選高亮效果*/
   }
   body{
     font-family:Microsoft YaHei,sans-serif; 

     font-size: 14px;
     color: #333;
   }
   ol,ul{
     list-style: none;
   }
   /*清除浮動*/
   .clearfix::before,
   .clearfix::after{
     content: "";
     display: block;
     height: 0;
     line-height: 0;
     visibility: hidden;
     clear: both;
   }

   .carousel{
     width: 100%;
     max-width 
: 750px;
     min-width: 320px;
     margin: 0 auto;
     position: relative;
   }
   #banner{
     width: 100%;
     overflow: hidden;
     position: relative;
   }
   #banner ul:first-child{
     width: 1000%;
     transform: translateX(-10%);
     -o-transform: translateX(-10%);
     -ms-transform: translateX(-10%); /* IE 9 */
     -moz-transform: translateX(-10%);
     -webkit-transform: translateX(-10%);
     overflow: hidden;
   }
   #banner ul:first-child li{
     width: 10%;
     float: left;
     box-sizing: border-box;
   }

   #banner ul:first-child li a{
     display: block;
     width: 100%;
     position: relative;
   }
   #banner ul:first-child li a span{
     left: 50%;
     position: absolute;
     font-size: 40px;
     text-align: center;
     display: block;
     top: 50%;
     transform: translate(-50%,-50%);
     color: red;
   }
   #banner ul:first-child li a img{
     width: 100%;
     display: block;
   }
   #banner ul:last-child{
     position: absolute;
     bottom: 6px;
     width: 100%;
     text-align: center;
   }
   #banner ul:last-child li{
     width: 6px;
     height: 6px;
     border: 1px solid #fff;
     border-radius: 50%;
     display: inline-block;
     margin-left: 10px;
   }
   #banner ul:last-child li:first-child{
     margin-left: 0;
   }
   #banner ul:last-child li.now{
     background: red;
   }

   /*左右切換*/
   .switchBtn{
     position: absolute;
     width: 6%;
     top: 50%;
     box-sizing: border-box;
     cursor: pointer;
   }
   .switchBtn img{
     display: block;
     width: 100%;
     opacity: .35;
   }
   .switchBtn:hover img{
     opacity: .85;
   }
   #prevBtn{
     left: 20px;
     transform: scaleX(-1) translate(0,-50%);
     -o-transform: scaleX(-1) translate(0,-50%);
     -ms-transform: scaleX(-1) translate(0,-50%);
     -moz-transform: scaleX(-1) translate(0,-50%);
     -webkit-transform: scaleX(-1) translate(0,-50%);
   }
   #nextBtn{
     right: 20px;
     transform: translate(0,-50%);
     -o-transform: translate(0,-50%);
     -ms-transform: translate(0,-50%);
     -moz-transform: translate(0,-50%);
     -webkit-transform: translate(0,-50%);
   }
 </style>
</head>
<body>
<div class="carousel">
 <div id="banner">
   <ul class="clearfix slide">
     <li><a href="#"><img src="images/1.jpg"><span>1</span></a></li>
     <li><a href="#"><img src="images/2.jpg"><span>2</span></a></li>
     <li><a href="#"><img src="images/3.jpg"><span>3</span></a></li>
     <li><a href="#"><img src="images/4.jpg"><span>4</span></a></li>
     <li><a href="#"><img src="images/5.jpg"><span>5</span></a></li>
     <li><a href="#"><img src="images/6.jpg"><span>6</span></a></li>
     <li><a href="#"><img src="images/7.jpg"><span>7</span></a></li>
     <li><a href="#"><img src="images/8.jpg"><span>8</span></a></li>
   </ul>
   <!--左右切換箭頭-->
   <span class="switchBtn" id="prevBtn"><img src="images/arrow.png" class="prevArrow" alt=""></span>
   <span class="switchBtn" id="nextBtn"><img src="images/arrow.png" class="nextArrow" alt=""></span>
   <!--輪播索引的點-->
   <ul class="ctrl"></ul>
 </div>
</div>
<script>
 window.onload = function(){
   var banner = document.getElementById('banner');//輪播盒子
   var width = banner.offsetWidth;
   var imageBox = banner.querySelector('ul.slide');
   var imageCount = imageBox.querySelectorAll('li').length; //圖片張數
   var pointBox = banner.querySelector('ul.ctrl');//點盒子
   var prevBtn = document.getElementById("prevBtn"); //向左按鈕
   var nextBtn = document.getElementById("nextBtn"); //向右按鈕

   var index = 1; //預設開始的圖片位置
   var moveSpeed = 2000;//輪播速度
   //動態新增索引
   for(var i = 0;i<imageCount;i++){
     var li = document.createElement("li");
     pointBox.appendChild(li);
     if(i == 0){
       //預設第一個點高亮
       li.className="now"
     }
   }
   var points = pointBox.querySelectorAll('li');//所有的點

 //在第一張前面新增最後一張，最後一張後面新增第一張，防止切換到首尾時出現空白
   var slideFirst = imageBox.querySelector('li:first-child');
   var newLast = slideFirst.cloneNode(true);//複製第一張
   imageBox.appendChild(newLast);//在最後面新增第一張
   var slideLast = imageBox.querySelector('li:nth-last-of-type(2)');//最後一張圖片，此時已經在最後面添加了第一張
   var newFirst = slideLast.cloneNode(true);//複製最後一張
   prependChild(imageBox,newFirst);//在最前新增最後一張

   //在最前新增最後一張的方法
   function prependChild(parent,newChild){
     if(parent.firstChild){
       parent.insertBefore(newChild,parent.firstChild);
     } else {
       parent.appendChild(newChild);
     }
     return parent;
   }
   //加過渡
   var addTransition = function(){
     imageBox.style.transition = "all 0.3s";
     imageBox.style.oTransition = "all 0.3s";
     imageBox.style.msTransition = "all 0.3s";
     imageBox.style.mozTransition = "all 0.3s";
     imageBox.style.webkitTransition = "all 0.3s";
   };
   //清除過渡
   var removeTransition = function(){
     imageBox.style.transition = "none";
     imageBox.style.oTransition = "none";
     imageBox.style.msTransition = "none";
     imageBox.style.mozTransition = "none";
     imageBox.style.webkitTransition = "none";
   };
   //定位
   var setTranslateX = function(translateX){
     imageBox.style.transform = "translateX("+translateX+"px)";
     imageBox.style.oTransform = "translateX("+translateX+"px)";
     imageBox.style.msTransform = "translateX("+translateX+"px)";
     imageBox.style.mozTransform = "translateX("+translateX+"px)";
     imageBox.style.webkitTransform = "translateX("+translateX+"px)";
   };

//    判斷是否動畫結束
   function transitionEnd(dom,callback){
     if(!dom || typeof dom != 'object'){
       return false;
     }
     dom.addEventListener('transitionend', function(){
       callback && callback();
     });
     dom.addEventListener('transitionEnd', function(){
       callback && callback();
     });
     dom.addEventListener('oTransitionEnd', function(){
       callback && callback();
     });
     dom.addEventListener('msTransitionEnd', function(){
       callback && callback();
     });
     dom.addEventListener('mozTransitionEnd', function(){
       callback && callback();
     });
     dom.addEventListener('webkitTransitionEnd', function(){
       callback && callback();
     });
   }
   var timer = null;
//    輪播動畫
   function  setTime(){
     timer = setInterval(function(){
       index ++;
       addTransition();
       setTranslateX(-index * width);
       transitionEnd(imageBox,function(){
         if(index == imageCount){
           removeTransition();
           index = 0;
           setTranslateX(-index * width);
         }
       });
       setPoint();
     },moveSpeed);
   }
   setTime();

   //當前圖片對應的點高亮
   var setPoint = function(){
     for(var i = 0 ; i < points.length ; i++){
       points[i].className = " ";
     }
     if(index == 0){
       points[imageCount-1].className = "now";
     }
     if(index == imageCount+1){
       points[0].className = "now";
     }
     if(index <= imageCount){
       points[index-1].className = "now";
     }
   };

   //touch事件
   var startX = 0; //記錄起始x的座標
   var moveX = 0;  //滑動的時候x的位置
   var distanceX = 0;  //滑動的距離
   var isMove = false; //是否滑動過
   imageBox.addEventListener('touchstart', function(e){
     startX = e.touches[0].clientX;  //記錄起始X
   });
   imageBox.addEventListener('touchmove',function(

 
 
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    原生JS實現移動端輪播圖。
      
                話不多說直接上程式碼。html 結構<div class="jd_banner">
    <!--圖片-->
    <ul class="jd_bannerImg clearfix">
        <li>
       

  
 

    

    
    原生JS相容移動端的輪播圖
       
  
  
 關於輪播圖 : 
  
  原生JS 
  相容IE9+等各大瀏覽器 
  相容移動端 
  自適應（根據圖片原比例） 
  左右箭頭切換 
  點選索引切換 
  移動端滑動切換 
  只需修改圖片路徑  
  
 <!DOCTYPE html>
<html lang=" 

  
 

    

    
    原生js實現簡單移動端輪播圖
      1、程式碼部分 
　　分為四個檔案： 
　　slideshow.html 
　　slideshow.css 
　　base.js 
　　slideshow.js 
1.1、slideshow.html 
 
 
  
  
 <!DOCTYPE html>
<html lang="en"&g 

  
 

    

    
    原生js實現簡單的移動端輪播圖效果
      
                

近期接觸了移動端html5和css3，想加入些輪播圖，於是在網上搜集整理了一些資料，經自己補充改進使之較為完善

原生JavaScript 移動端web輪播圖片

實現功能

索引小圓點
	過渡滑動動畫的定時輪播
	移動端可以滑動切換圖片
	滑動距離不夠則吸附回去
效果圖 

  
 

    

    
    原生js實現無縫滾動輪播圖（移動端）-自動輪播
      
							
							
							想不依賴任何外掛和庫，就用原生js實現移動端自動輪播，發現網上的都不盡如人意，乾脆自己寫一個，程式碼有部分參考，廢話少說，上程式碼。


head部分，沒什麼好說的：




<meta charset="utf-8">
        <me 

  
 

    

    
    移動端輪播圖
      gin   eight   輪播   body   art   text   start   fun   con   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
     

  
 

    

    
    原生js仿網易輪播圖
      win   cli   font   inline   move   創建   ica   tle   默認   
<!-- HTML部分 -->
<div id="wrap">
    <div class="picBox">    <!-- 圖片區域 --> 

  
 

    

    
    移動端輪播圖實現
       
 1：HTML樣式<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-s 

  
 

    

    
    原生js實現淘寶輪播圖，支援左右和跳轉（滑鼠點多快都不會亂）。
       
 
 用transform是因為這個比left的效能好。 
 這個是演示網址（不要直接存下來哦）：https://shalltears.github.io/test-sowing-map/ 。 
 這個是完整程式碼下載地址，覺得還行的下載支援一下：https://download.csdn.ne 

  
 

    

    
    原生js實現網易輪播圖
      
							
							
							    前端基本功-網頁特效5


一、實現效果圖 
 
二、分析佈局 
主盒子裡分上下兩個小盒子（1和2）。 
    包含圖片的盒子佔兩張圖片的寬（3），處於上盒子中，當前圖片在上盒子（1）中，其它圖片在盒子（3）的右側等待播放。 
    下邊的盒子（2） 

  
 

    

    
    實現移動端輪播圖
      1、移動端實現滑動切換輪播圖，主要由touch（touchstart,touchmove,touchend）事件實現。在touch事件中可以通過 e.touches[0].clientX獲取當前觸控點的位置，在touchend事件中沒有e.touches[0].clientX值 
 
 var banner= 

  
 

    

    
    【原生js】詳解輪播圖之無縫滾動
      
								
								            
							
							
							前言：輪播圖，是網站首頁中最常見的一種圖片切換特效，作為前端開發者，我相信很多開發者都直接呼叫了JQuery中的封裝好的方法實現圖片輪播，省事簡單。所以我今天想介紹一下原生js程式碼實現的圖片輪播。

 

  
 

    

    
    swipe 移動端輪播圖
       
 
 轉自 https://blog.csdn.net/qq_31648761/article/details/78320898 
 下載連結：https://codeload.github.com/thebird/Swipe/zip/2.0.0，下載後解壓，直接執行index.html檔案，在 

  
 

    

    
    利用swiper外掛實現移動端輪播圖
      
							
							
							準備：
swiper.min.css   swiper.min.js
swiper.min.css： head 標籤內引入
swiper.min.js： 標籤前引入
CSS 部分
/* swiper start*/

.swiper-container {
   

  
 

    

    
    原生 js 實現移動端 Touch 輪播圖
       
 
  
  小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。 
  
 Touch 輪播圖 
 
  touch輪播圖其實就是通過手指的滑動，來左右切換輪播圖，下面我們通過一個 

  
 

    

    
    JS實現某東移動web輪播圖
       
  
  
 移動web輪播圖 
 參考例項，可以從中儲存輪播圖的圖片，這裡我們放入uploads的資料夾下，將八張圖片一次改為l1.jpg,l2.jpg… 
  
  https://m.jd.com/ 
  
 HTML 
  
  這裡要放入十張圖片，因為手指滑動的時候要從第一張滑動到最後一張，是無 

  
 

    

    
    FlexSlider外掛的詳細設定引數（相容PC和移動的輪播圖）
      
                
$(window).load(function() {
 $('.flexslider').flexslider({
  animation: "fade",              //圖片變換方式：淡入淡出或者滑動
  slideDirection: "horizon 

  
 

    

    
    移動web——輪播圖
      title   con   cto   ttr   ati   ann   lock   enter   alt   1、我們將5張圖片又前後各增加一張，第一張前增加的是原本的第五張，第五張後增加的是原本的第一張，增加的原因無非是手指滑動的時候有輪播效果，這不像以前的輪播圖，點擊圖標就能立刻將ul跳轉到指定位 

  
 

    

    
    如何用js做簡單的輪播圖
      在網頁中我們經常會見到各式各樣美觀的輪播圖效果，如何用JS的DOM操作來實現輪播圖效果？ 
新建一個HTML檔案，並準備幾張圖片作為輪播圖 
頁面中有4項內容：輪播圖，兩個按鈕“上一張“下一站張””，縮圖 
功能：點選“上一張”或“下一張”可以切換當前輪播圖的圖片， 
滑鼠懸停在輪播圖上回停止輪播，移開後輪播 

  
 

    

    
    移動端滑屏全應用【二】滑屏封裝注意事項與移動端輪播
      移動端滑屏封裝注意事項： 
1.touchMove時候方向判斷（可以控制在 以x軸位中心正負15度之內為橫向滑屏，縱向滑屏同理） 
2.上下滑屏與左右滑屏的衝突(判斷使用者滑動方向後，只做單方向的處理) 
3.安卓觸控(例如某個人手指很粗)觸發touchMove（記錄上一次的手指座標，每一次move的時候判斷