Implement left-right sliding switching of content based on jQuery and hwSlider with source code download (1) and jqueryhwslider

Implement left-right sliding switching of content based on jQuery and hwSlider with source code download (1) and jqueryhwslider

Content slide switching is widely used. common applications include slide focus charts and gallery switching. With the wide application of WEB Front-end technology, the content sliding switching effect occupies an important position on the web page. Therefore, Helloweba specially arranged a simple development tutorial for the majority of front-end fans.

The following figure shows the parameter implementation code:

Download the effect display source code

This tutorial consists of three parts:

1. Use jQuery to develop basic content slide switching effects,

2. Supports adaptive content slide switching of mobile terminals,

3. The jQuery plug-in encapsulates the sliding Switching Effect of content.

The first part of this article will be published later in the following articles.

This article describes the basic effects of content slide switching based on examples, including:

Left/right arrow Switch

Unlimited seamless Rolling

Dot button switch

Animation Effect

Automatic Switch

HTML

First, prepare the HTML structure. Use # hwslider to wrap the entire sliding area, including the slider content. Use ul li to organize the content. The slider content can be any HTML content such as images and text. # Dots refers to the dot switching navigation, which consists of multiple small dots and corresponds to the number of slide, which is generally located below the sliding area .. Arr is composed of two left and right direction 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 each component in the sliding area. Note that # hwslider needs to set position: relative and width and height. Then the slider # hwslider ul li sets position: absolute, which is only displayed by default. the active slider, which is hidden when the size is exceeded. The position: absolute must be set for the dot navigation # dots and arrow navigation. arr. The Arrow navigation is not displayed by default. It is displayed only when the mouse slides to the Slider Area. Note that # the z-index of dots and. arr is set to 2, which should be displayed on the slider. You can modify the css style to meet various 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-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}

JQuery

We use jQuery to implement various sliding switching effects. First, we introduce the jQuery library and hwslider. js provided by 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 predefine 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 ('lil'); var hwsliderSize = hwsliderLi. length; // The total number of Slider var index = 1; // The first slider var speed = 400 is initially displayed; // The Sliding speed var interval = 3000; // interval var autoPlay = false; // whether automatic sliding var clickable = true is supported; // whether the slider has been clicked for sliding animation });

The preceding variables are defined. clickable is used to restrict the click slider animation, because the slider sliding process takes time to complete. If you click the arrow continuously, if you do not limit the click, the next slide animation will be carried out when the sliding animation is not completed, which may cause the page to get stuck.

Next we will write the mobile animation function moveTo (). Take two parameters. index is the target slider to be slide. dir is the slide direction and has the following parameters: next and prev. The principle of sliding animation is that the distance from the current slider to the left or right is exactly the width of the slider. We regard this width as the visible area, the current slider removes the visible area from the left or right, And the next slider enters the visible area from the left or right. We use the animate () method of jQuery to achieve the animation effect. When the speed of the two slide remains the same, the seamless scrolling effect is achieved. In addition, when sliding is completed, the pattern of the dot switching is changed in time.

Var moveTo = function (index, dir) {if (clickable) {clickable = false; // The displacement distance from 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') ;}); // The hwsliderLi.eq(index-1).css ('left', offset + 'px ') of the next slider animation '). addClass ('active '). stop (). animate ({left: 0}, speed, function () {clickable = true ;}); dots. removeClass ('active'); dots. eq (index-1 ). addClass ('active');} else {return false ;}}

Bind the Click Event of the left and right arrows. When you click the arrow, determine whether the current slider is the first or last slider and redefine the index to achieve wireless scrolling, then call the moveTo () function 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, bind the Click Event of the dot navigation. When you click a small dot, obtain the number of the currently clicked dots, that is, the number of dots clicked is the corresponding slider, call moveTo () to complete the animation switching.

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 Switch: first, we need to define a timer. setInterval executes play () at a certain time. play () changes the index parameter every time it is executed, and moveTo is called to achieve the switching effect. Finally, when the mouse slides on the slider, the timer is cleared. When the mouse moves the slider, the timer is restarted to automatically switch.

If (autoPlay) {var timer; var play = function () {index ++; if (index> hwsliderSize) {index = 1;} moveTo (index, 'Next');} timer = setInterval (play, interval); // set the timer // pause slider when the mouse slides. hover (function () {timer = clearInterval (timer) ;}, function () {timer = setInterval (play, interval );});};

After finishing the code, you can see a basic sliding switching effect. You can also download the source code for testing.

In order to apply the sliding switching effect to the mobile end, we will introduce the adaptive screen and gesture sliding slider effect on the mobile end in the next article. Stay tuned.

The above section describes how to implement the sliding switching between left and right based on jQuery and hwSlider with the relevant knowledge of source code download (I). I hope it will be helpful to you, if you have any questions, please leave a message and the editor will reply to you in time. Thank you very much for your support for the help House website!