jQuery时显示div(在幻灯片上)身体背景图像淡入淡出效果的变化

时间:2013-08-30 07:16:10

标签: javascript jquery html css

滑块(jquery.bxslider)Sample Pic

我想要实现的是当它滑动一个div时,“身体”背景图像在淡入淡出过渡中变化,对于主题类别有用,我是jquery的新手,但我不知所措,所以任何感谢帮助

这是我目前的代码

<head>
    <meta charset="utf-8">
    <title>Welcome Page Ver.2</title>
    <!-- jQuery library (served from Google) -->
    <script src="scripts/1.4/jquery.min.js"></script>
    <script src="scripts/jquery.min.js"></script>
    <script src="scripts/plugins/jquery.easing.1.3.js"></script>
    <!-- bxSlider Javascript file -->
    <script src="scripts/jquery.bxslider.min.js"></script>
    <script type="text/javascript" src="scripts/nav.js"></script>
    <script type="text/javascript" src="scripts/tinybox.js"></script>
    <!-- bxSlider CSS file -->
    <link href="jquery.bxslider.css" rel="stylesheet" />
    <link href="my.css" rel="stylesheet" />
</head>
<body>
    <div class="slider1">
        <div class="slide">1</div>
        <div class="slide">2</div>
        <div class="slide">3</div>
        <div class="slide">3</div>
    </div>
    <script>
        $(document).ready(function () {
            $('.slider1').bxSlider({
                slideWidth: 5000,
                minSlides: 1,
                maxSlides: 1,
                slideMargin: 10,
                infiniteLoop: true,
                hideControlOnEnd: false,
                mode: 'horizontal',
                useCSS: false,
                easing: 'easeOutElastic',
                speed: 2000
            });
        });
    </script>
</body>

我添加了一些示例图片

1 个答案:

答案 0 :(得分:0)

mode:设置为'fade'有关更多选项,请参阅bxSlider documentation