/** 图片滚动_王志强 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>