Based on jquery hwSlider-content slide switching

This tutorial is divided into three parts: 1, use jquery to develop basic content sliding switch effect, 2, support mobile end touch adaptive content sliding switch effect, 3, package content sliding switch effect jquery plugin. This article explains the first part, the later two parts will be published in the following article, please pay attention to.
This article will combine the example to realize the basic effect of the content sliding switch, including:
Left-right ARROW toggle
Unlimited seamless scrolling
Dot button Toggle
Animation effects
Automatic switching
Html
First prepare HTML structure, the entire sliding area with #hwslider package, including slider content, slider using UL Li organization content, slider content can be pictures, text and other arbitrary HTML content. #dots即圆点切换导航, consisting of several small dots, corresponding to the number of sliders, generally located below the sliding area. Arr is made up of two keys.
<div id= "Hwslider" >
<ul>
<li class= "Active" ><a href= "#" ></a></li>
<li><a href= "#" ></a></li>
<li>Helloweba</li>
</ul>
<div id= "Dots" >
<span data-index= "1" class= "active" ></span>
<span data-index= "2" ></span>
<span data-index= "3" ></span>
</div>
<a href= "javascript:;" id= "prev" class= "arr" ><</a>
<a href= "javascript:;" id= "Next" class= "arr" >></a>
</div>
Css
Use CSS to complete the layout of the components of the sliding area, note that #hwslider need to set the position:relative and width and height, then the slider #hwslider ul Li set Position:absolute, The default is to display only the. Active slider, which is hidden when the size portion is exceeded. and the dot navigation #dots and arrow navigation. Arr to set the Position:absolute, the arrow navigation default does not appear, when the mouse is sliding to the slider area to display. One more note is that #dots and. Arr's z-index are set to 2, which should all be displayed on top of the slider. You can modify CSS styles to meet a variety of requirements, see the following code:
#hwslider {width:600px;height:320px;margin:40px auto; position:relative; overflow:hidden;}
#hwslider ul{width:600px; height:320px; position:absolute; z-index:1}
#hwslider ul Li{display:none;position:absolute; left:0; top:0; width:600px;height:320px; overflow:hidden;}
#hwslider ul Li.active{display:block;}
#dots {position:absolute; bottom:20px; left:270px; 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-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:cen ter;; 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}
Jquery
We use jquery to achieve the various effects of sliding switching, first of all, we introduce the jquery library and Hwslider.js provided by the Baidu Cdn.
<script src= "Http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js" ></script>
<script src= "Js/hwslider.js" ></script>
Then we predefined the variable parameters in Hwslider.js:
$ (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 index = 1; Initial display of first slider
var speed = 400; Sliding speed
var interval = 3000; Time interval
var autoplay = false; Whether to support automatic sliding
var clickable = true; Have you clicked on the slider to do the sliding animation

});
The above defines the various required variables, where clickable is used to restrict the click Slider animation because the slider slide process takes time to complete, and if you click on the arrow continuously, if you do not restrict the click, the next slide animation will be performed if the slide is not completed. This may cause the page to get stuck.
Next we'll write the move animation function MoveTo (). To accept two parameters, index is the target slider to slide, and dir is the sliding direction, with next and prev. The principle that we implement sliding animation is that the current slider moves left or right just the width of the slider, and we think of the width as the visible area, and when we slide, the current slider moves left or right out of the visual area, and the next slider enters the visual area from left or right. We use jquery's animate () method to achieve the animation effect, the two slider's motion speed speed is consistent, realizes the seamless scrolling effect. In addition, when the slide is complete, change the style of the dot switch in time.
var moveTo = function (Index,dir) {
if (clickable) {
clickable = false;

Displacement distance
var offset = slider.width ();
if (dir = = ' prev ') {
offset = -1*offset;
}

Current Slider Animation
Sliderinder.children ('. Active '). Stop (). Animate ({
Left:-offset},
Speed
function () {
$ (this). Removeclass (' active ');
});
Next Slider animation
Hwsliderli.eq (index-1). CSS (' left ', offset + ' px '). addclass (' active '). Stop (). Animate ({
left:0},
Speed
function () {
clickable = true;
});

Dots.removeclass (' active ');
Dots.eq (index-1). addclass (' active ');

}else{
return false;
}
}
The Click event that binds the left and right arrows, when the arrow is clicked, determines whether the current slider is the first slider or the last slider, and redefine index to achieve the wireless scrolling effect, and then call the MoveTo () function respectively to achieve the sliding animation effect.
Next.On (' click ', Function (event) {
Event.preventdefault ();
if (clickable) {
if (index >= hwslidersize) {
index = 1;
}else{
Index + 1;
}
MoveTo (Index, ' next ');
}
});

Prev.on (' click ', Function (event) {
Event.preventdefault ();
if (clickable) {
if (index = = 1) {
index = hwslidersize;
}else{
index-= 1;
}

MoveTo (Index, ' prev ');
}

});
Next, the Binding dot navigation Click event, when clicked Dot, get the current click of the dot serial number, that is, click on the number of dots, the corresponding first few sliders, and then call MoveTo () to complete the toggle animation.
Dots.on (' click ', Function (event) {
Event.preventdefault ();

if (clickable) {
var Dotindex = $ (this). Data (' index ');
if (Dotindex > Index) {
dir = ' Next ';
}else{
dir = ' prev ';
}
if (Dotindex!= index) {
index = Dotindex;
MoveTo (index, dir);
}
}
});
Automatic switching, first of all we want to define a timer, every time setinterval execution play () in every execution will change the index parameter, call moveto implementation switch effect. Finally when the mouse slides on the slider to clear the timer timer, the mouse move the slider and restart the timer automatically switch.
if (AutoPlay) {
var timer;
var play = function () {
index++;
if (Index > Hwslidersize) {
index = 1;
}
MoveTo (Index, ' next ');
}
Timer = setinterval (play, interval); Set timer

Pause while the mouse is sliding
Slider.hover (function () {
Timer = clearinterval (timer);
}, function () {
Timer = setinterval (play, interval);
});
};
Finally, after finishing the code, you will be able to see a basic sliding switch effect, you can also download the source test.
In order to allow our sliding switch effect to apply to the mobile end, we will specifically introduce the mobile end of the adaptive screen and gesture slider effect, please pay attention.