JQuery and hwSlider implement content responsive touch slide switching effect with source code download (2), jqueryhwslider

JQuery and hwSlider implement content responsive touch slide switching effect with source code download (2), jqueryhwslider

Today, we will continue to explain the second part of the content sliding switching effect. Today, our web development needs to adapt to mobile devices. That is to say, our web pages can be normally accessed on mobile devices, such as mobile phones. Therefore, I have enhanced the basic switching effect of the first part, added responsive and touch sliding effects.

Download the effect display source code

This article is the second part of the hwSlider-content slide switching effect. The DEMO is based on the first part of the content. Therefore, if you have not read the first part, see: implementation of left-right sliding switching of content based on jQuery and hwSlider with source code download (1)

Responsive

What is responsive design? I will not describe it here. In hwSlider, we use CSS to set the width and height of the slider 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; left: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-index: 2;} #dots span{float: left; width:12px;height: 12px; border: 1px solid #fff; border-radius: 50%; background: #333; margin-right: 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 start to define some variables in the js section. In the initialization of the resize () function, we calculate and locate the positions of navigation dots and navigation arrows, in addition, resize () is also called when the browser window size is adjusted ().

$ (Function () {var slider =$ ("# hwslider"); var dots =$ ("# dots span"), prev = $ ("# prev "), next = $ ("# next"); var sliderInder = slider. children ('ul ') var hwsliderLi = sliderInder. children ('lil'); var hwsliderSize = hwsliderLi. length; // The total number of Slider var sliderWidth = 600; // The initial width of the slider var sliderHeight = 320; // The initial height of the slider var index = 1; // display the first slider var speed = 400; // Sliding speed var interval = 3000; // interval var dotShow = true; // whether to display the switchable navigation bullets var autoPlay = false; // whether automatic sliding var clickable = true is supported; // whether the slider has been clicked in the slide animation // initialize the 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 '); // navigation dot position var arrOffset = (sHeight-40)/2; $ (". arr "detail .css ('top', arrOffset + 'px '); // navigation arrow position} resize (); $ (window ). resize (function () {resize ();});});

Mobile Terminal touch screen sliding

On a mobile device, we can tap the screen and use a gesture to slide to switch the slider. To achieve this effect, you need to use the core touch event. Processing touch events can track every finger that slides on the screen.

There are four touch events:

Touchstart: triggered when the finger is placed on the screen
Touchmove: triggered by sliding fingers on the screen
Touchend: triggered when the finger leaves the screen
Touchcancel: triggered when the system cancels the touch event. This seems to be less useful.

Well, now we need to bind the slider to listen for touch events. When touchstart and touchend are used to obtain the position of the finger on the screen slider respectively, and then determine whether it is left or right based on the shift, then, call moveTo () to implement sliding switching.

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 Move 'touchmove ': function (e) {if (e. preventDefault) {e. preventDefault ();}}});

In addition, the basic slider js code in the previous article can achieve a responsive and touch-able sliding effect.

If you want to implement drag and slide on the PC, you need to bind the onmousedown, onmousemove, and onmouseup events of the slider to achieve sliding switching by holding the mouse and dragging the slider. The main code will not be pasted here, you can download the source code to view it.

The third part will show you how to encapsulate the existing hwSlider code into a jQuery slide plug-in.