返回顶部

收藏

jquery实现简单的单张图片切换效果

更多
//代码片段(复制即可使用):
<style>
.slidePanel{

}
.sildeContainer{
    display:block;
    width:300px;
    height:300px;
    overflow: hidden;
}
.sildeContainer ul{
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    width: 5000px;
}
.sildeContainer ul li{
    float: left;
    width:300px;
    height:300px;
}
.sildeContainer ul li img{
    width: 300px;
    height:300px;
}
</style>

<div id="slidePanel" class="slidePanel">
<div class="sildeContainer">
<ul class="slideList">
<li><img src="images/1364791236f951.jpg"/></li>
<li><img src="images/136479026399c7.jpg"/></li>
<li><img src="images/13647951670de4.jpg"/></li>
<li><img src="images/136479616600ee.jpg"/></li>
<li><img src="images/1364795402308b.jpg"/></li>
<li><img src="images/1364791236f951.jpg"/></li>
<li><img src="images/13647982102730.jpg"/></li>
<li><img src="images/1364791236f951.jpg"/></li>
</ul>
</div>
<div class="sildeNav"><a href="javascript:;" class="J_slidePre">上一个</a><a href="javascript:;" class="J_sildeNext">下一个</a></div>
</div>
<script>
    window.slide = (function () {
        function _scrollPanel(obj) {
            this.cur_index = 0;
            this.offset = 300;
            this.itemnum = 0;
            this.target = null;
            this.target = obj.target;
            this._init();
        }
        _scrollPanel.prototype._init = function () {
            var _this = this;
            this.itemnum = $(".slideList li", _this.target).length;
            $(".J_slidePre", _this.target).click(function () {
                _this.cur_index = _this.cur_index > 0 ? (_this.cur_index - 1) : (_this.itemnum - 1);
                $(".slideList", _this.target).animate({
                    marginLeft: -1 * _this.cur_index * _this.offset
                }, "normal");
            });
            $(".J_sildeNext", _this.target).click(function () {
                _this.cur_index = _this.cur_index < (_this.itemnum - 1) ? (_this.cur_index + 1) : 0;
                $(".slideList", _this.target).animate({
                    marginLeft: -1 * (_this.cur_index) * _this.offset
                }, "normal");
            });
        }
        return {
            scrollPanel: _scrollPanel
        }
    })();
    new window.slide.scrollPanel({ target: $("#slidePanel") });
</script>
//该片段来自于http://outofmemory.cn

标签:jquery,javascript,网页设计

收藏

0人收藏

支持

0

反对

0

发表评论