点击向右向左，中间的内容滑动。
这里介绍的是一个插件。
效果图：
当点击向右：
这里只是举列子，为了看明白过程，这的宽度给的很大，写的只是数字。
这个具体可以用来干什么，我们可以把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="javascript:void(0)" id="but_down" class="icon lt">向左</a> <a href="javascript:void(0)"
id="but_up" class="icon gt">向右</a>
<div id="scrollDiv" class="wrap"> <%--可以看到的宽度--%>
<span id="SpanTab" class="span_tab"> <%-- 里面--%>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">6</a>
<a href="#">7</a>
</span>
</div>
js:
<script src="../js/jquery-1.11.0.min.js"></script>
<script src="../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="../js/jquery-1.11.0.min.js"></script>
<script src="../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);
这样的效果跟上面的是一样的。根据你的页面进行修改就好了。这个还是蛮好用的。
时间： 2024-11-10 14:17:52