Implementation of content-left sliding switching effect based on jquery and hwslider download source (i) _jquery

The content sliding switch application is very wide, common has the slide focus diagram, the gallery switch and so on. With the wide application of Web front-end technology, the content sliding switch effect occupies the important position of the Web page, so the Helloweba of this station specially arranges the simple and understandable content sliding switch effect Development course for the general front end enthusiasts.

First to show you the effect of the picture, feeling good please parameter implementation code, the specific effect as follows:

Effect Display source Download

This tutorial is divided into three sections:

1, use jquery to develop the basic content sliding switch effect,

2, support the mobile end touch adaptive content sliding switch effect,

3, package content sliding switch effect jquery plug-ins.

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; heigh t: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}

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 first slider 
var speed = 400;//sliding speed 
var interval = 3000;//time interval 
var autoplay = False Whether to support automatic sliding 
var clickable = true;//Whether the slider has been clicked to make a 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; 
} 
The 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 
//mouse pause 
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.

The above is a small set to introduce the introduction of jquery and Hwslider based on the implementation of the content of the sliding switch effect of the source download (a) related knowledge, I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!