jQuery slider Content(左右控制移动)

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

<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%20src%3D%22http%3A%2F%2Fimg.glzy8.com%2Fjslib%2Fjquery%2Fjquery-1.3.2.min.js%22%3E%3C%2Fscript%3E"> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20animate(dir%2C%20step)%20%7B%20%0D%0Avar%20position%3B%20%0D%0Aposition%20%3D%20parseInt(%24(%22%23content%22).css(%22margin-left%22))%3B%20%0D%0Avar%20contentwidth%3B%20%0D%0Avar%20sliderwidth%3B%20%0D%0Acontentwidth%20%3D%20parseInt(%24(%22%23content%22).css(%22width%22))%3B%20%0D%0Asliderwidth%20%3D%20parseInt(%24(%22%23slider%22).css(%22width%22))%3B%20%0D%0A%2F%2Falert(position)%3B%20%0D%0Aswitch%20(dir)%20%7B%20%0D%0Acase%20%22right%22%3A%20%0D%0Aposition%20%3D%20((position%20-%20step)%20%3C%20(sliderwidth%20-%20contentwidth))%20%3F%20(sliderwidth%20-%20contentwidth)%20%3A%20(position%20-%20step)%3B%20%0D%0Abreak%3B%20%0D%0Acase%20%22left%22%3A%20%0D%0Aposition%20%3D%20((position%20%2B%20step)%20%3E%200)%20%3F%200%20%3A%20(position%20%2B%20step)%3B%20%0D%0Abreak%3B%20%0D%0Adefault%3A%20%0D%0Abreak%3B%20%0D%0A%0D%0A%7D%3B%20%0D%0A%2F%2Falert(position)%3B%20%0D%0A%24(%22%23content%22).animate(%20%0D%0A%7B%20marginLeft%3A%20position%20%2B%20%22px%22%20%7D%2C%20%0D%0A800%20%0D%0A)%3B%20%0D%0A%7D%20%0D%0A%24(document).ready(function()%20%7B%20%0D%0A%24(%22%23slider%22).css(%22width%22%2C%20(%24(%22body%22).attr(%22clientWidth%22)%20-%2080)%20%2B%20%22px%22)%3B%20%0D%0A%24(%22%23leftA%22).click(function()%20%7B%20%0D%0Aanimate(%22left%22%2C%20400)%3B%20%0D%0A%7D)%3B%20%0D%0A%24(%22%23rightA%22).click(function()%20%7B%20%0D%0Aanimate(%22right%22%2C%20400)%3B%20%0D%0A%7D)%3B%20%0D%0A%0D%0A%7D)%3B%20%0D%0A%3C%2Fscript%3E"> 
<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);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" > 
left 
</a> 
<div id="slider"> 
 
<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);" _ewebeditor_ta_href="javascript%3Avoid(0)%3B" > 
right</a> 
</div> 
</body>

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

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

教程首页更多教程