从有利网banner上扒下来的，这个不错，做个例子，你懂得。。。
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=9, IE=8, chrome=1">
<title>背景图幻灯片</title>
<script src="YooLi.com_files/jquery-1.8.3.min.js" type="text/javascript"></script>
<style type="text/css">
.slider-index,.gain-items,.slider-updown,.slider li a{min-width:1000px;width:1000px;margin:0 auto;position:relative}
.slider-items{width:100%;height:330px;overflow:hidden;position:relative}
.slider{width:100%;min-width:1000px;height:330px;position:absolute;left:0;top:0;overflow:hidden;display:none}
.slider li{width:100%;height:330px;overflow:hidden;position:absolute;left:0;top:0;display:none}
.slider li a{display:block;text-indent:-9999em;overflow:hidden;height:330px}
.slider-index .items{height:20px;position:absolute;left:0;bottom:10px}
.slider-index li{float:left;display:inline;margin-right:7px;width:20px;height:20px;line-height:20px;text-align:center;cursor:pointer;background:#ecf2f7;border-radius:20px}
.slider-index li.current{background:#15456f;color:#fff}
.slider-updown .button{width:30px;height:30px;background:#900;position:absolute;top:-90px}
.slider-updown .prev{left:0}.slider-updown .next{left:100px}
.gain{width:320px;height:270px;overflow:hidden;position:absolute;right:0;top:-600px}
.gain .opacity{width:320px;height:270px;position:absolute;left:0;top:0;z-index:1;background:#000;opacity:0.5}
.gain-cont a,.gain-cont a:visited{color:#fff;text-decoration:underline}
.gain-cont a:hover{text-decoration:none}
.gain-cont{position:relative;z-index:5;color:#fff;padding:0 35px}
.gain-cont .light-fc{color:#fc8026;font-family:Tahoma,Geneva,sans-serif}
.gain-cont em{color:#fc8026;font-size:20px;font-family:Tahoma,Geneva,sans-serif}
.gain-cont h2{font-size:18px;padding-top:15px;font-weight:normal}
.gain-cont .f{color:#fc8026;font-size:34px;height:50px;line-height:50px;overflow:hidden;font-family:Tahoma,Geneva,sans-serif}
.gain-cont .f em{font-size:40px}
.gain-cont .reg{height:46px;padding:10px 0 5px}
.gain-cont .reg a{height:46px;line-height:46px;display:block;text-align:center;font-size:18px;background:#fc8026;text-decoration:none}
.gain-cont .tar{text-align:right;padding-bottom:25px;margin-top:7px}
</style>
</head>
<body>
<div class="slider-wrap">
<div class="slider-items" style="position: relative; overflow: hidden;">
<ul class="slider" id="slider" style="display: block;">
<li data-opacity="0.1" style="background-image: url(http://www.yooli.com/v2/local/img/banner/banner2.jpg); background-color: rgb(1, 46, 89); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"><a href="/static/expert/"></a></li>
<li data-opacity="0.2" style="background-image: url(http://www.yooli.com/v2/local/img/banner/banner5.jpg); background-color: rgb(94, 5, 0); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"><a href="/event/financing/"></a></li>
<li data-opacity="0.3" style="background-image: url(http://www.yooli.com/v2/local/img/banner/banner6.jpg); background-color: rgb(246, 122, 22); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"><a href="/post/detail/75.html"></a></li>
<li data-opacity="0.4" style="background-image: url(http://www.yooli.com/v2/local/img/banner/banner3.jpg); background-color: rgb(231, 219, 205); display: none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"><a href="/invest/"></a></li>
<li data-opacity="0.5" style="background-image: url(http://www.yooli.com/v2/local/img/banner/banner1.jpg); background-color: rgb(187, 195, 221); display:none; background-position: 50% 50%; background-repeat: no-repeat no-repeat;"><a href="/static/guidelines/"></a></li>
</ul>
</div>
</div>
<div class="gain-items">
<div class="gain" id="userGain" style="z-index: 9; top: -300px; right: 0px;">
<div class="gain-cont">
<h2>这里有个美女</h2>
<p class="f">
<em>12.</em>12%
</p>
<p><em>30</em> 阳光受属性帅哥<span class="light-fc"><em>3</em>.27</span> 腹黑攻帅哥 </p>
<p class="reg"><a href="/secure/register/">进来看看</a></p>
<p class="tar">已有账号? <a href="/secure/login/">立即登录</a></p>
</div>
<div class="opacity" style="opacity: 0.4;"></div>
</div>
</div>
<script type="text/javascript">
$(function(){
slideSwitch();
userGain();
});
function userGain() {
var gain = $('#userGain');
gain.wrap('<div class="gain-items"></div>').css('z-index', 9);
setTimeout(function() {
gain.animate({
top: -290,
right: 0
},
800).animate({
top: -300,
right: 0
},
800)
},
800)
};
function slideSwitch() {
var stay = 6;
var fade = 0.7;
var msec = 1000;
var timer = 400;
var timeout;
var prev = next = 0;
var slider = $('#slider');
var slideindex = true;
var controls = false;
var html = '';
var term = slider.children('li');
var len = term.length;
slider.wrap('<div class="slider-items"></div>');
if (slideindex) {
if (len > 1) {
html += '<div class="slider-index">';
html += '<ol class="items">';
for (var i = 1; i <= len; i++) {
html += '<li ' + (i == 1 ? 'class="current"': '') + '>' + i + '</li>'
};
html += '</ol>';
html += '</div>'
}
};
if (controls) {
html += '<div class="slider-updown">';
html += '<a href="#" class="button prev" data-rel="prev">prev</a>';
html += '<a href="#" class="button next" data-rel="next">next</a>';
html += '</div>'
};
slider.parent('.slider-items').wrap('<div class="slider-wrap"></div>').css({
'position': 'relative',
'overflow': 'hidden'
}).after(html);
var thumbCont = slider.parent().siblings('.slider-index');
var thumb = thumbCont.find('li');
var button = slider.parent().siblings('.slider-updown');
slider.fadeIn();
if (len == 1) {
term.first().fadeIn()
};
button.find('.button').bind('click',
function() {
var self = $(this).attr('data-rel');
if (self == 'prev') {
if (prev == 0) {
next = len - 1
} else {
next = prev - 1
}
} else if (self == 'next') {
if (prev == len - 1) {
next = 0
} else {
next = prev + 1
}
};
autoPlay();
return false
});
thumb.bind('click',
function() {
next = thumb.index($(this));
clearTimeout(timeout);
changePlay(next);
if (next == len - 1) {
next = 0
} else {
next++
}
});
slider.hover(function() {
clearTimeout(timeout)
},
function() {
if (len > 1) {
timeout = setTimeout(autoPlay, stay * msec)
}
});
var changePlay = function(next) {
term.eq(prev).fadeOut(fade * msec);
term.eq(next).fadeIn(fade * msec);
thumb.removeClass('current');
thumb.eq(next).addClass('current');
if (typeof($('#userGain')[0]) != '') {
$('#userGain').find('.opacity').css({
opacity: term.eq(next).attr('data-opacity')
})
};
prev = next
};
var autoPlay = function() {
clearTimeout(timeout);
changePlay(next);
next = prev + 1;
if (next >= len) {
next = 0
};
timeout = setTimeout(autoPlay, stay * msec)
};
if (len > 1) {
autoPlay()
}
};
</script>
</body>
</html>
1860
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
