基于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 相关文章推荐
JXTree对象,读取外部xml文件数据,生成树的函数
Apr 02 Javascript
将字符串转换成gb2312或者utf-8编码的参数(js版)
Apr 10 Javascript
酷炫jQuery全屏3D焦点图动画效果
Mar 22 Javascript
详解JavaScript节流函数中的Throttle
Jul 16 Javascript
Javascript 实现简单计算器实例代码
Oct 23 Javascript
vuex实现简易计数器
Oct 27 Javascript
浅析js的模块化编写 require.js
Dec 07 Javascript
Vue非父子组件通信详解
Jun 12 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
Apr 28 Javascript
Bootstrap Fileinput 4.4.7文件上传实例详解
Jul 25 Javascript
微信小程序 授权登录详解(附完整源码)
Aug 23 Javascript
JS如何生成随机验证码
Mar 02 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
用php+javascript实现二级级联菜单的制作
2008/05/06 PHP
windows7下安装php的imagick和imagemagick扩展教程
2014/07/04 PHP
php插件Xajax使用方法详解
2017/08/31 PHP
HTTP状态代码以及定义(解释)
2007/02/02 Javascript
jquery blockUI 遮罩不能消失与不能提交的解决方法
2011/09/17 Javascript
js二维数组排序的简单示例代码
2014/01/24 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
JS长整型精度问题实例分析
2015/01/13 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
javascript中for/in循环及使用技巧
2015/09/01 Javascript
JavaScript中的prototype原型学习指南
2016/05/09 Javascript
微信JS接口大全
2016/08/25 Javascript
js Canvas绘制圆形时钟效果
2017/02/17 Javascript
addEventListener()与removeEventListener()解析
2017/04/20 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
bootstrap3使用bootstrap datetimepicker日期插件
2017/05/24 Javascript
vue-cli中打包图片路径错误的解决方法
2017/10/26 Javascript
Vue2.5学习笔记之如何在项目中使用和配置Vue
2018/09/26 Javascript
Layui数据表格判断编辑输入的值,是否为我需要的类型详解
2019/10/26 Javascript
python和shell获取文本内容的方法
2018/06/05 Python
Python 20行简单实现有道在线翻译的详解
2019/05/15 Python
Django model 中设置联合约束和联合索引的方法
2019/08/06 Python
python中利用numpy.array()实现俩个数值列表的对应相加方法
2019/08/26 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
python同义词替换的实现(jieba分词)
2020/01/21 Python
如何解决pycharm调试报错的问题
2020/08/06 Python
英国著名的药妆网站:Escentual
2016/07/29 全球购物
迪士尼英国官方商店:shopDisney UK
2019/09/21 全球购物
StringBuilder和String的区别
2015/05/18 面试题
酒店管理毕业生自荐信
2013/10/24 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
社区道德讲堂实施方案
2014/03/21 职场文书
yy司仪主持词
2014/03/22 职场文书
党的群众路线学习材料
2014/05/16 职场文书
2014年保卫工作总结
2014/12/05 职场文书
《海上日出》教学反思
2016/02/23 职场文书