jQuery和内容反应可控滑动切换效果的源代码下载hwslider实现（二）

今天我们继续解释内容滑动切换的第二部分，现在我们的Web开发适用于移动设备，也就是说，我们的Web页面也可以在移动终端（如移动终端）上进行访问。因此，我加强了第一部分的基本切换效果，并增加了响应和触摸幻灯片效果。
效果显示源代码下载

这是第二部分hwslider滑效应、示范演示是基于第一部分的内容，如果你没有读单词的第一部分，请参阅：jQuery和hwslider基于下载移动内容，左右滑动切换效果的源代码（一）

响应

响应设计是什么，我不会在这里描述它。在hwslider，我们设置CSS滑块的宽度和高度，并设置百分比宽度。
# hwslider {宽度：100%；高度：汽车；最小高度：120px；保证金：40px汽车；位置：相对；溢出：隐藏；}
# hwslider UL {宽度：100%；高度：100%；位置：绝对；Z指数：1 }
# hwslider ul {显示：无；位置：绝对；左：0；最高：0；宽度：100%；高度：100%；溢出：隐藏；}
# hwslider ul。主动{显示：块；}
# hwslider UL Li img { 100% }最大宽度：
#点{位置：绝对；底：20px；左：200px；最小宽度：60px；身高：12px；Z指数：2；}
#点跨度{浮动：左；宽度：12px；身高：12px；边框1px solid # FFF；边界半径：50%；背景；}
#点跨度。主动{背景：橙红色}
。ARR {显示：无；位置：绝对；顶部：140px；Z指数：2；宽度：40px；身高：40px；线高度：40px；威；玉；玉；卫（玉）；卫（玉）；魏
。ARR：悬停{背景：RGBA（0,0,0，。7）；文字装饰：无；}
# hwslider：徘徊。ARR {显示：块；文字装饰：无；颜色：# FFF }
#沪指{左：20px }
#下右：20px } {
接下来，我们开始定义js部分中的变量。在初始化调整大小（）函数时，我们计算并定位导航点和导航箭头的位置，并在调整浏览器窗口大小时调用调整大小（）。
$（函数（）{（））
var = $（#滑块hwslider ）；
VaR点=美元（#点跨度），
沪指= $（#沪指），其次为$（#下）；
无功sliderinder = slider.children（'ul）
无功hwsliderli = sliderinder.children（李的）；
无功hwslidersize = hwsliderli.length； / /总幢数
VaR滑块宽度= 600； / /滑块的初始宽度
无功sliderheight = 320； / /初始高度滑块
var索引= 1；初始显示第一个滑块
var速度= 400； /滑动速度
var间隔= 3000； / 间隔
无功dotshow = true； / /是否显示切换导航点
无功自动播放= false； / /自动滑动支架
VaR的点击= true； / /如果你点击幻灯片中的动画幻灯片
初始化组件
var大小=函数（）{（）
无功swidth = slider.width（）；
无功dotwidth = hwslidersize * 20；
无功dotoffset =（swidth dotwidth） / 2；
无功sheight = sliderheight /滑块宽度* swidth；
Slider.css（'height '，sheight）；
$（#点）。Css（右，dotoffset + 'px '）； / /点位置导航
无功arroffset =（sheight-40） / 2；
$（。ARR）。Css（前，arroffset + 'px '）； / /箭头位置导航
}
调整大小（）；
$（窗口）。调整大小（函数（）{）
调整大小（）；
}）；
}）；
移动端触摸屏

在移动设备上，我们可以触摸屏幕并用手势滑动滑块。为了达到这个效果，你需要使用核心触摸事件。处理触摸事件可以跟踪屏幕滑动的每一个手指。

以下是四个触摸事件：

touchstart：当手指在屏幕上触发

touchmove：手指滑动屏幕上触发

Touchend：手指离开屏幕时触发

的touchcancel：系统被触发时，触摸事件被取消，这似乎是较少使用

好了，现在我们需要绑定并监听滑块上的触摸事件。当touchstart和touchend得到手指的位置分别在屏幕上滑动，我们决定滑左或右根据位移。然后，我们称之为MoveTo（）实现滑动切换。
VaR mouseX = 0，
touchstarty = 0，
touchstartx = 0；
HwsliderLi.on（{
开始/触摸
touchstart：功能（e）{
touchstarty = e.originalevent。触动{ 0 }。clienty；
touchstartx = e.originalevent。触动{ 0 }。ClientX；
}，
触摸{结束}
touchend：功能（e）{
无功touchendy = e.originalevent。changedtouches { 0 }。clienty，
touchendx = e.originalevent。changedtouches { 0 }。ClientX，
ydiff = touchstarty - touchendy，
xdiff = touchstartx - touchendx；
如果（Math.abs（xdiff）> Math.abs（ydiff））{
如果（xdiff > 5）{
如果（指数= hwslidersize）{
索引= 1；
其他{ }
索引= 1；
}
MoveTo（索引，下）；
{人}
如果（索引= 1）{
指数= hwslidersize；
其他{ }
索引= 1；
}
MoveTo（索引，'prev）；
}
}
touchstarty = null；
touchstartx = null；
}，
触摸/移动
touchmove：功能（e）{
如果（e.preventDefault）{ e.preventDefault（）；}
}
}）；
除了前一篇文章中的基本滑块js代码之外，还可以实现响应滑动内容滑动效果。
如果我们想拖滑在PC上，我们需要把鼠标，鼠标移动时，滑块的onmouseup事件。我们可以滑动滑块来实现滑动开关。主代码没有贴在这里，你可以在源代码中下载它。
在接下来的第三个部分，我将向你展示如何将现有的hwslider代码到jQuery幻灯片插件产品，并注意它。