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;
}
<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;
}