因為公司需要自定義兩個輪播圖聯動，又不想引入第三方庫，所以自己研究了下。
下面只是乙個簡單的輪播圖，由此再拓展一下即可實現兩個輪播圖聯動。
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
>document
title
>
head
>
<
style
>
html
body
.wrap
.box
.box li
.box
.box1
.box2
.box3
.box4
.box5
style
>
<
body
>
<
div
class
="wrap"
>
<
ul class
="box"
>
<
li><
div
class
="box1 box2"
>11111
div>
li>
<
li><
div
class
="box1 box3"
>2222
div>
li>
<
li><
div
class
="box1 box4"
>3333
div>
li>
<
li><
div
class
="box1 box5"
>4444
div>
li>
ul>
div>
<
script
>
//獲取dom物件
varali
=document.queryselectorall(
'.box li');
varbox
=document.queryselector(
'.box');
varwrap
=document.queryselector(
'.wrap');
varaliwidth
=box.offsetwidth;
vardisx =0
;
//滑動距離
varcurrnum =0
;
//當前索引
//布局
wrap.style.height
=ali[
0].offsetheight+'
px'; box.style.width
=ali.length
*100+'
%'; ali.foreach(
function
(item,index))
//初始化手指座標點
varstartpoint =0
; varstartele =0
; //手指按下--獲取手指位置和box的位置
wrap.addeventlistener(
'touchstart',
function
(e));
//手指滑動
wrap.addeventlistener(
'touchmove',
function
(e));
//當手指抬起的時候，判斷滾動離左右的距離
wrap.addeventlistener(
'touchend',
function
(e)else
if(disx
<-
100);
box.style.transition ='
left 0.5s';
box.style.left =-
currnum
*wrap.offsetwidth +'
px'; })
script
>
body
>
html
>
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
>document
title
>
head
>
<
style
>
html
body
.wrap
.box
.box li
.box
.box1
.box2
.box3
.box4
.box5
<
/style
>
<
body
>
<
divclass="wrap"
>
<
ulclass="box"
>
<
li><
divclass="box1 box2"
>11111
div>
li>
<
li><
divclass="box1 box3"
>2222
div>
li>
<
li><
divclass="box1 box4"
>3333
div>
li>
<
li><
divclass="box1 box5"
>4444
div>
li>
ul>
div>
<
script
>
// 獲取dom物件
varali = document.queryselectorall('.box li');
varbox = document.queryselector('.box');
varwrap = document.queryselector('.wrap');
varaliwidth = box.offsetwidth;
vardisx = 0; //滑動距離
varcurrnum = 0; //當前索引
// 布局
wrap.style.height = ali[0].offsetheight+'px';
box.style.width = ali.length*100+'%';
ali.foreach(function(item,index))
// 初始化手指座標點
varstartpoint = 0;
varstartele = 0;
// 手指按下--獲取手指位置和box的位置
wrap.addeventlistener('touchstart',function(e));
// 手指滑動
wrap.addeventlistener('touchmove',function(e));
//當手指抬起的時候，判斷滾動離左右的距離
wrap.addeventlistener('touchend',function(e)else
if(disx
<-100);
box.style.transition = 'left 0.5s';
box.style.left = -currnum*wrap.offsetwidth + 'px';
})<
/script
>
body
>
html
>
原生 js 實現無縫滾動輪播
上一次我們看了如何實現簡單的輪播圖，以及各種常用的效果實現 這一次，我們看看無縫滾動輪播圖的實現 利用 左邊的margin 來實現 原理 我們建立乙個div，下圖共紅色部分 然後再div中建立乙個，並且裡面放置6個,每個中放置一張，前三張和後三張是重複的，如圖標記1，2，3 我們讓div 裡面超出部...
原生 js 實現無縫滾動輪播
上一次我們看了如何實現簡單的輪播圖，以及各種常用的效果實現 這一次，我們看看無縫滾動輪播圖的實現 利用 左邊的margin 來實現 原理 我們建立乙個div，下圖共紅色部分 然後再div中建立乙個，並且裡面放置6個,每個中放置一張，前三張和後三張是重複的，如圖標記1，2，3 我們讓div 裡面超出部...
sliderView海報滑動輪播
sliderview為容器型元素，與container非常類似，其包含私有stylebinding元素如下 屬性值 說明ispointhide false 是否隱藏輪播的圓點提示符，預設都顯示 bordercolor 無邊框顏色 borderwidth 無邊框的寬度 例項 ui view conta...