jquery 背景图幻灯片

转载 2013年12月04日 17:28:20

从有利网banner上扒下来的,这个不错,做个例子,你懂得。。。

http://www.yooli.com/

<!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>


相关文章推荐

通过Jquery实现背景图的轮换

本文主要使用Jquery实现背景图的缓慢显隐,变换。

jquery切换背景图源码

  • 2013年05月23日 14:21
  • 583KB
  • 下载

jquery根据数据显示不同背景图效果

*{margin:0;padding: 0;} li{list-style: n

wpf,切换背景图

  • 2017年08月06日 10:37
  • 4.62MB
  • 下载

ppt素材 背景图

  • 2016年11月28日 00:02
  • 34.39MB
  • 下载

html 背景图自适应实例(css 利用position:absolute)

之前因为这个背景放大缩小问题困扰几天,随后找了很多方资料才解决...    这次把他记录下来,事出仓促就直接放自己的代码了,效果图如下。 代码: ...

制作背景图

  • 2013年03月29日 10:53
  • 1.55MB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:jquery 背景图幻灯片
举报原因:
原因补充:

(最多只允许输入30个字)