jQuery slider Content(左右控制移动)

更新时间：2009年09月18日 22:55:38 作者：

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

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

<script type="text/javascript" src="http://img.jb51.net/jslib/jquery/jquery-1.3.2.min.js"></script> <script type="text/javascript"> 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> <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选择器简述
本篇文章主要是对jQuery选择器进行了总结介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2015-08-08
jquery.form.js实现将form提交转为ajax方式提交的方法
这篇文章主要介绍了jquery.form.js实现将form提交转为ajax方式提交的方法,涉及jQuery插件实现form表单的Ajax提交技巧,非常具有实用价值,需要的朋友可以参考下
2015-04-04
jquery实现横向图片轮播特效代码分享
这篇文章主要介绍了jquery实现横向图片轮播特效代码，效果很精致，实现方法很简单，特推荐给大家，希望大家可以喜欢。
2015-11-11
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
这篇文章主要介绍了jQuery动画显示和隐藏效果实现方法,并附带了demo源码供读者下载参考,涉及jQuery操作图片的显示,隐藏及淡入淡出等效果,需要的朋友可以参考下
2015-12-12
模拟多级复选框效果的jquery代码
今天又次体会到jquery的强大了，做了个多级复选框的效果，代码块分两块:一是全选的效果、二是当前复选框的父框根据当前框的兄弟是否全选中来决定父框是否选中
2013-08-08
jQuery实现移动端悬浮拖动效果
这篇文章主要为大家详细介绍了jQuery实现移动端悬浮拖动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-02-02
jQuery 3 中的新增功能汇总介绍
本文带你了解了一遍 jQuery 3 将会带来的一些重大变化。或许你已经注意到了，这个版本是可能对你现有的项目产生太大的影响，因为没有引入太多许多重大更改。
2016-06-06
小巧强大的jquery layer弹窗弹层插件
这篇文章主要介绍了小巧强大的jquery layer弹窗弹层插件的使用方法以及使用范围，非常详细，有需要的小伙伴可以参考下。
2015-12-12
JQuery插入DOM节点的方法
这篇文章主要介绍了JQuery插入DOM节点的方法,实例分析了jQuery实现DOM结点插入所涉及的常见函数使用技巧,需要的朋友可以参考下
2015-06-06
jQuery实现的form转json经典示例
这篇文章主要介绍了jQuery实现的form转json功能,结合完整实例形式分析了jQuery将form表单数据封装成json传输的具体步骤与相关操作技巧,需要的朋友可以参考下
2017-10-10

最新评论