注册登录

hwSlider-内容滑动切换效果（一）

内容滑动切换应用非常广，常见的有幻灯片焦点图、画廊切换等。随着WEB前端技术的广泛应用，内容滑动切换效果占据着web页面重要地位，因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程。

hwSlider-内容滑动切换效果（一）

查看演示 下载源码

本次教程分三个部分：1、使用jQuery开发基本的内容滑动切换效果，2、支持移动端触控自适应的内容滑动切换效果，3、封装内容滑动切换效果jQuery插件。本文讲解第一部分，后面两部分会在接下来的文章中陆续发布，敬请关注。

本文将结合实例实现内容滑动切换的基本效果，包括：

  • 左右箭头切换
  • 无限无缝滚动
  • 圆点按钮切换
  • 动画效果
  • 自动切换

HTML

首先准备HTML结构，整个滑动区域用#hwslider包裹，包括滑块内容，滑块使用ul li组织内容，滑块内容可以是图片、文字等任意HTML内容。#dots即圆点切换导航，由多个小圆点组成，对应滑块数量，一般位于滑动区域的下方。.arr则是由两个左右方向键组成。

<div id="hwslider">
	<ul>
		<li class="active"><a href="https://zhishitu.com"><img src="/images/s1.jpg" alt="1"></a></li>
		<li><a href="https://zhishitu.com"><img src="/images/s2.jpg" alt="2"></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="https://zhishitu.com" id="prev" class="arr"><</a>
	<a href="https://zhishitu.com" id="next" class="arr">></a>
</div>
知识兔

CSS

使用CSS完成滑动区域各组件的布局，注意其中#hwslider需要设置position: relative以及宽度和高度，那么滑块#hwslider ul li设置position:absolute，默认只显示.active的滑块，超出尺寸部分将被隐藏。而圆点导航#dots和箭头导航.arr都要设置position: absolute，箭头导航默认不显示，当鼠标滑向滑块区域时才显示。再一个要注意的是#dots和.arr的z-index设置成2，即都应该显示在滑块上面。您可以修改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

我们使用jQuery来实现滑动切换的各种效果，首先我们引入百度CDN提供的jQuery库和hwslider.js。

<script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="/js/hwslider.js"></script>
知识兔

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

});
知识兔

以上定义了各种需要的变量，其中clickable用于限制点击滑块动画，因为滑块滑动过程需要时间完成，如果连续点击箭头的话，正常情况如果不限制点击，则会在滑动动画未完成的情况下又进行下一个滑动动画，这样可能会导致页面卡住的情况。

接下来我们来写移动动画函数moveTo()。接受两个参数，index即要滑动的目标滑块，dir是滑动方向，有next和prev。我们实现滑动动画的原理是，当前滑块向左或向右移动的距离刚好是滑块的宽度，我们把这个宽度看作可视区，滑动时，当前滑块会向左或向右移出可视区，而紧接着下一个滑块从左或从右侧进入可视区。我们使用jQuery的animate()方法实现动画效果，两个滑块的运动速度speed保持一致，就实现了无缝滚动的效果。另外当滑动完成时，及时变换圆点切换的样式。

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;
		}
	}
知识兔

绑定左右箭头的点击事件，当点击箭头时，判断当前滑块是否是第一个滑块或最后一个滑块，并重新定义index，从而实现无线滚动效果，然后分别调用moveTo()函数，实现滑动动画效果。

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');
		}
		
	});
知识兔

接着，绑定圆点导航的点击事件，当点击小圆点时，获取当前点击的圆点序号，即点击的是第几个圆点，就对应的第几个滑块，然后调用moveTo()完成切换动画。

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);
			}
		}
	});
知识兔

自动切换，首先我们要定义一个定时器，每隔一定的时间setInterval执行play()，play()每执行一次就会变化index参数，调用moveTo实现切换效果。最后当鼠标滑上滑块时清除定时器timer，鼠标移开滑块时又重新启动定时器自动切换。

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);
		});
	};
知识兔

最后将代码整理后，你将可以看到一个基本的滑动切换效果，你也可以下载源码测试。

为了让我们的滑动切换效果应用到移动端，我们在下一篇文章中会具体介绍移动端的自适应屏幕以及手势滑动滑块效果，敬请关注。

计算机