jquery and Hwslider implement content-responsive touch-slip Switching effect download source (ii) _jquery

Today we continue to explain the second part of the content sliding switch effect. Now our web development has to adapt to mobile devices, that is, our web pages in mobile devices such as mobile phone can also be normal access, so I will be the first part of the basic switching effect to strengthen, increase the response and touch sliding effect.

Effect Display source Download

This article is the second part of the hwslider-content sliding switch effect, demo demo is based on the first part of the content, so, if you have not read the first part of the words, please go to see: Based on jquery and hwslider to achieve content sliding switch effect of the source download (i)

Response type

What is the response design, I don't describe it here. In Hwslider, we set the width and height of the slider by CSS, and set the width of the percentage.

#hwslider {width:100%;height:auto;min-height:120px;margin:40px auto; position:relative; overflow:hidden;} #hwslider ul{width:100%; height:100% position:absolute; z-index:1} #hwslider ul Li{display:none;position:absolute; le ft:0; top:0; width:100%;height:100%; 
Overflow:hidden;} 
#hwslider ul Li.active{display:block;} #hwslider ul Li img{max-width:100%} #dots {position:absolute; bottom:20px; left:200px; min-width:60px; height:12px; z-i 
Ndex:2;} #dots span{float:left; width:12px;height:12px; border:1px solid #fff; border-radius:50%; background: #333; margin-righ t:8px; 
Cursor:pointer;} #dots span.active{background:orangered} arr{display:none;position:absolute; top:140px; z-index:2;width:40px; height:40px; line-height:38px; Text-align:center;; font-size:36px; Background:rgba (0,0,0,.3); Color: #fff; 
Text-decoration:none}. Arr:hover{background:rgba (0,0,0,.7); text-decoration:none;} #hwslider: hover. Arr{display:block text-decoration:none;color: #fff} 
#prev {left:20px} #next {right:20px}  

Next, we define the variables at the beginning of the JS section, in the initialization resize () function, we calculate and locate the position of the navigation dot and the navigation arrows, and call resize () when the browser window resizes.

 $ (function () {var slider = $ ("#hwslider"); 
var dots = $ ("#dots span"), Prev = $ ("#prev"), Next = $ ("#next"); 
var sliderinder = Slider.children (' ul ') var Hwsliderli = sliderinder.children (' li '); var hwslidersize = hwsliderli.length; Total number of sliders var sliderwidth = 600; Slider initial width var sliderheight = 320; Slider initial height var index = 1; Initial display first slider var speed = 400; Sliding speed var interval = 3000; Interval time var dotshow = true; Whether to display a switchable navigation dot var autoplay = false; Whether to support automatic sliding var clickable = true; 
Have you clicked on the slider to do the sliding animation//initialization component var resize = function () {var swidth = Slider.width (); 
var dotwidth = hwslidersize*20; 
var dotoffset = (swidth-dotwidth)/2; 
var sheight = sliderheight/sliderwidth*swidth; 
Slider.css (' height ', sheight); $ ("#dots"). CSS (' left ', dotoffset+ ' px '); 
Nav dot position var arroffset = (sHeight-40)/2; $ (". Arr"). CSS (' top ', arroffset+ ' px '); 
Navigation arrow Position} resize (); 
$ (window). Resize (function () {resize (); 
}); }); 

Moving End touch Screen slide

On a mobile device, we can touch the screen and use gestures to slide to toggle the slider. To achieve this effect, you need to use the core touch events. Handling Touch events can track every finger that slides on the screen.

Here are four kinds of touch events:

Touchstart: Triggers when the finger is placed on the screen
Touchmove: Finger on the screen to trigger the slide
Touchend: Trigger when the finger leaves the screen
Touchcancel: When the system cancels the touch event trigger, this seems to be less used

OK, now we need to tie the slider on to the touch event, get the finger position on the screen slider on the Touchstart and Touchend, and then slide to the left or right according to the displacement, then call MoveTo () to make a sliding switch.

var mousex = 0, 
touchstarty = 0, 
touchstartx = 0; 
Hwsliderli.on ({ 
//Touch start 
' Touchstart ': function (e) { 
touchstarty = E.originalevent.touches[0].clienty; 
Touchstartx = E.originalevent.touches[0].clientx; 
}, 
//Touch End 
' touchend ': function (e) { 
var Touchendy = E.originalevent.changedtouches[0].clienty, 
touchendx = E.originalevent.changedtouches[0].clientx, 
Ydiff = Touchstarty-touchendy, 
xdiff = touchstartx-touchendx; 
if (Math.Abs (Xdiff) > Math.Abs (Ydiff)) { 
if (Xdiff > 5) { 
if (index >= hwslidersize) { 
index = 1; 
} else{ 
index + 1; 
} 
MoveTo (Index, ' next '); 
else { 
if (index = = 1) { 
index = hwslidersize; 
} else{ 
Index-= 1; 
} 
MoveTo (Index, ' prev '); 
} 
Touchstarty = null; 
Touchstartx = null; 
}, 
//Touch mobile 
' touchmove ': function (e) { 
if (e.preventdefault) {E.preventdefault (); } 
} 

Plus the basic slider JS code in the previous article can realize a responsive sliding content slide effect.

If you want to implement drag sliding on the PC, you need to bind the slider onmousedown,onmousemove and onmouseup events, the mouse hold and drag the slider to achieve sliding switch, the main code here will not be posted, you can download the source code to view.

Next in the third part, I'll show you how to encapsulate the existing Hwslider code into a jquery sliding plug-in product, so stay tuned.