Jquery实现图片左右滚动，没有头尾的，一直循环

Jquery实现图片左右滚动，没有头尾的，一直循环。这样子的例子我已经发了很多了，这边放两个链接
http://www.corange.cn/archives/2010/06/3654.html
http://www.corange.cn/archives/2010/06/3649.html
http://www.corange.cn/archives/2010/06/3650.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>www.corange.cn</title>
<style type="text/css">

</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
<!--
var SellerScroll = function(options){
this.SetOptions(options);
this.lButton = this.options.lButton;
this.rButton = this.options.rButton;
this.oList = this.options.oList;
this.showSum = this.options.showSum;

this.iList = $("#" + this.options.oList + " > li");
this.iListSum = this.iList.length;
this.iListWidth = this.iList.outerWidth(true);
this.moveWidth = this.iListWidth * this.showSum;

this.dividers = Math.ceil(this.iListSum / this.showSum);//共分为多少块
this.moveMaxOffset = (this.dividers - 1) * this.moveWidth;
this.LeftScroll();
this.RightScroll();
};
SellerScroll.prototype = {
SetOptions: function(options){
this.options = {
lButton: "left_scroll",
rButton: "right_scroll",
oList: "carousel_ul",
showSum: 4//一次滚动多少个items
};
$.extend(this.options, options || {});
},
ReturnLeft: function(){
return isNaN(parseInt($("#" + this.oList).css("left"))) ? 0 : parseInt($("#" + this.oList).css("left"));
},
LeftScroll: function(){
if(this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.lButton).click(function(){
currentOffset = _this.ReturnLeft();
if(currentOffset == 0){
for(var i = 1; i <= _this.showSum; i++){
$(_this.iList[_this.iListSum - i]).prependTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth });
$("#" + _this.oList + ":not(:animated)").animate( { left: "+=" + _this.moveWidth }, { duration: "slow", complete: function(){
for(var j = _this.showSum + 1; j <= _this.iListSum; j++){
$(_this.iList[_this.iListSum - j]).prependTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth * (_this.dividers - 1) });
} } );
}else{
$("#" + _this.oList + ":not(:animated)").animate( { left: "+=" + _this.moveWidth }, "slow" );
}
});
},
RightScroll: function(){
if(this.dividers == 1) return;
var _this = this, currentOffset;
$("#" + this.rButton).click(function(){
currentOffset = _this.ReturnLeft();
if(Math.abs(currentOffset) >= _this.moveMaxOffset){
for(var i = 0; i < _this.showSum; i++){
$(_this.iList[i]).appendTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: -_this.moveWidth * (_this.dividers - 2) });

$("#" + _this.oList + ":not(:animated)").animate( { left: "-=" + _this.moveWidth }, { duration: "slow", complete: function(){
for(var j = _this.showSum; j < _this.iListSum; j++){
$(_this.iList[j]).appendTo($("#" + _this.oList));
}
$("#" + _this.oList).css({ left: 0 });
} } );
}else{
$("#" + _this.oList + ":not(:animated)").animate( { left: "-=" + _this.moveWidth }, "slow" );
}
});
}
};
$(document).ready(function(){
var ff = new SellerScroll();
});
//-->
</script>
</head>
<body>
<div class="con">
<div id="carousel_container">
<div id="left_scroll"></div>
<div id="carousel_inner">
<ul id="carousel_ul">
<li>www.corange.cn</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div id="right_scroll"></div>
</div>
</div>
</body>
</html>

原文地址:http://www.corange.cn/archives/2010/08/3682.html

转载于:https://www.cnblogs.com/zerogo/archive/2010/09/10/1823220.html

Jquery实现图片左右滚动，没有头尾的，一直循环相关推荐

水平滚动选择图片 html,jquery实现图片水平滚动效果代码分享
本文实例讲述了jquery实现图片水平滚动效果,分享给大家供大家参考.具体如下: 运行效果图:-------------------查看效果------------------- 小提示:浏览器中如果 ...
JQuery控制图片无缝滚动
经常有人问怎么在HTML上制作图片的无缝滚动,我自己在一些项目中也会经常用到的,今天花了些时间,上网搜索了一下,下了些源码回来看了一下,发现都是只能在IE下能够滚动的,而且都是光<html> ...
html土图片滚动特效,jQuery实现图片左右滚动特效
本文实例讲述了jQuery合作伙伴左右滚动特效,分享给大家供大家参考,具体如下: 一款基于jQuery合作伙伴左右滚动特效代码,是一款带左右箭头及自动滚动友情链接合作伙伴左右滚动网页特效,鼠标滑过停止 ...
18款非常实用 jquery幻灯片图片切换
1.jquery图片滚动仿QQ商城带左右按钮控制焦点图片切换滚动 jquery图片特效制作仿腾讯QQ商城首页banner焦点图片轮播切换效果,带索引按钮控制和左右按钮控制图片切换. 查看演示>& ...
仿造小红书页面代码html,jQuery仿小红书登录页，背景图垂直循环滚动登录页，向上循环滚动的动画，实现一张背景图片的无缝向上循环js滚动...
jQuery仿小红书登录页,背景图垂直循环滚动登录页,向上循环滚动的动画,实现一张背景图片的无缝向上循环js滚动先看效果图: 图片是gif看着有点卡顿,网页里面其实很流畅的此代码使用CSS3动画实 ...
jquery控制左右箭头滚动图片列表
jquery控制左右箭头滚动图片列表 jquery控制左右箭头滚动图片列表的实例. 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 ...
html图片点击左右滑动效果,基于jquery实现点击左右按钮图片横向滚动
点击左右按钮图片横向滚动jquery,一次滚动四个,图片滚动完成,自动回到第一个版面: 效果图如下: 点击左右按钮图片横向滚动 * { margin:0; padding:0;} body { fon ...
图片轮播php代码下载,jQuery带进度条滚动图片轮播代码
jQuery带进度条滚动图片轮播代码 jQuery带进度条滚动图片轮播代码是一款带左右箭头按钮控制图片滚动轮播,标题和进度条显示效果. $(document).ready(function(e) { ...
jquery图片左右滚动切换js特效
下载地址 jquery图片左右滚动切换特效,左右箭头控制图片滚动的网页特效代码.$(".productshow").xslider({ //.productshow是要移动对象的外 ...

Jquery实现图片左右滚动，没有头尾的，一直循环

Jquery实现图片左右滚动，没有头尾的，一直循环相关推荐

最新文章

热门文章