首页 > 代码库 > 左右滑动
左右滑动
点击向右向左，中间的内容滑动。
这里介绍的是一个插件。
效果图：
当点击向右：
这里只是举列子，为了看明白过程，这的宽度给的很大，写的只是数字。
这个具体可以用来干什么，我们可以把div的宽度设置成每一个a标签的宽度，这样每次只显示一个，当你点击的时候就换另一个，这样就很像商品的轮换了.
例如：http://www.shopli.cn/XiaoNiu/ShopDetail/Detail/1042
当你点击向右（或左）
，上面的图片就会换掉。（当然，这里的写法并不是用的这种，达到的效果是一样的）。
我们可以把a标签换成别的标签都可以。
我们的页面：
样式：
a { text-decoration: none; margin: 5px; /*border:solid 1px #ff0000;*/ } .wrap { width: 500px; margin: auto; overflow: hidden; border: solid 1px #000000; height: 34px; line-height: 34px; } .span_tab { width: 5000px; overflow: hidden; float: left; height: 34px; }
页面：
<a href=http://www.mamicode.com/"javascript:void(0)" id="but_down" class="icon lt">向左</a> <a href=http://www.mamicode.com/"javascript:void(0)" id="but_up" class="icon gt">向右</a> <div id="scrollDiv" class="wrap"> <%--可以看到的宽度--%> <span id="SpanTab" class="span_tab"> <%-- 里面--%> <a href=http://www.mamicode.com/"#">1</a> <a href=http://www.mamicode.com/"#">2</a> <a href=http://www.mamicode.com/"#">3</a> <a href=http://www.mamicode.com/"#">4</a> <a href=http://www.mamicode.com/"#">5</a> <a href=http://www.mamicode.com/"#">6</a> <a href=http://www.mamicode.com/"#">7</a> </span> </div>
js:
<script src=http://www.mamicode.com/"../js/jquery-1.11.0.min.js"></script> <script src=http://www.mamicode.com/"../js/jq_scroll.js"></script> <script> $(document).ready(function () { $("#scrollDiv").Scroll({ line: 1, speed: 500, //timer:3000, up: "but_up", down: "but_down" }); });
Scroll方法就是JS引用的，
(function($){ $.fn.extend({ Scroll:function(opt,callback){ //参数初始化 if(!opt) var opt={}; var _btnUp = $("#"+ opt.up);//Shawphy:向上按钮 var _btnDown = $("#"+ opt.down);//Shawphy:向下按钮 var timerID; var _this=this.eq(0).find("span:first"); var lineH=_this.find("a:first").width(), //获取行高 line=opt.line?parseInt(opt.line,10):parseInt(this.height()/lineH,10), //每次滚动的行数，默认为一屏，即父容器高度 speed=opt.speed?parseInt(opt.speed,10):500; //卷动速度，数值越大，速度越慢（毫秒） timer=opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒） if(line==0) line=1; var upHeight=0-line*lineH; //滚动函数 var scrollUp=function(){ _btnUp.unbind("click",scrollUp); //Shawphy:取消向上按钮的函数绑定 _this.animate({ marginRight:upHeight },speed,function(){ for(i=1;i<=line;i++){ _this.find("a:first").appendTo(_this); } _this.css({marginRight:0}); _btnUp.bind("click",scrollUp); //Shawphy:绑定向上按钮的点击事件 }); } //Shawphy:向下翻页函数 var scrollDown=function(){ _btnDown.unbind("click",scrollDown); for(i=1;i<=line;i++){ _this.find("a:last").show().prependTo(_this); } _this.css({marginRight:upHeight}); _this.animate({ marginRight:0 },speed,function(){ _btnDown.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.css("cursor","pointer").click( scrollUp ).hover(autoStop,autoPlay);//Shawphy:向上向下鼠标事件绑定 _btnDown.css("cursor","pointer").click( scrollDown ).hover(autoStop,autoPlay); } }) })(jQuery);
当我们改变页面的时候，不用a标签了，用很常见的ul
样式：
a { text-decoration: none; margin: 5px; /*border:solid 1px #ff0000;*/ } .wrap { width: 500px; margin: auto; overflow: hidden; border: solid 1px #000000; height: 34px; line-height: 34px; } ul { width:5000px; overflow:hidden; float:left; list-style:none; margin:0px; } ul li { float:left; margin:0 5px; }
页面：
<div id="scrollDiv" class="wrap"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> </ul> </div>
js:
<script src=http://www.mamicode.com/"../js/jquery-1.11.0.min.js"></script> <script src=http://www.mamicode.com/"../js/jsScroll.js"></script> <!--第二种--> <script> $(document).ready(function () { $("#scrollDiv").Scroll({ line: 1, speed: 500, //timer:3000, up: "but_up", down: "but_down" }); });
我们引用的js换了一个，注意到了没有。
我们从上面引用的js里面代码可以很容易看到他找的是a标签，找了span,我们换了标签所以里面的也得换
jsScroll.js
/* jQ向上滚动带上下翻页按钮 */ (function ($) { $.fn.extend({ Scroll: function (opt, callback) { //参数初始化 if (!opt) var opt = {}; var _btnUp = $("#" + opt.up);//Shawphy:向上按钮 var _btnDown = $("#" + opt.down);//Shawphy:向下按钮 var timerID; var _this = this.eq(0).find("ul:first"); var lineH = _this.find("li:first").width(), //获取行高 line = opt.line ? parseInt(opt.line, 10) : parseInt(this.height() / lineH, 10), //每次滚动的行数，默认为一屏，即父容器高度 speed = opt.speed ? parseInt(opt.speed, 10) : 500; //卷动速度，数值越大，速度越慢（毫秒） timer = opt.timer //?parseInt(opt.timer,10):3000; //滚动的时间间隔（毫秒） if (line == 0) line = 1; var upHeight = 0 - line * lineH; //滚动函数 var scrollUp = function () { _btnUp.unbind("click", scrollUp); //Shawphy:取消向上按钮的函数绑定 _this.animate({ marginRight: upHeight }, speed, function () { for (i = 1; i <= line; i++) { _this.find("li:first").appendTo(_this); } _this.css({ marginRight: 0 }); _btnUp.bind("click", scrollUp); //Shawphy:绑定向上按钮的点击事件 }); } //Shawphy:向下翻页函数 var scrollDown = function () { _btnDown.unbind("click", scrollDown); for (i = 1; i <= line; i++) { _this.find("li:last").show().prependTo(_this); } _this.css({ marginRight: upHeight }); _this.animate({ marginRight: 0 }, speed, function () { _btnDown.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.css("cursor", "pointer").click(scrollUp).hover(autoStop, autoPlay);//Shawphy:向上向下鼠标事件绑定 _btnDown.css("cursor", "pointer").click(scrollDown).hover(autoStop, autoPlay); } }) })(jQuery);
这样的效果跟上面的是一样的。根据你的页面进行修改就好了。这个还是蛮好用的。
左右滑动
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。