0

有谁知道如何创建一个可以覆盖内容的图像幻灯片滑块，这可能听起来很简单，但这就是我在Srpout 主题主题森林之后所追求 的，包括更改幻灯片图像的能力？我已经尝试过cycle.js，但我不能完全得到中心：

            jQuery(function() {
                jQuery("#slideshow").cycle({
                    fx: 'fade',
                    pause: 1,
                    speed: 1800,
                    timeout: 3500
                });
            });

html:

            <body>

                <div id="header-wrap">

                    <div id="header">

                        <div id="backrgound-slider"><?php get_template_part( 'background', 'slider' ); ?></div>

                        <div id="slideshow" class="bgSlider">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/k2-in-skies.jpg" class="bgimage" width="2000" height="1500" alt="Slide 1">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/k2.jpg" class="bgimage" width="2000" height="1500" alt="Slide 2">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/kunhar-river.jpg" class="bgimage" width="2000" height="1500" alt="Slide 3">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/mitre-peak-baltoro.jpg" class="bgimage" width="2000" height="1500" alt="Slide 4">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/musa-ka-musalla.jpg" class="bgimage" width="2000" height="1500" alt="Slide 5">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/nanga-parbat.jpg" class="bgimage" width="2000" height="1500" alt="Slide 6">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/naran-valley.jpg" class="bgimage" width="2000" height="1500" alt="Slide 7">
                            <img src="<?php bloginfo('stylesheet_directory'); ?>/images/shugran.jpg" class="bgimage" width="2000" height="1500" alt="Slide 8">
                        </div>


                        <div id="title">
                            <h1 id="logo">logo</h1>

                            <h2 id="tagline"></h2>

                        </div>

            <!--and so on -->

CSS：

                #slideshow, img.bgimage {
                        width: 2000px;
                        height: 640px;
                        position: relative;
                        top: 0;
                        z-index:-9999;
                    left: -500px;
                }

谢谢

4

0 回答 0