One minute to fix Alloytouch picture carousel

One minute to fix Alloytouch picture carousel

The carousel also involves touch and touch feedback, while the Alloytouch can turn the inertia motion on or off, and set Min and Max as the motion area, exceeding the auto rebound.
In addition to the general vertical scrolling, Alloytouch can also support horizontal scrolling, or even movement of any property, because the essence of its design is the property-independent, touch can feed back to any property of motion. So Alloytouch to make a variety of carousel components is still handy.

The first carousel diagram is shown. Here's how to start the implementation process.

No. 0 Second

<div ID="Carousel-container"><DivClass="Carousel"> <DivClass="Carousel-scroller" Id="Carousel-scroller"> <ImgStyle="width:88%;" Src="Asset/ci1.jpg"> <ImgStyle="width:88%;" Src="Asset/ci2.jpg"> <ImgStyle="width:88%;" Src="Asset/ci3.jpg"> <ImgStyle="width:88%;" src= "asset/ Ci4.jpg "> <img Span class= "hljs-attr" >style= "width:88%;"  src= "asset/ci5.jpg" > </div> </div ></div>               

A total of five pictures, each picture occupies a screen ratio of 88, so the user's screen can see a little more pictures, to the user can swipe to view the feeling.

10th second

<script SRC=".. /transformjs/transform.js "></Script><ScriptSrc=".. /alloy_touch.Js"></Script><Script> var< span class= "xml" > Scroller = document. Queryselector ( "#carousel-scroller" ; transform (scroller) ; < /SCRIPT>            

By transform (scroller); Injects the CSS3 transform property.

20th second

NewAlloytouch ({Touch:"#carousel-container",The DOM of the feedback touchVertical:False,//monitor user landscape touch target: Scroller//Motion object property: Span class= "St" > "TranslateX"  //Motion properties min:0.88 * window. Innerwidth * -5 + window. innerwidthmax: 0 })               /span>                

Here is the biggest difficulty (in fact, there is nothing difficult), is the value of min. Since the initial value is 0, all sliding to the left must be negative. Can get Max must be 0.
Then the Min value is: the width of the screen-the number of pictures * The width of the picture

• The width of the picture is 0.88 * window.innerwidth
• The width of the screen is window.innerwidth
• The number of pictures is 5

30th second

As shown, the experience of the upper hand and then the correction is much better than the traditional swipe and then to trigger the scrolling. So how does it come true?
First, Alloytouch is support for step configuration.

new AlloyTouch({    step: 100， ... ... ...})

As long as the user sets the step, after the end of the exercise, Alloytouch will help the user to correct the nearest step of the integer multiple position.
For example, the above is 100:

• If the moving object stops at 120, it is corrected to 100
• If the moving object stops at 151, it is corrected to 200
• If the moving object stops at 281, it is corrected to 300
• If the moving object stops at 21, it is corrected to 0

40th second

Of course, there is a problem, such as the user slipped from 0 to 30, in fact, he would like to go 100, but will be corrected to 0!!!
So the use of light correction is not enough. An API is also required to prevent the correction itself from being injected into the logical scrolling corresponding position. So you have to support Alloytouch's:

To method

  to(v [, time, easing]) 

Where time and easing are not required. The default value for time is 600.

50th second

var items=Document.Queryselectorall ("#nav a");var scroller=Document.Queryselector ("#carousel-scroller");Transform (scroller);NewAlloytouch ({Touch:"#carousel-container",The DOM of the feedback touchVertical:False,Not required, the default is true for listening in vertical direction touchTarget: scroller,Objects of motionProperty:"TranslateX",Properties that are movingMin:Window.Innerwidth*-3,Not required, minimum value for motion propertiesMax:0,Not required, maximum value of scrolling propertyStep:Window.Innerwidth,Inertia:False,Not required, whether there is inertia. The default is TrueTouchend:function(Evt,V,Index{var step_v= Index*This.Step*-1;var dx= V-Step_v;if (V<This.Min{This.RonThis.Min;}Elseif (V>This.Max{This.RonThis.Max;}Elseif (Math.ABS (DX)<60L{This.to (STEP_V);}Elseif (dx> 0) {this.< Span class= "at" >to (Step_v + this. Step) } else {this. to (Step_v -this. Step) } return false;}, Animationend:function (evt, v) {var i = 0, len = items.length; for (; i < Len; i++) {if (i = = this.currentpage) {items[i].classlist.add ("active");} else {Items[i].classlist.remo VE ("active"); } } }}) 

Because altogether four pictures, so
Min Gets the result is window.innerwidth *-3
Max's value is still 0.
The value of step is window.innerwidth
Turn off the inertial motion by setting the Inertia:false
Note that the return false inside the touchend is to not calculate the logic of the correction position, inertia motion, etc. after the finger leaves the screen.
Touchend can get the current position V and the current position index.
Animationend is the callback after the end of the exercise to set the NAV's active. Of course not all browsers support classlist, just to demonstrate that the code is concise enough.
Again, you can get this in Touchend and Animationend, which is the Alloytouch instance of the current object. which
To method to move the current object
Step is the current step size
You can also get currentpage to get the page number that's currently in place.
You can also get the min and Max values and get the range of motion.

At last

All examples of demos and code can be found on GitHub.
Github:https://github.com/alloyteam/alloytouch
This article was reproduced from: http://www.cnblogs.com/iamzhanglei/p/6149063.html

One minute to fix Alloytouch picture carousel