jquery写的左右滚动插件

最新推荐文章于 2024-08-27 16:05:08 发布

ibogood

最新推荐文章于 2024-08-27 16:05:08 发布

阅读量570

点赞数

本文链接：https://blog.csdn.net/ibogood/article/details/8434273

版权

javascript 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

(function($){
	$.fn.extend({
		"slidelf":function(v){
			v = $.extend({
				"L":"", 
				"R":"",
				"S":"",
				"O":"ul",
				"I":"li"
			},v);
			var $$ = $(this).get(0);	//将jquery对象转换成DOM对象;以便其它函数中调用；
			var marginl = parseInt($(v.O+" "+v.I+":first",this).css("margin-left")); //每个图片margin的数值
			var movew = $(v.O+" "+v.I+":first",this).outerWidth()+marginl;	//需要滑动的数值
			//点击左边
			$(v.L).click(function(){
				if(!$(v.O+" "+v.I+":first",$$).is(":animated")){
					$(v.O+" "+v.I+":first",$$).animate({"margin-left":-movew},v.S,function(){
						$(this).css("margin-left",marginl).appendTo($(v.O,$$));	
					});	
				}	
			});
			//点击右边
			$(v.R).click(function(){
				if(!$(v.O+" "+v.I+":first",$$).is(":animated")){
					$(v.O+" "+v.I+":last",$$).prependTo($(v.O,$$));
					$(v.O+" "+v.I+":first",$$).css("margin-left",-movew).animate({"margin-left":marginl},v.S);
				}	
			})
		}	
	});	
})(jQuery);

注释："L":"", "R":"","S":"","O":"ul","I":"li"

L是对应向左那个元素

R是对应向右那个元素

S是设置滚动的秒数，单位是毫秒

O是外面的名称

I是内部的名称
index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sliding Menu Effect</title>
<link rel="stylesheet" type="text/css" href="css/style2.css" />
<script type="text/javascript" language="javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="slidelf.js"></script>
<script type="text/javascript">
$(function(){
	$(".fl-pic").slidelf({
		"L":".left-arrow",
		"R":".right-arrow",
		"S":1000
	});
});
</script>
<style type="text/css">

</style>
</head>
<body><div class="friend-Link">
    <div class="left-arrow"><a href="#">左边箭头</a></div>
    <div class="fl-pic">
      <ul>
        <!-- 图片友情链接 -->
        <li><img src="images/fr-logo-01.gif" alt="" /></li>
        <li><img src="images/fr-logo-02.gif" alt="" /></li>
        <li><img src="images/fr-logo-03.gif" alt="" /></li>
        <li><img src="images/fr-logo-04.gif" alt="" /></li>
        <li><img src="images/fr-logo-05.gif" alt="" /></li>
        <li><img src="images/fr-logo-06.gif" alt="" /></li>
        <li><img src="images/fr-logo-07.jpg" alt="" /></li>
        <li><img src="images/fr-logo-08.jpg" alt="" /></li>
      </ul>
    </div>
    <div class="right-arrow"><a href="#">右边箭头</a></div>
  </div>
</body>
</html>