jQuery slider Content(左右控制移动)_jquery-js教程-PHP中文网

jQuery slider Content(左右控制移动)_jquery

WBOY

发布： 2016-05-16 18:46:01

原创

982 人浏览过

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

}; 
//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> 
 
<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>

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

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