内容滑动切换应用非常广，常见的有幻灯片焦点图、画廊切换等。随着WEB前端技术的广泛应用，内容滑动切换效果占据着web页面重要地位，因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程。
先给大家展示下效果图，感觉还不错请参数实现代码，具体效果如下所示：
本次教程分三个部分：
1、使用jQuery开发基本的内容滑动切换效果，
2、支持移动端触控自适应的内容滑动切换效果，
3、封装内容滑动切换效果jQuery插件。
本文讲解第一部分，后面两部分会在接下来的文章中陆续发布，敬请关注。
本文将结合实例实现内容滑动切换的基本效果，包括：
左右箭头切换
无限无缝滚动
圆点按钮切换
动画效果
自动切换
HTML
首先准备HTML结构，整个滑动区域用#hwslider包裹，包括滑块内容，滑块使用ul li组织内容，滑块内容可以是图片、文字等任意HTML内容。#dots即圆点切换导航，由多个小圆点组成，对应滑块数量，一般位于滑动区域的下方。.arr则是由两个左右方向键组成。
<div> <ul> <li><a href="#"><img src="https://www.jb51.net/images/s1.jpg" alt="1"></a></li> <li><a href="#"><img src="https://www.jb51.net/images/s2.jpg" alt="2"></a></li> <li>Helloweba</li> </ul> <div> <span data-index="1"></span> <span data-index="2"></span> <span data-index="3"></span> </div> <a href="javascript:;"><</a> <a href="javascript:;">></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="https://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://www.jb51.net/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保持一致，就实现了无缝滚动的效果。另外当滑动完成时，及时变换圆点切换的样式。