Native JS line and a carousel diagram (supports drag and drop cut screen)

FoxSlider.js not be called Library Library

1, briefly

Are used to a variety of components, and no real sense of a package can drag the graph cut screen carousel, after some written and found to write such a carousel map in order to write a good, really it is quite difficult, different events completeness different devices? Event triggers the timing of the control? How better to package? After the events of adaptive window reset? Etc ..., look at the source swiper this library, you know that little things can be simple.
Now write this basic requirement can be satisfied, you can drag the switch can also click on the switch.

github portal (you want to finish together (wan) good (shua) !! Fork & Star ^ _ ^ what you will be beautiful

Teleport can not copy the link: github.com/forrestyuan...

Native code line and sometimes cool, native has been cool

1.1, properties

For the phone, tablet, PC and other terminals.

1.2, shortcomings

Packaging simple, functional urgent need to expand
Semantic is not strong enough
User Configuration weak

2, call the instance

html Structure Code

<!-- 引入js文件 -->
<script src="js/base.js"></script>
<!-- 主要dom结构 -->
<div class="slider-container">
  <div class="slide-bar">
    <div class="slider ">
      <img src="assets/slider1.jpg" alt="">
    </div>
    <div class="slider">
      <img src="assets/slider2.jpg" alt="">
    </div>
    <div class="slider">
        <img src="assets/slider3.jpg" alt="">
    </div>
  </div>
  <div class="slider-pin">
    <span class="pin on"></span>
    <span class="pin"></span>
    <span class="pin"></span>
  </div>
</div>
复制代码

js code

//实例化TouchPlugin，传入参数
var tp = new TouchPlugin({
    sliderContainer:'.slider-container',
    slider:'.slider',
    slidePin:'.slider-pin',
    sliderBar:'.slide-bar',
    pinClassName:'on',
    pin:'.pin',
    callback:function(e, dir, distance){
         console.log(dir, distance);
    }
  });
复制代码

running result

3, `base.js`the main method

init()

Initialization function

Kind: global function

refreshParam(totalMoveLen, spinIndex)

Refresh parameters

Kind: global function

Param	Type	Description
totalMoveLen	`number`	Scroll displacement
spinIndex	`number`	Carousel indicators highlight subscript

setTranslate (DOMNode, conf moveLen)

Provided the specified object movement pattern (Transform)

Kind: global function

Param	Type	Description
DOMNode	`Object`	Mobile application object style
conf	`Object`	Configuration object (animateStyle: ease-in-out
moveLen	`number`	FIG rotation movement distance (displacement of the control panel cut)

resize()

Screen size change parameters are reset

Kind: global function

autoRun(time, initStep)

Automatic carousel

Kind: global function

Param	Type	Description
time	`number`	Carousel Time
initStep	`number`	spin index and the next screen

judgeDir(curX, preX)

Mouse or touch to determine the direction of movement

Kind: global function

Param	Type	Description
curX	`number`	When the X coordinate of the mouse click or touch the screen to start
preX	`numer`	A mouse or a touch movement when moving the coordinates X

test touch event ()

The current detection device support events (mouse clicks and movement of the hand touch mobile)

Kind: global function

mouseX(event)

Abscissa get the mouse position

Kind: global function

Param	Type	Description
event	`Event`	Event Object

cancelBind(domNode)

Unbind touch or mouse clicks to move events

Kind: global function

Param	Type	Description
DOMNode	`Object`	You need to be unbind event node object

reBindTouchEvent(domNode, callback, isUnbind)

Rebinding touch event

Kind: global function

Param	Type	Description
DOMNode	`Object`	You need to be bound event node object
callback	`function`	Callback method
Isunbind	`boolean`	Whether unbind

removeClsName(nodeList, clsName)

Style class name of the node is removed

Kind: global function

Param	Type	Description
nodeList	`Array`	Style array of nodes removed
clsName	`string`	Remove the style class name

setClsName(node, clsName)

Adding Style

Kind: global function

Param	Type	Description
node	`Object`	Add the class name of the node
clsName	`string`	Style class name

bindSpinClick()

Click the carousel spin switching screen

Kind: global function

checkTargetByCls (DOMNode, clsName)

By detecting dom node contains a style name to determine whether the goal target

Kind: global function

Param	Type
DOMNode	`Object`
clsName	`string`

bindTouchEvent(domNode, callback, isUnbind)

Kind: global function

Param	Type	Description
DOMNode	`Object`	Binding proxy object events
callback	`function`	Callback method
Isunbind	`boolean`	Whether unbind

Reproduced in: https: //juejin.im/post/5cf78ae9f265da1bcc19307b