查看演示 下载源码
本次教程分三个部分：1、使用jQuery开发基本的内容滑动切换效果，2、支持移动端触控自适应的内容滑动切换效果，3、封装内容滑动切换效果jQuery插件。本文讲解第一部分，后面两部分会在接下来的文章中陆续发布，敬请关注。
本文将结合实例实现内容滑动切换的基本效果，包括：
左右箭头切换
无限无缝滚动
圆点按钮切换
动画效果
自动切换
HTML
首先准备HTML结构，整个滑动区域用#hwslider包裹，包括滑块内容，滑块使用ul li组织内容，滑块内容可以是图片、文字等任意HTML内容。#dots即圆点切换导航，由多个小圆点组成，对应滑块数量，一般位于滑动区域的下方。.arr则是由两个左右方向键组成。
[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
使用CSS完成滑动区域各组件的布局，注意其中#hwslider需要设置position: relative以及宽度和高度，那么滑块#hwslider ul li设置position:absolute，默认只显示.active的滑块，超出尺寸部分将被隐藏。而圆点导航#dots和箭头导航.arr都要设置position: absolute，箭头导航默认不显示，当鼠标滑向滑块区域时才显示。再一个要注意的是#dots和.arr的z-index设置成2，即都应该显示在滑块上面。您可以修改css样式以满足各种需求，请看以下代码：
[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
我们使用jQuery来实现滑动切换的各种效果，首先我们引入百度CDN提供的jQuery库和hwslider.js。
[code=html] <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/hwslider.js"></script>
接着我们在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; //是否已经点击了滑块在做滑动动画
});以上定义了各种需要的变量，其中clickable用于限制点击滑块动画，因为滑块滑动过程需要时间完成，如果连续点击箭头的话，正常情况如果不限制点击，则会在滑动动画未完成的情况下又进行下一个滑动动画，这样可能会导致页面卡住的情况。
接下来我们来写移动动画函数moveTo()。接受两个参数，index即要滑动的目标滑块，dir是滑动方向，有next和prev。我们实现滑动动画的原理是，当前滑块向左或向右移动的距离刚好是滑块的宽度，我们把这个宽度看作可视区，滑动时，当前滑块会向左或向右移出可视区，而紧接着下一个滑块从左或从右侧进入可视区。我们使用jQuery的animate()方法实现动画效果，两个滑块的运动速度speed保持一致，就实现了无缝滚动的效果。另外当滑动完成时，及时变换圆点切换的样式。
[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;
}
}绑定左右箭头的点击事件，当点击箭头时，判断当前滑块是否是第一个滑块或最后一个滑块，并重新定义index，从而实现无线滚动效果，然后分别调用moveTo()函数，实现滑动动画效果。
[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');
}
});接着，绑定圆点导航的点击事件，当点击小圆点时，获取当前点击的圆点序号，即点击的是第几个圆点，就对应的第几个滑块，然后调用moveTo()完成切换动画。
[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);
}
}
});
自动切换，首先我们要定义一个定时器，每隔一定的时间setInterval执行play()，play()每执行一次就会变化index参数，调用moveTo实现切换效果。最后当鼠标滑上滑块时清除定时器timer，鼠标移开滑块时又重新启动定时器自动切换。
[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);
});
};
最后将代码整理后，你将可以看到一个基本的滑动切换效果，你也可以下载源码测试。
以上就是hwSlider-内容滑动切换效果（一） 的内容，更多相关内容请关注微课江湖（）！
相关文章：
实例帮助你了解HTML5滑动区域选择元素Slider element
hwSlider-内容滑动切换效果（二）：响应式可触控滑动
微信小程序 slider组件详细介绍