基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)


Posted in Javascript onJune 22, 2016

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

先给大家展示下效果图,感觉还不错请参数实现代码,具体效果如下所示:

基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)

效果展示      源码下载

本次教程分三个部分:

1、使用jQuery开发基本的内容滑动切换效果,

2、支持移动端触控自适应的内容滑动切换效果,

3、封装内容滑动切换效果jQuery插件。

本文讲解第一部分,后面两部分会在接下来的文章中陆续发布,敬请关注。

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

左右箭头切换

无限无缝滚动

圆点按钮切换

动画效果

自动切换

HTML

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

<div 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> 
<div id="dots"> 
<span data-index="1" class="active"></span> 
<span data-index="2"></span> 
<span data-index="3"></span> 
</div> 
<a href="javascript:;" id="prev" class="arr"><</a> 
<a href="javascript:;" 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); 
}); 
};

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

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

以上所述是小编给大家介绍的基于jQuery和hwSlider实现内容左右滑动切换效果附源码下载(一)的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
extjs中form与grid交互数据(record)的方法
Aug 29 Javascript
js获取IFRAME当前的URL的方法
Nov 13 Javascript
JS如何判断移动端访问设备并解析对应CSS
Nov 27 Javascript
验证控件与Button的OnClientClick事件详细解析
Dec 04 Javascript
Extjs Label的 fieldLabel和html属性值对齐的方法
Jun 15 Javascript
JavaScript实现页面跳转的几种常用方式
Nov 28 Javascript
一道常被人轻视的web前端常见面试题(JS)
Feb 15 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
Feb 08 Javascript
解决vue中post方式提交数据后台无法接收的问题
Aug 11 Javascript
移动端图片上传旋转、压缩问题的方法
Oct 16 Javascript
js计算两个时间差 天 时 分 秒 毫秒的代码
May 21 Javascript
uni-app微信小程序登录授权的实现
May 22 Javascript
浅析jQuery Ajax通用js封装
Jun 22 #Javascript
Javascript如何判断数据类型和数组类型
Jun 22 #Javascript
最全的Javascript编码规范(推荐)
Jun 22 #Javascript
Javascript将数值转换为金额格式(分隔千分位和自动增加小数点)
Jun 22 #Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 #Javascript
jQuery soColorPacker 网页拾色器
Jun 22 #Javascript
DIV+CSS+jQ实现省市联动可扩展
Jun 22 #Javascript
You might like
下载文件的点击数回填
2006/10/09 PHP
php array_search() 函数使用
2010/04/13 PHP
PHP 验证码不显示只有一个小红叉的解决方法
2013/09/30 PHP
thinkphp视图模型查询提示ERR: 1146:Table 'db.pr_order_view' doesn't exist的解决方法
2014/10/30 PHP
thinkphp实现附件上传功能
2017/05/26 PHP
制作高质量的JQuery Plugin 插件的方法
2010/04/20 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
javascript实现动态标签云
2015/10/16 Javascript
jQuery设置Cookie及删除Cookie实例分析
2016/04/15 Javascript
js判断价格,必须为数字且不能为负数的实现方法
2016/10/07 Javascript
easyui取消表单实时验证,提交时统一验证的简单实例
2016/11/07 Javascript
React-Native之定时器Timer的实现代码
2017/10/04 Javascript
理解JavaScript中的对象
2020/08/25 Javascript
vue单元格多列合并的实现
2020/11/26 Vue.js
npm全局环境变量配置详解
2020/12/15 Javascript
[17:00]DOTA2 HEROS教学视频教你分分钟做大人-帕克
2014/06/10 DOTA
python中requests库session对象的妙用详解
2017/10/30 Python
windows下python 3.6.4安装配置图文教程
2018/08/21 Python
python爬取微信公众号文章的方法
2019/02/26 Python
python实现桌面托盘气泡提示
2019/07/29 Python
centos+nginx+uwsgi+Django实现IP+port访问服务器
2019/11/15 Python
使用python 对验证码图片进行降噪处理
2019/12/18 Python
Tensorflow中的dropout的使用方法
2020/03/13 Python
使用Pycharm分段执行代码
2020/04/15 Python
Python绘制组合图的示例
2020/09/18 Python
CSS3制作ajax loader icon实现思路及代码
2013/08/25 HTML / CSS
Static Nested Class 和 Inner Class的不同
2013/11/28 面试题
2014植树节活动总结
2014/03/11 职场文书
房屋租赁协议书
2014/04/10 职场文书
小学生三分钟演讲稿
2014/08/18 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
Django cookie和session的应用场景及如何使用
2021/04/29 Python
微前端qiankun改造日渐庞大的项目教程
2022/06/21 Javascript