搜索
首页web前端H5教程hwSlider-内容滑动切换效果(一)

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


hwSlider-内容滑动切换效果(一)
查看演示 下载源码


          本次教程分三个部分: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(&#39;ul&#39;)
	var hwsliderLi = sliderInder.children(&#39;li&#39;);
	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 == &#39;prev&#39;){
				offset = -1*offset;
			}

			//当前滑块动画
			sliderInder.children(&#39;.active&#39;).stop().animate({
				left: -offset},
				speed,
				 function() {
				 	$(this).removeClass(&#39;active&#39;);
			});
			//下一个滑块动画
			hwsliderLi.eq(index-1).css(&#39;left&#39;, offset + &#39;px&#39;).addClass(&#39;active&#39;).stop().animate({
				left: 0}, 
				speed,
				function(){
					clickable = true;
			});

			dots.removeClass(&#39;active&#39;);
			dots.eq(index-1).addClass(&#39;active&#39;);

		}else{
			return false;
		}
	}

绑定左右箭头的点击事件,当点击箭头时,判断当前滑块是否是第一个滑块或最后一个滑块,并重新定义index,从而实现无线滚动效果,然后分别调用moveTo()函数,实现滑动动画效果。

[code=js]
	next.on(&#39;click&#39;, function(event) {
		event.preventDefault();
		if(clickable){
			if(index >= hwsliderSize){
				index = 1;
			}else{
				index += 1;
			}
			moveTo(index,&#39;next&#39;);
		}
	});

	prev.on(&#39;click&#39;, function(event) {
		event.preventDefault();
		if(clickable){
			if(index == 1){
				index = hwsliderSize;
			}else{
				index -= 1;
			}

			moveTo(index,&#39;prev&#39;);
		}
		
	});

接着,绑定圆点导航的点击事件,当点击小圆点时,获取当前点击的圆点序号,即点击的是第几个圆点,就对应的第几个滑块,然后调用moveTo()完成切换动画。

[code=js]
	dots.on(&#39;click&#39;,  function(event) {
		event.preventDefault();
		
		if(clickable){
			var dotIndex = $(this).data(&#39;index&#39;);
			if(dotIndex > index){
				dir = &#39;next&#39;;
			}else{
				dir = &#39;prev&#39;;
			}
			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, &#39;next&#39;);
		}
		timer = setInterval(play, interval); //设置定时器

		//鼠标滑上时暂停
		slider.hover(function() {
			timer = clearInterval(timer);
		}, function() {
			timer = setInterval(play, interval);
		});
	};


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

 以上就是hwSlider-内容滑动切换效果(一) 的内容,更多相关内容请关注PHP中文网(www.php.cn)!

相关文章:

实例帮助你了解HTML5滑动区域选择元素Slider element

hwSlider-内容滑动切换效果(二):响应式可触控滑动

微信小程序 slider组件详细介绍

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
H5:工具,框架和最佳实践H5:工具,框架和最佳实践Apr 11, 2025 am 12:11 AM

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

HTML5的遗产:当前了解H5HTML5的遗产:当前了解H5Apr 10, 2025 am 09:28 AM

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

H5代码:可访问性和语义HTMLH5代码:可访问性和语义HTMLApr 09, 2025 am 12:05 AM

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

H5与HTML5相同吗?H5与HTML5相同吗?Apr 08, 2025 am 12:16 AM

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

H5的功能是什么?H5的功能是什么?Apr 07, 2025 am 12:10 AM

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

h5链接怎么做h5链接怎么做Apr 06, 2025 pm 12:39 PM

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

h5兼容问题怎么解决h5兼容问题怎么解决Apr 06, 2025 pm 12:36 PM

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

h5怎么生成链接h5怎么生成链接Apr 06, 2025 pm 12:33 PM

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

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

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

AI Clothes Remover

AI Clothes Remover

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

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
3 周前By尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
3 周前By尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

mPDF

mPDF

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

螳螂BT

螳螂BT

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

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器