<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title>滑动效果</title>
<style>
.cooperation{
margin: 0 auto;
text-align: center;
}
#icoL{
float: left;
margin-top: 24px;
width: 50px;
height: 88px;
display: inline-block;
background: url(left.png) no-repeat;
}
#icoR{
margin-right: 40px;
margin-top: 24px;
float: right;
width: 50px;
height: 88px;
display: inline-block;
background: url(right.png) no-repeat;
}
.img_display{
display:inline-block;
list-style:none;
background-color:red;
padding-left: 0px;
}
.img_display li{
padding:10px 20px 10px 20px;
display: inline-block;
}
</style>
</head>
<body>
<div class="cooperation" >
<div class="ico" >
<span id="icoL" ></span>
<span id="icoR" ></span>
</div>
<ul class="img_display" style="overflow:hidden;white-space:nowrap;width: 1175px;" >
<li ><img src="1.png"></li>
<li ><img src="2.png"></li>
<li ><img src="3.png"></li>
<li ><img src="4.png"></li>
</ul>
<ul class="img_hidden" style="display:none;">
<li><img src="5.png"></li>
<li ><img src="6.png"></li>
<li ><img src="7.png"></li>
<li ><img src="8.png"></li>
</ul>
<div class="clear"></div>
</div>
</body>
<script src="jquery-1.10.2.min.js"></script>
<script type="text/javascript" charset="utf-8">
$("#icoL").bind("click",function(){
MoveLeft(".img_display",4,"li",".img_hidden");
});
$("#icoR").bind("click",function(){
MoveRight(".img_display",4,"li",".img_hidden");
});
//往左滑动
//displayRegion 显示区域
//displayNum 显示区域中，显示元素个数
//elementName 显示元素标识
//HiddenRegion 隐藏区域
function MoveLeft(displayRegion, displayNum, elementName, HiddenRegion) {
//防止重复点击
if ($(displayRegion + " " + elementName).length >= displayNum + 1) {
return;
}
//算滑动距离
var width = parseInt($($(displayRegion)[0]).css("width"));
var marginLeft = 0;
$(displayRegion + " " + elementName).each(function (index) {
if (index > 0) {
//除去displayRegion中第一个元素的marginLeft，因为滑动是以第一个元素本身的左边为基准开始滑动的。
marginLeft += parseInt($(this).css("marginLeft"));
}
});
//原始滑动距离
var distance = (width - marginLeft) / displayNum;
//由于在滑动结束时，会移除滑动到屏幕之外的元素，所以得考虑元素移除后,如何恢复原始的布局；
//令滑动前，displayRegion中第一个元素的marginLeft为a，第二个元素的为b；
//若a==0，滑动距离应加上b;若a<>0,则无需加上b
if (parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft")) == 0) {
distance += parseInt($($(displayRegion + " " + elementName)[1]).css("marginLeft"));
}
//从HiddenRegion中取出第一个元素，填补到displayRegion得末尾
var displayElem = $(HiddenRegion + " " + elementName + ":first")[0];
$(displayRegion).append(displayElem.outerHTML);
$(displayElem).detach();
var hiddenElem = $(displayRegion + " " + elementName + ":first")[0];
$(hiddenElem).animate({ marginLeft: 0 - distance }, 1000, function () {
//滑动结束，移除滑出屏幕外的元素，填补到HiddenRegion得末尾，并除去滑动造成的marginLeft的改变
$(HiddenRegion).append(hiddenElem.outerHTML);
$(hiddenElem).detach();
$(HiddenRegion + " " + elementName + ":last").removeAttr("style");
});
}
//往右滑动
//displayRegion 显示区域
//displayNum 显示区域中，显示元素个数
//elementName 显示元素标识
//HiddenRegion 隐藏区域
function MoveRight(displayRegion, displayNum, elementName, HiddenRegion) {
if ($(displayRegion + " " + elementName).length >= displayNum + 1) {
return;
}
//算滑动距离
var slideDistance = parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft"));
//算元素的隐藏距离，即滑动前应该在displayRegion中的那里加上新增的元素
var hiddenDistance = 0 - parseInt($(displayRegion + " " + elementName)[0].offsetWidth);
if (parseInt($($(displayRegion + " " + elementName)[0]).css("marginLeft")) == 0) {
hiddenDistance -= parseInt($($(displayRegion + " " + elementName)[1]).css("marginLeft"));
}
var displayElem = $(HiddenRegion + " " + elementName + ":last")[0];
$(displayElem).attr("style", "margin-left:" + hiddenDistance + "px");
$(displayRegion).prepend(displayElem.outerHTML);
$(displayElem).detach();
$($(displayRegion + " " + elementName + ":first")[0]).animate({ marginLeft: slideDistance }, 1000, function () {
$(HiddenRegion).prepend($(displayRegion + " " + elementName + ":last")[0].outerHTML);
$($(displayRegion + " " + elementName + ":last")[0]).detach();
$(displayRegion + " " + elementName + ":first").removeAttr("style");
});
}
</script>
</html>
使用Jquery实现块级区域（图片等）的左右滑动切换展示
需积分: 50 42 浏览量
2017-11-10
14:16:03
上传
评论
收藏 89KB RAR 举报
animate左右滑动.rar （12个子文件） 
animate左右滑动 
4.png 5KB 3.png 6KB left.png 562B 7.png 9KB 5.png 9KB 1.png 5KB 2.png 5KB
滑动效果.html 5KB 6.png 9KB 8.png 5KB
jquery-1.10.2.min.js 92KB right.png 522B资源评论
