教程集 www.jiaochengji.com
教程集 >  脚本编程  >  javascript  >  正文 js轮播图片滚动的实例代码

js轮播图片滚动的实例代码

发布时间:2014-12-16   编辑:jiaochengji.com
用js代码实现JS简单的轮播的图片滚动,供大家学习参考。

代码如下:
 

复制代码 代码示例:
<script>
//图片轮播滚动
var forimg = function (foritem, hoverStop, defaultfor) {
var _foritem = foritem.constructor == jquery ? foritem : $(foritem);
var imgarr = [
{ "z-index": 1, "width": 100, "height": 100, "left": 0, "top": "75px" },
{ "z-index": 2, "width": 200, "height": 200, "left": 50, "top": "25px" },
{ "z-index": 3, "width": 300, "height": 250, "left": 150, "top": "0" },
{ "z-index": 2, "width": 200, "height": 200, "left": 370, "top": "25px" },
{ "z-index": 1, "width": 100, "height": 100, "left": 520, "top": "75px" }
];
_foritem.each(function (i) {
var _this = $(this);
_this.css(imgarr[i] || imgarr[4]);
_this.find("img").css(imgarr[i] || imgarr[4]);
}); www.jiaochengji.com
var _for = function (_i, data, nulldata, callback) {
$(foritem).each(function (i) {
var self = $(this);
setTimeout(function () {
self.css("z-index", (data[i + _i] || nulldata)["z-index"])
self.stop().animate(data[i + _i] || nulldata);
self.find("img").stop().animate(data[i + _i] || nulldata, function () {
callback.call(self, i);
});
});
});
};
var that = this;
var defaultforfun = function () {
if (!defaultfor) {
that.leftfor();
} else {
that.rightfor();
}
}
var forimgInterval = setInterval(defaultforfun, 1000);
if (hoverStop) {
_foritem.hover(function () {
clearInterval(forimgInterval);
}, function () {
forimgInterval = setInterval(defaultforfun, 1000);
});
}
this.leftfor = function () {
var nuldata = { "z-index": -1, "width": 100, "height": 100, "left": 520, "top": "75px" };
imgarr[0]["z-index"] = 1;
imgarr[0]["z-index"] = 2
imgarr[0]["z-index"] = 3
imgarr[0]["z-index"] = 2
imgarr[0]["z-index"] = 1
_for(-1, imgarr, nuldata, function (i) {
if (i == 0) {
this.closest("ul").append(this);
}
});
};
this.rightfor = function () {
var nuldata = { "z-index": -1, "width": 100, "height": 100, "left": 0, "top": "75px" };
imgarr[0]["z-index"] = 1;
imgarr[0]["z-index"] = 2
imgarr[0]["z-index"] = 4
imgarr[0]["z-index"] = 5
imgarr[0]["z-index"] = 2
_for(1, imgarr, nuldata, function (i) {
if (i == _foritem.length - 1) {
this.closest("ul").prepend(this);
this.css("z-index", "1");
}
});
};
this.stop = function () {
clearInterval(forimgInterval);
};
this.next = function () {
forimgInterval = setInterval(defaultforfun, 1000);
};
};
</script>

您可能感兴趣的文章:
Js 图片滚动的实现方法
jQuery 幻灯片插件(带缩略图功能)
js轮播图片滚动的实例代码
JS滚轮事件onmousewheel的用法
JQuery 图片滚动轮播示例代码
js图片轮换代码 js图片轮播简单示例
基于jquery的图片轮播 tab切换组件
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
基于jQuery的仿flash的广告轮播代码
基于jQuery的仿flash的广告轮播

关键词: 图片滚动  图片轮播   
[关闭]
~ ~