您的当前位置：首页 jQuerysliderContent(左右控制移动)_jquery

jQuerysliderContent(左右控制移动)_jquery

来源：九壹网

不错的效果。好多文字广告可以这样控制。

</ script> 
 
function animate(dir, step) { 
var position; 
position = parseInt($("#content").css("margin-left")); 
var contentwidth; 
var sliderwidth; 
contentwidth = parseInt($("#content").css("width")); 
sliderwidth = parseInt($("#slider").css("width")); 
//alert(position); 
switch (dir) { 
case "right": 
position = ((position - step) < (sliderwidth - contentwidth)) ? (sliderwidth - contentwidth) : (position - step); 
break; 
case "left": 
position = ((position + step) > 0) ? 0 : (position + step); 
break; 
default: 
break;

}; 
//alert(position); 
$("#content").animate( 
{ marginLeft: position + "px" }, 
800 
); 
} 
$(document).ready(function() { 
$("#slider").css("width", ($("body").attr("clientWidth") - 80) + "px"); 
$("#leftA").click(function() { 
animate("left", 400); 
}); 
$("#rightA").click(function() { 
animate("right", 400); 
});

}); 
</ script> 
<style type="text/css"> 
ul,li{ 
display:block; 
} 
li{ 
width:150px; 
float:left; 
} 
#content 
{ 
width: 2030px; 
margin-left: 0px; 
} 
#slider 
{ 
margin-left: 40px; 
overflow: hidden; 
} 
#leftA 
{ 
display: block; 
float: left; 
left: 10px; 
top: 5px; 
position: absolute; 
background-image: url(); 
} 
#rightA 
{ 
display: block; 
float: right; 
right: 10px; 
top: 5px; 
position: absolute; 
background-image: url(); 
} 
</style> 
<body> 
 
 
left 
 
 
 
 
<li id="gaom1" class="menuon" > 
基本信息</li> 
<li id="gaom2" class="menuoff" > 
基本信息</li> 
<li id="gaom3" class="menuoff" > 
基本信息</li> 
<li id="gaom4" class="menuoff" > 
基本信息</li> 
<li id="gaom5" class="menuoff" > 
基本信息</li> 
<li id="gaom6" class="menuoff" > 
基本信息</li> 
<li id="gaom7" class="menuoff" > 
基本信息</li> 
<li id="gaom8" class="menuoff" > 
基本信息</li> 
<li id="gaom9" class="menuoff" > 
基本信息</li> 
<li id="gaom10" class="menuoff" > 
基本信息</li> 
<li id="gaom11" class="menuoff" > 
基本信息</li> 
 
 
 
 
right 
 
</body>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
运行以后，需要刷新下，因为是外部js.