Foxslider.js is not a library of libraries

1, a brief introduction

Used to a variety of components, and there is no real sense of encapsulation can drag and cut the screen of the wheel map, after some writing, found that writing such a wheel map to write well, is really very difficult, different devices of different event completeness? Control of event trigger timing? How to better encapsulate? Event resets after adaptive Windows? And so on… Swiper, the source of the swiper library, shows that small things can be difficult. This basic requirement can be met by dragging or clicking.

Github Portal (Want you to finish together (wan) good (Shua)!! Fork & Star ^_^ _^ you will be beautiful

Transfer can not be copied links: github.com/forrestyuan…

Native lu code for a while, has been a native straight

1.1, features,

  • For mobile phones, tablets, PC and other terminals.

1.2 and disadvantages

  • The package is simple and the function needs to be expanded
  • Semantic is not strong enough
  • The user configuration capability is weak

2. Invoke instance

HTML structure code

<! -- Import js file -->
<script src="js/base.js"></script>
<! -- Main DOM structure -->
<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>
Copy the code

Js code

// Instantiate TouchPlugin and pass in the argument
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); }});Copy the code

Running effect

3,base.jsInternal main method

init()

Initialization function

Kind: global function

refreshParam(totalMoveLen, spinIndex)

The refresh parameters

Kind: global function

Param Type Description
totalMoveLen number The rolling displacement
spinIndex number Highlight subscript of rotation indicator

setTranslate(domNode, conf, moveLen)

Set the specified object movement style (transform)

Kind: global function

Param Type Description
domNode Object Apply the movement style to an object
conf Object The configuration object (animateStyle: ease-in-out)
moveLen number Rotation chart moving distance (screen cutting through control displacement)

resize()

Change screen size to reset parameters

Kind: global function

autoRun(time, initStep)

Automatically round

Kind: global function

Param Type Description
time number By time
initStep number Spin subscript and next screen

judgeDir(curX, preX)

Determine the direction of mouse or touch movement

Kind: global function

Param Type Description
curX number Coordinates X when the mouse clicks or begins to touch the screen
preX numer The coordinate X of mouse movement or touch movement

testTouchEvent()

Detect events supported by the current device (mouse click movement and hand touch movement)

Kind: global function

mouseX(event)

Gets the horizontal position of the mouse

Kind: global function

Param Type Description
event Event The event object

cancelBind(domNode)

Unbind the touch or mouse click movement event

Kind: global function

Param Type Description
domNode Object The event node object needs to be unbound

reBindTouchEvent(domNode, callback, isUnbind)

Rebind the touch event

Kind: global function

Param Type Description
domNode Object The event node object needs to be bound
callback function The callback method
isUnbind boolean Unbind or not

removeClsName(nodeList, clsName)

Removes the node’s style class name

Kind: global function

Param Type Description
nodeList Array Array of nodes with the removed style
clsName string The name of the removed style class

setClsName(node, clsName)

Add the style

Kind: global function

Param Type Description
node Object Adds a node with a class name
clsName string The style name of the class

bindSpinClick()

Click spin to switch the screen

Kind: global function

checkTargetByCls(domNode, clsName)

The target is determined by detecting whether the DOM node contains a style name

Kind: global function

Param Type
domNode Object
clsName string

bindTouchEvent(domNode, callback, isUnbind)

Kind: global function

Param Type Description
domNode Object A proxy object for binding events
callback function The callback method
isUnbind boolean Unbind or not