当前位置:首页 > 转自点点  >> 简单jQuery图片轮换
18日

简单jQuery图片轮换

作者:皇家元林 时间:2013年04月18日 围观者: 440 人 【0条评论】

这种图片轮换的东西应该还是用的比较多的,最近写的侧边栏tab轮换、图片轮换方法都一样,有需求的就看看吧。
演示地址:http://mufeng.me/demo/imgroll

First Picture Second Picture Last  Picture
jQuery(document).ready(function($) {
    // 给#slider>a 加一个class
    $('#slider a').addClass('img');
     
    // 添加控制部分
    $('#slider').append('');
     
    var _a = $('#slider a.img'),
        _img = $('#slider a.img img');  
     
    // 将图片标题提取出来
    _a.each(function() {
        var _this = $(this),
            // a标题不存在, 就采用img的alt
            title = _this.attr("title") != "" ? _this.attr("title") : (_this.children('img').attr('alt') != "" ? _this.children('img').attr('alt') : ""),
            href = _this.attr('href');
        $('#slider-title').append('' + title + '');
    });
    var _atitle = $('#slider-title a'),
        _sleft = $('#slider-left'),
        _sright = $('#slider-right'),
        _atTimer, _atAuto = function() {
            _sright.click()
        };
    // 图片数量>0
    if (_img.length > 0) {
        var nimg = new Image();
        nimg.onload = function() {
            // 第一幅图加载完成之后执行以下动作
            _a.eq(0).fadeIn().addClass('current');
            _atitle.eq(0).addClass('current').stop().animate({
                bottom: 0
            }, 200);
            _atTimer = setInterval(_atAuto, 2000);
        }
        nimg.src = _img.eq(0).attr('src');
     
        // 右按钮
        _sright.click(function(e) {
            e.preventDefault();
            var _this = $(this),
                _imgNow = $('#slider a.img.current'),
                _aNow = $('#slider-title a.current'),
                _index = _a.index(_imgNow),
                n = _index < (_img.length - 1) ? (_index + 1) : 0,
                _imgNext = _a.eq(n),
                _aNext = _atitle.eq(n);
            _imgNow.removeClass('current').fadeOut(300);
            _imgNext.addClass('current').fadeIn(300);
            _aNow.removeClass('current').stop().animate({
                bottom: 12
            }, 300, function() {
                $(this).css("bottom", -12)
            });
            _aNext.addClass('current').stop().animate({
                bottom: 0
            }, 300);
        });
     
        // 左按钮
        _sleft.click(function(e) {
            e.preventDefault();
            var _this = $(this),
                _imgNow = $('#slider a.img.current'),
                _aNow = $('#slider-title a.current'),
                _index = _a.index(_imgNow),
                n = _index > 0 ? (_index - 1) : (_img.length - 1),
                _imgNext = _a.eq(n),
                _aNext = _atitle.eq(n);
            _imgNow.removeClass('current').fadeOut(300);
            _imgNext.addClass('current').fadeIn(300);
            _aNow.removeClass('current').stop().animate({
                bottom: -12
            }, 300);
            _aNext.addClass('current').css("bottom", 12).stop().animate({
                bottom: 0
            }, 300);
        });
     
        // 鼠标hover状态下停止自动播放
        $('#slider').hover(
        function() {
            clearInterval(_atTimer);
            _atTimer = null;
        }, function() {
            clearInterval(_atTimer);
            _atTimer = null;
            _atTimer = setInterval(_atAuto, 2000);
        })
    }
});

转自http://mufeng.me/imgroll.html

标签:, ,

Leave a Reply



2762