网站多图背景全自动切换附代码  网站 网站建设 第1张

网站背景图,多张可自行设置图片,自动切换,有喜欢的小伙伴可以看看~

本套代码需要用到jquery-1.2.6.min.js,大家可以在百度上下载到自己本地,也可以是用爱站云的:https://aizhancloud.cn/common/js/jquery-1.2.6.min.js js需要放在head里;

代码如下:

<!--------------------------------------动态背景--------------------------------><!--将本段代码放入网站的head标签中--><script type="text/JavaScript">function slideSwitch() {
    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
    $active.addClass('last-active');
    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 1000, function() {
            $active.removeClass('active last-active');
        });}$(function() {
    setInterval( "slideSwitch()", 5000 );});</script><!--------------------------------------动态背景-------------------------------->

图片代码:

<!--------------------------------------动态背景--------------------------------><div id="slideshow"> <img src="图片地址" alt="" class="active"> <img src="图片地址" alt="" />...<!--想展示多少条图片  就设置多少条--></div><!--------------------------------------动态背景-------------------------------->

css代码:

#slideshow {
    position: relative;
    height: 100%;
    z-index: -1;}#slideshow IMG {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8;
    opacity: 0.0;}#slideshow IMG.active {
    z-index: 10;
    opacity: 1.0;}#slideshow IMG.last-active {
    z-index: 9;}#slideshow img {
    min-height: 100%;
    min-width: 1024px;
    width: 100%;
    height: auto;
    position: fixed;
    top: 0;
    left: 0;}

好了,这样就设置好了动态背景了,若配置过程中出现问题或者不懂如何配置可以联系爱站云进行付费操作哟!