hwSlider-content sliding switching effect (1)

Content sliding switching has a wide range of applications. Common ones include slide focus pictures, gallery switching, etc. With the widespread application of WEB front-end technology, the content sliding switching effect occupies an important position in web pages. Therefore, Helloweba on this website has specially arranged an easy-to-understand development tutorial for the content sliding switching effect for the majority of front-end enthusiasts.



View demo download source code


This tutorial is divided into three parts: 1. Use jQuery to develop basic content sliding switching effects, 2. Supports mobile touch-adaptive content sliding switching effect. 3. Encapsulates the jQuery plug-in for content sliding switching effect. This article explains the first part, and the next two parts will be released in subsequent articles, so stay tuned.

This article will combine examples to achieve the basic effects of content sliding switching, including:

Left and right arrow switching

Infinite seamless scrolling

Dot button switching

Animation effect

Automatic switching

HTML

First prepare the HTML structure, and wrap the entire sliding area with #hwslider, including the slider Content, the slider uses ul li to organize the content. The slider content can be any HTML content such as pictures, text, etc. #dots is the dot switching navigation, which is composed of multiple small dots, corresponding to the number of sliders, and is generally located below the sliding area. .arr is composed of two left and right direction keys.

[code=html]
<p id="hwslider">
	<ul>
		<li class="active"><a href="#"><img src="images/s1.jpg" alt="1"></a></li>
		<li><a href="#"><img src="images/s2.jpg" alt="2"></a></li>
		<li>Helloweba</li>
	</ul>
	<p id="dots">
		<span data-index="1" class="active"></span>
		<span data-index="2"></span>
		<span data-index="3"></span>
	</p>
	<a href="javascript:;" id="prev" class="arr"><</a>
	<a href="javascript:;" id="next" class="arr">></a>
</p>

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, by default only the .active slider will be displayed, and the part that exceeds the size will be hidden. Both dot navigation #dots and arrow navigation .arr must set position: absolute. Arrow navigation is not displayed by default and is only displayed when the mouse slides to the slider area. Another thing to note is that the z-index of #dots and .arr is set to 2, that is, they should both be displayed on the slider. You can modify the css style to meet various needs, please see the following code:

[code=css]
#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 achieve various effects of sliding switching. First we Introduce the jQuery library and hwslider.js provided by Baidu CDN.

[code=html]
<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="js/hwslider.js"></script>

Then we pre-define variable parameters in hwslider.js:

[code=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;  //滑块的总个数
	var index = 1; //初始显示第一个滑块
	var speed = 400; //滑动速度
	var interval = 3000; //间隔时间
	var autoPlay = false; //是否支持自动滑动
	var clickable = true; //是否已经点击了滑块在做滑动动画

});

The above defines various required variables, Among them, clickable is used to limit the click of the slider animation, because the slider sliding process takes time to complete. If the arrow is clicked continuously, if the click is not restricted under normal circumstances, the next sliding animation will be performed when the sliding animation is not completed, so This may cause the page to get stuck.
Next let’s write the move animation function moveTo(). Accepts two parameters, index is the target slider to be slid, dir is the sliding direction, including next and prev. The principle we use to implement sliding animation is that the distance the current slider moves to the left or right is exactly the width of the slider. We regard this width as the visible area. When sliding, the current slider will move left or right out of the visible area. viewport, and the next slider enters the viewport from the left or from the right. We use jQuery's animate() method to achieve animation effects. The movement speed of the two sliders remains consistent, achieving a seamless scrolling effect. In addition, when the sliding is completed, the dot switching style is changed in time.

[code=js]
	var moveTo = function(index,dir){ 
		if(clickable){
			clickable = false;

			//位移距离
			var offset = slider.width();
			if(dir == 'prev'){
				offset = -1*offset;
			}

			//当前滑块动画
			sliderInder.children('.active').stop().animate({
				left: -offset},
				speed,
				 function() {
				 	$(this).removeClass('active');
			});
			//下一个滑块动画
			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;
		}
	}

Bind the click event of the left and right arrows. When the arrow is clicked, determine whether the current slider is the first slider or the last slider, and redefine the index to achieve a wireless scrolling effect. , and then call the moveTo() function respectively to achieve the sliding animation effect.

[code=js]
	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 the small dot is clicked, the currently clicked dot serial number is obtained, that is, which dot is clicked, the corresponding dot number is A few sliders, and then call moveTo() to complete the switching animation.

[code=js]
	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 we need to define a timer, setInterval executes play() every certain time, play() will change the index parameter every time it is executed, and call moveTo to achieve it. Switch effect. Finally, when the mouse slides up the slider, the timer is cleared, and when the mouse moves away from the slider, the timer is automatically switched again.

[code=js]
	if(autoPlay){
		var timer;
		var play = function(){
			index++;
			if(index > hwsliderSize){
				index = 1;
			}
			moveTo(index, 'next');
		}
		timer = setInterval(play, interval); //设置定时器

		//鼠标滑上时暂停
		slider.hover(function() {
			timer = clearInterval(timer);
		}, function() {
			timer = setInterval(play, interval);
		});
	};

Finally, after sorting out the code, you will be able to see a basic sliding switching effect, and you can also download the source code to test.

The above is the content of hwSlider-content sliding switching effect (1). For more related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!

Related articles:

Examples help you understand the HTML5 sliding area selection element Slider element

hwSlider-Content sliding switching effect (2): responsive touchable sliding

Detailed introduction to the WeChat applet slider component