井井客

搜索

兼容移动端仿swiper左右滚动图片

自制的移动端JQ左右滚动插件,因为swiper体积较大,需要JS和CSS文一起要好几十KB,但实际工作中其实用到的功能不多。所以自己整理做了一下仿swiper左右滚动插件。

兼容移动端仿swiper左右滚动图片

实际代码就一百多行,仔细看的话还是比较容易。

效果图的地址可以看:http://jingjingke.com/web/jquery/bannerScroll.html

先说一下它的html的主体结构:

<div class="warp">
 <ul class="box">
  <li></li>
  <li></li>
  <li></li>
 </ul>
</div>

这样也比较符合我们的切图习惯。然后对应的样式:

/*布局样式*/
.warp { width:320px; height: 250px; margin: 100px auto 0; border:1px solid #999; overflow: hidden; cursor: pointer; position: relative;}
.box { width: 99999px; height: 300px;}
.box li { float:left; width: 320px; height: 250px;}
.box img { width: 100%; height: 100%;}
/*list圆点样式*/
.tag { position: absolute; bottom: 10px; left:0px ; width: 100%; text-align: center;}
.tag span { display:inline-block; width: 10px; height: 10px; border-radius: 5px; background: #fff; margin: 0 5px; overflow: hidden; opacity: 0.5; text-indent: -999em;}
.tag .on { opacity: 1;}
/*左右两端箭头*/
.prev,.next { position: absolute; background: rgba(255,255,255,.2); top:50%; width: 30px; height: 50px; margin-top: -35px; text-align: center; border: 1px solid #fff; color: #fff; font:28px/50px  bold;}
.prev { left: 0;}
.next { right: 0;}

这个只是基础的,样式可以任意改的,也不多。接下来就是JQ的代码了:

$.fn.bannerScroll = function(param){
	$(this).each(function(){
		//初始化一些值		
		var $this = $(this) , $ul = $(this).find('ul'); $li = $(this).find('li');
		//初始化鼠标开始、结束位置与屏幕宽度[用于后面计量滑动宽度]
		var $start = 0 , $end = 0 , $screenWidth = screen.width;
		//获取需要滚动的图片个数,以及单张图片宽度
		var $num = $li.length , $width = $li.width();
		//克隆两次内容
		var $cloneHtml = $ul.html();
		$ul.prepend($cloneHtml).prepend($cloneHtml);
		//初始平移的位置
		var $point = - ( $num * $width );
		$ul.css({marginLeft:$point+'px'});
		//判断是否拥有移动端某个touch事件[再自定义事件赋值某端的相应事件]
		var hasTouch = 'ontouchstart' in window;
		//接下来去自定义相关事件
		var goTouchStart = hasTouch ? 'touchstart' : 'mousedown',
			goTouchMove = hasTouch ? 'touchmove' : 'mousemove',
			goTouchEnd = hasTouch ? 'touchend' : 'mouseup';
		//flag-[鼠标点击到放开的过程]、索引号、url的初始值
		var $flag = false,
			$index = 0,
			$url = '';
		
		//******初始化圆点列表,并记录对应的marginLeft的值范围
		var $valArry = [];
		//向DOM添加圆点的结构
		$this.append('<div class="tag"></div>');
		var $tag = $this.children('.tag');
		for(var i = 0; i < $num; i++){
			$tag.append('<span>'+ (i+1) +'</span>');
			$valArry.push( -$width*($num+i) );
		}
		$tag.children().eq(0).addClass('on');
		//*******初始化左右方向箭头
		$this.append('<span class="prev">&lt;</span><span class="next">&gt;</span>')
		
		//*******开始绑定事件
		//A标签禁用点击事件
		$this.find('a').click(function(){ return false; });
		//鼠标按下-li标签按下
		$this.find('li').on(goTouchStart,function(e){
			//获取按下时的位置[先判断是否在动画中]
			if(!$ul.is(":animated")){
				//将标识flag调为true,可以进行鼠标移动操作
				$flag = true;
				//获取鼠标按下位置
				$start = hasTouch ? e.originalEvent.targetTouches[0].screenX : e.originalEvent.screenX;
				//获取url地址
				$url = $(this).find('a').attr('href');
			}
			//阻止默认动作
			e.preventDefault();
		})
		//鼠标移动-整个body中任意
		$('body').on(goTouchMove,function(e){
			//判断flag-即是否点击了
			if($flag){
				$end = hasTouch ? e.originalEvent.targetTouches[0].screenX : e.originalEvent.screenX;
				$ul.css({marginLeft:$point + ($end-$start) + 'px'});
			}
		})
		//鼠标放开-整个document中任意
		$(document).on(goTouchEnd,function(e){
			//获取离开时的位置[先判断是否在动画中]
			if(!$ul.is(":animated") && $flag){
				//将标识flag调为false,使页面中“移动”操作不会再改变值
				$flag = false;
				//获取放开时的鼠标位置
				$end = hasTouch ? $end : e.originalEvent.screenX;
				//判断最后与开始的鼠标位置
				if($end - $start > 20){
				//如果结束位置大于开始位置-- 即鼠标是向右滑
					bannerNext();
				}else if($start - $end > 20){
				//如果开始位置大于结束位置-- 即鼠标是向左滑
					bannerPrev();
				}else{
					//其它情况--点击url
					window.open($url,'_self');
				}
			}
		})
		//list圆点点击事件
		$tag.children('span').on(goTouchStart,function(){
			if(!$ul.is(":animated")){
				$tag.children('span').eq( $(this).index() ).addClass('on').siblings().removeClass('on');
				$point = $valArry[$(this).index()];
				$ul.animate({marginLeft:$point + 'px'},500);
			}
		})
		//左右箭头点击事件
		$this.children('.next').on(goTouchStart,function(){
			if(!$ul.is(":animated")) bannerPrev();
		})
		$this.children('.prev').on(goTouchStart,function(){
			if(!$ul.is(":animated")) bannerNext();
		})
		//自动跳转到下一屏
		if(param != undefined){
			if(param===true) param = 3000;
			//定时器
			setInterval(function(){if(!$ul.is(":animated") && $flag == false ){bannerPrev()}},param);
		}
		//向上一张滑动
		function bannerNext(){
			$ul.animate({marginLeft : $point + $width + 'px'},500,function(){
					$point = ($point == $valArry[0]) ? $valArry[$num-1] : $point + $width;
					$ul.css({marginLeft : $point + 'px'});
				});
				$tag.children('span').eq( $tag.find('.on').index()==0 ? $num-1 : $tag.find('.on').index()-1 ).addClass('on').siblings().removeClass('on');
		}
		//向下一张滑动
		function bannerPrev(){
			$ul.animate({marginLeft:$point - $width + 'px'},500,function(){
					$point = ($point == $valArry[$num-1]) ? $valArry[0] : $point - $width;
					$ul.css({marginLeft : $point + 'px'});
				});
				$tag.children('span').eq( $tag.find('.on').index()==$num-1 ? 0 : $tag.find('.on').index()+1 ).addClass('on').siblings().removeClass('on');
		}
		
	})//遍历完成
}//$.fn完成

这边就是插件的主体代码了。其中上半部分就是记录一些值啊之类的,用到后半部分在事件中使用。

再接着就是使用这个插件了。依赖JQ

//引用插件
$('.warp01').bannerScroll(true);  //默认3S自动滑到下一张,也可写数字如5秒:(5000)
$('.warp02').bannerScroll();  //不自动

现在放到面的只有一个参数,是记录是否自动/自动的时间,备注中有写。

上面的代码就是几了几块看而已,拼起来也是看不到效果的,整理代码在这边:实例地址

PS:在实际应用的时候$width获取的宽度可能会因为自适应宽度也有时候获取不到值(值是img图片撑大的,所以如果img没加载出来就会获取不到),所以我有另我再重新计算获取整个外围的宽度,再将外围的宽度赋值给$li,将img设为100%。就差不多解决了。这个需要根据实际情况来写。这边的代码我就暂时没有动了。

另外可能学习进步不够,如有细节有不严谨的地方或有异议的地址可以留言昂。

文章TAG:JQ

作者:井井客原创来源:原创
本文标题:兼容移动端仿swiper左右滚动图片
本文链接:/c/29244.html

上一篇:如何让JQ鼠标事件兼容手机端
下一篇:【VUE实例】win7从零安装vue-cli脚手架

文章分类

相关阅读

随便看看