首页 > 网络编程 > JavaScript > javascript类库 > jquery > slider Content

jQuery slider Content(左右控制移动)

2009-09-18 22:55:38 作者：

jQuery slider Content(左右控制移动)实现代码，大家可以参考下。

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

}; 
//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> 
<div class="title_bar"> 
<a id="leftA" href="javascript:void(0);" > 
left 
</a> 
<div id="slider"> 
<div id="content"> 
<ul id="Ul1" class="tab_nav" style="margin-left: 0px; margin-right: 0px;"> 
<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> 
</ul> 
</div> 
</div> 
<a id="rightA" href="javascript:void(0);" > 
right</a> 
</div> 
</body>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

运行以后，需要刷新下，因为是外部js.

jQuery slider Content(左右控制移动)

您可能感兴趣的文章: