图片切换，简单易操作

Html

Css

#gallery {
	position:relative;
	height:360px
}
#gallery a {
	float:left;
	position:absolute;
}
#gallery a img {
	border:none;
}
#gallery .caption {
	z-index:600;
	background-color:#000;
	color:#ffffff;
	height:50px;
	width:100%;
	position:absolute;
	bottom:0;
}
#gallery .caption .content {
	margin:5px
}
#gallery .caption .content h3 {
	margin:0;
	padding:0;
	color:#1DCCEF;
}

$(document).ready(function() {

//Execute the slideShow
    slideShow();

});

function slideShow() {

//Set the opacity of all images to 0
    $('#gallery a').css({
        opacity: 0.0
    });

//Get the first image and display it (set it to full opacity)
    $('#gallery a:first').css({
        opacity: 1.0
    });

//Set the caption background to semi-transparent
    $('#gallery .caption').css({
        opacity: 0.7
    });

//Resize the width of the caption according to the image width
    $('#gallery .caption').css({
        width: $('#gallery a').find('img').css('width')
    });

//Get the caption of the first image from REL attribute and display it
    $('#gallery .content').html($('#gallery a:first').find('img').attr('rel'))
        .animate({
            opacity: 0.7
        }, 400);

//Call the gallery function to run the slideshow, 6000 = change to next image after 6 seconds
    setInterval('gallery()', 3000);

}

function gallery() {

//if no IMGs have the show class, grab the first image
    var current = ($('#gallery a.show') ? $('#gallery a.show') : $('#gallery a:first'));

//Get next image, if it reached the end of the slideshow, rotate it back to the first image
    var next = ((current.next().length) ? ((current.next().hasClass('caption')) ? $('#gallery a:first') : current.next()) : $('#gallery a:first'));

//Get next image caption
    var caption = next.find('img').attr('rel');

//Set the fade in effect for the next image, show class has higher z-index
    next.css({
            opacity: 0.0
        })
        .addClass('show')
        .animate({
            opacity: 1.0
        }, 1000);

//Hide the current image
    current.animate({
            opacity: 0.0
        }, 1000)
        .removeClass('show');

//Set the opacity to 0 and height to 1px
    $('#gallery .caption').animate({
        opacity: 0.0
    }, {
        queue: false,
        duration: 50
    }).animate({
        height: '1px'
    }, {
        queue: true,
        duration: 100
    });

//Animate the caption, opacity to 0.7 and heigth to 100px, a slide up effect
    $('#gallery .caption').animate({
        opacity: 0.7
    }, 50).animate({
        height: '50px'
    }, 300);

//Display the content
    $('#gallery .content').html(caption);
}

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

图片切换，简单易操作



代码描述：图片切换，简单易操作，兼容ie7，IE8

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

HXuan

相关代码

图片切换，简单易操作

最新