滚动-广告图

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

posted on 2014-03-27 22:47 朝着阅读(176) 评论(0) 收藏举报