简单实现左右移动

最新推荐文章于 2023-06-23 05:43:24 发布

宇宙浪子

最新推荐文章于 2023-06-23 05:43:24 发布

阅读量849

点赞数

分类专栏：分享文章标签： jquery 移动

本文链接：https://blog.csdn.net/Miklechun/article/details/9998831

版权

分享专栏收录该内容

78 篇文章 0 订阅

订阅专栏

js层代码：

$(document).ready(
			function() {
				$(".handle").siblings(".slide").hide();
				$(".handle").siblings(".slide").eq(0).show();
				$("#header").find(".slide").each(function(){
					$(this).find(".content").eq(6).nextAll().hide();
					$(this).find(".content").last().show();
				});
}
});

function prevAndNext(this_,flag){
		var tmp = "";
			$(this_).parent().parent().parent().find(".content").each(function(index,node){
				if($(this).is(":visible")){
					tmp = tmp + "1";
				}else{
					tmp = tmp + "0";
				}
			});
			tmp = tmp.substring(1,tmp.length-1);
			var prev = tmp.indexOf("1");
			var next = tmp.lastIndexOf("1");
		if('prev' == flag){
			if(prev!=0){
				$(this_).parent().parent().parent().find(".content").eq(prev).show();
				$(this_).parent().parent().parent().find(".content").eq(next+1).hide();
			}
		}else{
			if(next!=tmp.length-1){
				$(this_).parent().parent().parent().find(".content").eq(prev+1).hide();
				$(this_).parent().parent().parent().find(".content").eq(next+2).show();
			}
		}
	}

html层代码：

<div>
					<div class="handle" style="background-color:#199743">
						<p class="rotate">测试</p>
					</div>
					<div class="slide" style="display: block; background-color: rgb(216, 233, 200);">
						<div class="content" style="float:left;margin-top:40px;width:45px; "><div class="btn" style="margin-left:9px;"><a href="javascript:;" οnclick="prevAndNext(this,'prev')"><<</a></div></div>
						
						
						<div style="float: left; margin: 5px; display: none;" class="content">
							<div style="float:left;width:57px;">
								案例一
							</div>
						</div>
						
						<div style="float: left; margin: 5px; display: none;" class="content">
							<div style="float:left;width:57px;">
								案例二
							</div>
						</div>
						
						<div style="float:left;margin:5px;" class="content">
							<div style="float:left;width:57px;">
								案例三
							</div>
						</div>
						
						<div style="float:left;margin:5px;" class="content">
							<div style="float:left;width:57px;">
								案例四
							</div>
						</div>
						
						<div style="float:left;margin:5px;" class="content">
							<div style="float:left;width:57px;">
								案例五
							</div>
						</div>
						
						<div style="float:left;margin:5px;" class="content">
							<div style="float:left;width:57px;">
								案例六
							</div>
						</div>
						
						<div style="float: left; margin: 5px; display: block;" class="content">
							<div style="float:left;width:57px;">
								案例七
							</div>
						</div>
						
						<div style="float: left; margin: 5px; display: block;" class="content">
							<div style="float:left;width:57px;">
								案例八
							</div>
						</div>
						
						<div class="content" style="float: left; margin-top: 40px; width: 45px; display: block;"><div class="btn" style="margin-left:9px;"><a href="javascript:;" οnclick="prevAndNext(this,'next')">>></a></div></div>
					</div>
				</div>

其中html部分css样式去除。