背景图片切换效果

来源：互联网发布：pptv网络电视官方编辑：程序博客网时间：2024/05/16 10:07

HTML代码：
<script src="http://blog.163.com/chen_hui/blog/js/jquery.js" type="text/javascript"></script>
<script src="http://blog.163.com/chen_hui/blog/js/jquery.cycle.all.js" type="text/javascript"></script>

<div id="bg-wrapper">
            <a href="http://blog.163.com/chen_hui/blog/#">aa<div class="bg1" style=" background: url(images/body-bg.jpg) no-repeat scroll center top transparent" id="con_tophome_1">
            </div></a>
            <a href="http://blog.163.com/chen_hui/blog/#"><div class="bg2" style=" background: url(images/qiqi2-bg.jpg) no-repeat scroll center top transparent" id="con_tophome_2">
            </div></a>
            <a href="http://blog.163.com/chen_hui/blog/#"><div class="bg3" style=" background: url(images/body-bg.jpg) no-repeat scroll center top transparent" id="con_tophome_3">
            </div></a>
            <a href="http://blog.163.com/chen_hui/blog/#"><div class="bg4" style=" background: url(images/qiqi2-bg.jpg) no-repeat scroll center top transparent" id="con_tophome_4">
            </div></a>
        </div>
JQ代码：

var $jts = jQuery.noConflict();
        $jts(function () {
            // background cycle
            $jts('#bg-wrapper').cycle({
                fx: 'fade',
                speed: 'slow',
                timeout: 7000,
                cleartype: true,
                cleartypeNoBg: true,
                startingSlide: 0
            });
        });

CSS代码：

/***图片切换***/
#bg-wrapper { width:100%; position:absolute; top:0; z-index:-1; height:700px}
#bg-wrapper a{width:100%;}
#bg-wrapper div {
    background-position: center top !important;
    background-repeat: no-repeat !important;
    height: 700px !important;
    min-height: 700px !important;
    position:absolute;
    top: 0;
    width: 100% !important;
    z-index: -1;
}

0 0