内容滑动切换应用非常广,常见的有幻灯片焦点图、画廊切换等。随着WEB前端技术的广泛应用,内容滑动切换效果占据着web页面重要地位,因此本站Helloweba特别给广大前端爱好者安排了浅显易懂的内容滑动切换效果的开发教程。
查看演示 下载源码
本次教程分三个部分:1、使用jQuery开发基本的内容滑动切换效果,2、支持移动端触控自适应的内容滑动切换效果,3、封装内容滑动切换效果jQuery插件。本文讲解第一部分,后面两部分会在接下来的文章中陆续发布,敬请关注。
本文将结合实例实现内容滑动切换的基本效果,包括:
左右箭头切换
无限无缝滚动
圆点按钮切换
动画效果
自动切换
HTML
首先准备HTML结构,整个滑动区域用#hwslider包裹,包括滑块内容,滑块使用ul li组织内容,滑块内容可以是图片、文字等任意HTML内容。#dots即圆点切换导航,由多个小圆点组成,对应滑块数量,一般位于滑动区域的下方。.arr则是由两个左右方向键组成。
[code=html] <p 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> <p id="dots"> <span data-index="1" class="active"></span> <span data-index="2"></span> <span data-index="3"></span> </p> <a href="javascript:;" id="prev" class="arr"><</a> <a href="javascript:;" id="next" class="arr">></a> </p>
CSS
使用CSS完成滑动区域各组件的布局,注意其中#hwslider需要设置position: relative以及宽度和高度,那么滑块#hwslider ul li设置position:absolute,默认只显示.active的滑块,超出尺寸部分将被隐藏。而圆点导航#dots和箭头导航.arr都要设置position: absolute,箭头导航默认不显示,当鼠标滑向滑块区域时才显示。再一个要注意的是#dots和.arr的z-index设置成2,即都应该显示在滑块上面。您可以修改css样式以满足各种需求,请看以下代码:
[code=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。
[code=html] <script src="http://apps.bdimg.com/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/hwslider.js"></script>
接着我们在hwslider.js中预先定义变量参数:
[code=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保持一致,就实现了无缝滚动的效果。另外当滑动完成时,及时变换圆点切换的样式。
[code=js] 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()函数,实现滑动动画效果。
[code=js] 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()完成切换动画。
[code=js] 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,鼠标移开滑块时又重新启动定时器自动切换。
[code=js] 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); }); };
最后将代码整理后,你将可以看到一个基本的滑动切换效果,你也可以下载源码测试。
以上就是hwSlider-内容滑动切换效果(一) 的内容,更多相关内容请关注PHP中文网(www.php.cn)!
相关文章:

H5开发需要掌握的工具和框架包括Vue.js、React和Webpack。1.Vue.js适用于构建用户界面,支持组件化开发。2.React通过虚拟DOM优化页面渲染,适合复杂应用。3.Webpack用于模块打包,优化资源加载。

HTML5hassignificantlytransformedwebdevelopmentbyintroducingsemanticelements,enhancingmultimediasupport,andimprovingperformance.1)ItmadewebsitesmoreaccessibleandSEO-friendlywithsemanticelementslike,,and.2)HTML5introducednativeandtags,eliminatingthenee

H5通过语义化元素和ARIA属性提升网页的可访问性和SEO效果。1.使用、、等元素组织内容结构,提高SEO。2.ARIA属性如aria-label增强可访问性,辅助技术用户可顺利使用网页。

"h5"和"HTML5"在大多数情况下是相同的,但它们在某些特定场景下可能有不同的含义。1."HTML5"是W3C定义的标准,包含新标签和API。2."h5"通常是HTML5的简称,但在移动开发中可能指基于HTML5的框架。理解这些区别有助于在项目中准确使用这些术语。

H5,即HTML5,是HTML的第五个版本,它为开发者提供了更强大的工具集,使得创建复杂的网页应用变得更加简单。H5的核心功能包括:1)元素允许在网页上绘制图形和动画;2)语义化标签如、等,使网页结构清晰,利于SEO优化;3)新API如GeolocationAPI,支持基于位置的服务;4)跨浏览器兼容性需要通过兼容性测试和Polyfill库来确保。

如何创建 H5 链接?确定链接目标:获取 H5 页面或应用程序的 URL。创建 HTML 锚点:使用 <a> 标记创建锚点并指定链接目标URL。设置链接属性(可选):根据需要设置 target、title 和 onclick 属性。添加到网页:将 HTML 锚点代码添加到希望链接出现的网页中。

解决 H5 兼容问题的方法包括:使用响应式设计,允许网页根据屏幕尺寸调整布局。采用跨浏览器测试工具,在发布前测试兼容性。使用 Polyfill,为旧浏览器提供对新 API 的支持。遵循 Web 标准,使用有效的代码和最佳实践。使用 CSS 预处理器,简化 CSS 代码并提高可读性。优化图像,减小网页大小并加快加载速度。启用 HTTPS,确保网站的安全性。

h5页面可以通过两种方法生成链接:手动创建链接或使用短链接服务。通过手动创建,只需复制h5页面的URL即可;通过短链接服务,需将URL粘贴到服务中,然后获取缩短的URL。


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

Atom编辑器mac版下载
最流行的的开源编辑器

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

Dreamweaver Mac版
视觉化网页开发工具

记事本++7.3.1
好用且免费的代码编辑器