(function($){ $.fn.extend({ Scroll:function(opt,callback){ // 参数初始化 if(!opt) var opt={}; var _btnUp = $("#next");//Shawphy:向上按钮 var _btnDown = $("#prev");//Shawphy:向下按钮 var _btnUp_01 = $("#next_01");//Shawphy:向上按钮 var _btnDown_01 = $("#prev_01");//Shawphy:向下按钮 var timerID; var _this=this.eq(0).find("ul:first"); var itemW=_this.find("li:first").width(), //获取列表项宽度 line=opt.line?parseInt(opt.line,10):parseInt(this.width()/itemW,10), //每次滚动的行数,默认为一屏,即父容器高度 speed=opt.speed?parseInt(opt.speed,1000):3000; //卷动速度,数值越大,速度越慢(毫秒) timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒) line = 1; if(line==0) line=1; //alert(line); var upHeight=0-line*itemW;
<input type="button" value="left" onclick="divid.style.marginLeft=divid.style.marginLeft.replace('px','')*1 +(-20)">
<input type="button" value="RIGHT" onclick="divid.style.marginLeft=divid.style.marginLeft.replace('px','')*1 +20">
<div id="divid" style="margin-left: 10;">1111</div>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
.bann_08{background:url(../images/banner_08.jpg) no-repeat; width:730px; height:206px;}
.bann_08 .bann_left_box{float:left; height:192px; width:54px;}
.bann_08 .bann_left_box .p_box{padding-left:5px; padding-top:9px;}
.bann_08 .bann_right_box{float:left; height:192px; width:48px;}
.bann_08 .bann_right_box .p_box{padding-left:3px; padding-top:9px;}
.bann_08 .bann_right_box .p_box img{cursor:pointer;}
.bann_08 .bann_left_box .p_box img{cursor:pointer;}
.bann_08 .ul_box{width:622px; height:202px; overflow:hidden; float:left;}
.bann_08 .ul_box ul{width:1500px;}
.bann_08 .ul_box ul li{width:153px; height:202px; float:left;padding-top:14px; padding-left:3px; background:url(../images/b.jpg) no-repeat 0 11px;}
</style>
</head><body>
<div class="bann_08" id="scroll">
<div class="bann_left_box"><p class="p_box"><img id="prev" src="images/left.jpg" alt="" /></p></div>
<div class="ul_box">
<ul>
<li>
<a href="pic/01.jpg" target="_blank"><img src="pic/01s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/02.jpg" target="_blank"><img src="pic/02s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/03.jpg" target="_blank"><img src="pic/03s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/04.jpg" target="_blank"><img src="pic/04s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/05.jpg" target="_blank"><img src="pic/05s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/06.jpg" target="_blank"><img src="pic/06s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/07.jpg" target="_blank"><img src="pic/07s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/08.jpg" target="_blank"><img src="pic/08s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/09.jpg" target="_blank"><img src="pic/09s.jpg" alt="" /></a>
</li>
<li>
<a href="pic/10.jpg" target="_blank"><img src="pic/10s.jpg" alt="" /></a>
</li>
</ul>
</div>
<div class="bann_right_box"><p class="p_box"><img id="next" src="images/right.jpg" alt="" /></p></div>
</div>
<script type="text/javascript" src="js/jquery1.21.js"></script>
<script type="text/javascript" src="js/jquery.scroll.js"></script>
<script type="text/javascript">
$(function(){
$("#scroll").Scroll({line:1,speed:1000,timer:3000});
});
</script>
</body>
</html>
$.fn.extend({
Scroll:function(opt,callback){
// 参数初始化
if(!opt) var opt={};
var _btnUp = $("#next");//Shawphy:向上按钮
var _btnDown = $("#prev");//Shawphy:向下按钮
var _btnUp_01 = $("#next_01");//Shawphy:向上按钮
var _btnDown_01 = $("#prev_01");//Shawphy:向下按钮
var timerID;
var _this=this.eq(0).find("ul:first");
var itemW=_this.find("li:first").width(), //获取列表项宽度
line=opt.line?parseInt(opt.line,10):parseInt(this.width()/itemW,10), //每次滚动的行数,默认为一屏,即父容器高度
speed=opt.speed?parseInt(opt.speed,1000):3000; //卷动速度,数值越大,速度越慢(毫秒)
timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔(毫秒)
line = 1;
if(line==0) line=1;
//alert(line);
var upHeight=0-line*itemW;
// 滚动函数
//alert(this.width()/itemW)
var scrollUp=function(){
_btnUp.unbind("click",scrollUp);
_btnUp_01.unbind("click",scrollUp);//Shawphy:取消向上按钮的函数绑定
_this.animate({
marginLeft:upHeight
},speed,function(){
for(i=1;i<=line;i++){
_this.find("li:first").appendTo(_this);
}
_this.css({marginLeft:0});
_btnUp.bind("click",scrollUp);
_btnUp_01.bind("click",scrollUp);//Shawphy:绑定向上按钮的点击事件
});
}
//Shawphy:向下翻页函数
var scrollDown=function(){
_btnDown.unbind("click",scrollDown);
_btnDown_01.unbind("click",scrollDown);
for(i=1;i<=line;i++){
_this.find("li:last").show().prependTo(_this);
}
_this.css({marginLeft:upHeight});
_this.animate({
marginLeft:0
},speed,function(){
_btnDown.bind("click",scrollDown);
_btnDown_01.bind("click",scrollDown);
});
}
//Shawphy: 自动播放
var autoPlay = function(){
if(timer)timerID = window.setInterval(scrollUp,timer);
};
var autoStop = function(){
if(timer)window.clearInterval(timerID);
};
// 鼠标事件绑定
_this.hover(autoStop,autoPlay).mouseout();
_btnUp.click(scrollUp).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
_btnDown.click(scrollDown).hover(autoStop,autoPlay);
_btnUp_01.click(scrollUp).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定
_btnDown_01.click(scrollDown).hover(autoStop,autoPlay);
}
})
})(jQuery);楼主把这个js存一下,然后页面导入这个js跟jquery就行了
但方法都不对,不是我要的效果,还有更高人不?
function goLR(LOR)
{
var left=$("#test").css("marginLeft").replace("px","");
if(LOR=="1")
{
left+=100
}
else
{
left-=100
}
$("#test").animate({marginLeft: left+'px'}, "slow");
}
</script>
LZ给我邮箱吧
很简单的东西
我也是菜鸟
现弄的
你可以参考一下