基于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 相关文章推荐
javascript开发技术大全 第4章 直接量与字符集
Jul 03 Javascript
js有关元素内容操作小结
Dec 20 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
早该知道的7个JavaScript技巧
Jun 21 Javascript
javascript鼠标滑过显示二级菜单特效
Nov 18 Javascript
javascript设置文本框光标的方法实例小结
Nov 04 Javascript
VUE重点问题总结
Mar 19 Javascript
axios使用拦截器统一处理所有的http请求的方法
Nov 02 Javascript
JS把字符串格式的时间转换成几秒前、几分钟前、几小时前、几天前等格式
Jul 10 Javascript
vue+element导航栏高亮显示的解决方式
Nov 12 Javascript
Flexible.js可伸缩布局实现方法详解
Nov 13 Javascript
vue如何使用模拟的json数据查看效果
Mar 31 Vue.js
浅析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
Http 1.1 Etag 与 Last-Modified提高php效率
2008/01/10 PHP
判断php数组是否为索引数组的实现方法
2013/06/13 PHP
php中switch语句用法详解
2015/08/17 PHP
PHP常用函数之根据生日计算年龄功能示例
2019/10/21 PHP
JavaScript DOM 学习第七章 表单的扩展
2010/02/19 Javascript
ajax 缓存 问题 requestheader
2010/08/01 Javascript
javascript页面上使用动态时间具体实现
2014/03/18 Javascript
javascript实现淘宝幻灯片广告展示效果
2015/04/27 Javascript
JS实现用户注册时获取短信验证码和倒计时功能
2016/10/27 Javascript
JS解决移动web开发手机输入框弹出的问题
2017/03/31 Javascript
详细讲解vue2+vuex+axios
2017/05/27 Javascript
30分钟快速入门掌握ES6/ES2015的核心内容(上)
2018/04/18 Javascript
JavaScript实现京东放大镜效果
2019/12/03 Javascript
vue项目中监听手机物理返回键的实现
2020/01/18 Javascript
[55:42]VG vs VGJ.T 2018国际邀请赛淘汰赛BO1 8.21
2018/08/22 DOTA
在Django框架中编写Contact表单的教程
2015/07/17 Python
Python使用matplotlib绘制多个图形单独显示的方法示例
2018/03/14 Python
查看django执行的sql语句及消耗时间的两种方法
2018/05/29 Python
python脚本实现验证码识别
2018/06/07 Python
django用户登录和注销的实现方法
2018/07/16 Python
在Python中字典根据多项规则排序的方法
2019/01/21 Python
使用Python制作简单的小程序IP查看器功能
2019/04/16 Python
Python数据结构与算法(几种排序)小结
2019/06/22 Python
Python networkx包的实现
2020/02/14 Python
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
英国现代市场:ARKET
2019/04/10 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
千元咖啡店的创业计划书范文
2013/12/29 职场文书
早读迟到检讨书
2014/01/24 职场文书
2014新年元旦活动策划方案
2014/02/18 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
家长通知书教师评语
2014/04/17 职场文书
党的群众路线教育实践活动方案
2014/10/31 职场文书
2014年小学少先队工作总结
2014/12/18 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android