Question

好吧，我有这个滑块工作的＆＃39;与parallax content slider！我希望将图像放在文本的位置，反之亦然！我来改变它但是当我转到下一个滑块时它会返回初始位置！

.da-slide-current .da-img {
    left: 10%;
    opacity: 1;
}

jsfiddle
我能做到的任何方式吗？非常感谢。

Answer 1

你可以玩div位置：

<html lang="en" class=" js cssanimations csstransitions"><head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <title>Parallax Content Slider with CSS3 and jQuery</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <meta name="description" content="Parallax Content Slider with CSS3 and jQuery">
        <meta name="keywords" content="slider, animations, parallax, delayed, easing, jquery, css3, kendo UI">
        <meta name="author" content="Codrops">
        <base href="http://tympanus.net/Development/ParallaxContentSlider/" />
        <link rel="shortcut icon" href="../favicon.ico"> 
        <link rel="stylesheet" type="text/css" href="css/demo.css">
        <link rel="stylesheet" type="text/css" href="css/style.css">
        <script type="text/javascript" src="js/modernizr.custom.28468.js"></script>
        <link href="http://fonts.googleapis.com/css?family=Economica:700,400italic" rel="stylesheet" type="text/css">
        <noscript>
            &lt;link rel="stylesheet" type="text/css" href="css/nojs.css" /&gt;
        </noscript>
    </head>
    <body>
        <div class="container">
            <div id="da-slider" class="da-slider" style="position:relative;">
                <div class="da-slide da-slide-current"  >
                    <h2 style="position:absolute;top:50%;">Warn WWelcome</h2>
                    <p  style="position:absolute;top:25%;">When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane.</p>
                    <div class="da-img"><img src="images/1.png" alt="image01"></div>
                </div>
                <div class="da-slide"  >
                    <h2 style="position:absolute;top:50%;">Easy management</h2>
                    <p style="position:absolute;top:25%;">Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>

                    <div class="da-img"><img src="images/2.png" alt="image01"></div>
                </div>
                <div class="da-slide"  >
                    <h2 style="position:absolute;top:50%;">Revolution</h2>
                    <p style="position:absolute;top:25%;">A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.</p>

                    <div class="da-img"><img src="images/3.png" alt="image01"></div>
                </div>
                <div class="da-slide"  >
                    <h2 style="position:absolute;top:50%;">Quality Control</h2>
                    <p style="position:absolute;top:25%;">Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>

                    <div class="da-img"><img src="images/4.png" alt="image01"></div>
                </div>
                <nav class="da-arrows">
                    <span class="da-arrows-prev"></span>
                    <span class="da-arrows-next"></span>
                </nav>
            <nav class="da-dots"><span class="da-dots-current"></span><span></span><span></span><span></span></nav></div>
        </div>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery.cslider.js"></script>
        <script type="text/javascript">
            $(function() {

                $('#da-slider').cslider();

            });
        </script>    

</body></html>

http://jsfiddle.net/YakV7/36/

jQuery - 更改文本滑块的位置

1 个答案: