/**
图片滚动_王志强 2014-2-1
**/
var ImageScroll = function (area, imgList, order, options) {
this._init(area, imgList, order, options);
};
ImageScroll.prototype = {
_init: function (area, imgList, order, options) {
var self = this;
self.area = $$O.byId(area); self.imgList = $$O.byId(imgList); self.order = $$O.byId(order);
self._setOptions(options);
self.speed = self.options.speed;
self.step = self.options.step;
self.curIndex = 0;
self.time = null;
self.isMove = false;
self.imgNum = $(self.imgList).find("li").length;
for (var i = 1; i <= self.imgNum; i++) { $(self.order).append("<li>" + i + "</li>"); }
$(self.order).find("li").eq(0).addClass("on");
$(self.order).find("li").live("click", function () { self._cur(this); });
$(self.area).live("mouseover", function () { clearInterval(self.time); });
$(self.area).live("mouseout", function () {
self.time = setInterval(function () {
if (!self.isMove) { self._run(); }
}, self.speed);
});
$(self.area).find("ul li").css({ "float": "left" });
self.step = self.step != 0 ? self.step : $(self.area).find("ul li").eq(0).width();
$(self.area).find("ul").css({ "width": self.imgNum * self.step });
},
_start: function () {
var self = this;
self.time = setInterval(function () {
self._run();
}, self.speed);
},
_run: function () {
var self = this;
if (self.curIndex < self.imgNum - 1) {
self.curIndex++;
self._on(self.curIndex);
$(this.imgList).animate({ marginLeft: -this.curIndex * this.step }, 500)
} else {
self.curIndex = 0;
self._on(0);
$(this.imgList).animate({ marginLeft: 0 }, 1)
}
},
_cur: function (e) {
var self = this;
self.curIndex = $(e).index();
self._on(self.curIndex);
$(this.imgList).animate({ marginLeft: -this.curIndex * this.step }, 1)
},
_on: function (index) {
$(this.order).find("li").eq(index).addClass("on").siblings("li").removeClass("on");
},
_setOptions: function (options) {
this.options = {
speed: 1, //滚动速度
step: 0 //改变量
};
$.extend(this.options, options || {});
}
}
<!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>
<title></title>
<style type="text/css">
.area
{
width: 350px;
height: 220px;
overflow: hidden;
border: solid 1px #ccc;
position: relative;
}
.area ul
{
padding: 0px;
margin: 0px;
}
.area ul li
{
position: relative;
margin-bottom: 0px;
list-style: none;
}
.area ul li, .area ul li img
{
width: 350px;
height: 220px;
_display: inline;
}
.op li
{
list-style: none;
}
.order
{
position: absolute;
right: 5px;
bottom: -6px;
font: 12px/1.5 tahoma, arial;
height: 18px;
}
.order li
{
list-style: none;
float: left;
color: #d94b01;
text-align: center;
line-height: 16px;
width: 16px;
height: 16px;
font-family: Arial;
font-size: 11px;
cursor: pointer;
margin-left: 3px;
border: 1px solid #f47500;
background-color: #fcf2cf;
}
.order li.on
{
line-height: 18px;
width: 18px;
height: 18px;
font-size: 14px;
margin-top: -2px;
background-color: #ff9415;
font-weight: bold;
color: #FFF;
}
#imageList
{
margin-left: -0px;
}
</style>
</head>
<body>
<div id="dvArea" class="area">
<ul class="op" id="imageList">
<li>
<img src="../../images/Chrysanthemum.jpg" /></li>
<li>
<img src="../../images/Desert.jpg" /></li>
<li>
<img src="../../images/Hydrangeas.jpg" /></li>
<li>
<img src="../../images/Jellyfish.jpg" /></li>
</ul>
<p class="order" id="order">
</p>
</div>
</body>
<script src="../../js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="../../js/jone.js" type="text/javascript"></script>
<script src="ImageScroll.js" type="text/javascript"></script>
<script type="text/javascript">
function a() {
//document.getElementById("order").on
}
var _imgScroll = new ImageScroll("dvArea", "imageList", "order", { "speed": 2000, "side": "left" });
_imgScroll._start();
</script>
</html>
