Question

enter image description here

有人可以帮助我吗？我想为我的网站创建这种类型的图像滑块。但问题是我看过这样的菜单，但没有幻灯片。

请给我一些制作幻灯片的指南。

谢谢我的朋友们。

我不是jquery的天才..所以我只是尝试做一些事情，但没有工作..

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>

#slideshow {
    position:relative;
    height:350px;
}

#slideshow IMG {
    position:absolute;
    top:0;
    left:0;
    z-index:8;

}

#slideshow IMG.active {
    z-index:10;
}

#slideshow IMG.last-active {
    z-index:9;
}
</style>
<script src="jquery-1.10.2.js"></script>
<script>

    function slideSwitch() {

    var $active = $('#slideshow IMG.active');
    if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
        var $next =  $active.next().length ? $active.next()
        : $('#slideshow IMG:first');
        $active.addClass('last-active');

        $next.css({width: 0})
        .addClass('active')
        .animate({width: 376}, 1000, function() {
            $active.removeClass('active last-active');
        });
}

$(function() {
    setInterval( "slideSwitch()", 5000 );
});


</script>

</head>

<body>
<div id="slideshow">

       <img src="images(1).jpg" alt="" height="134" class="active">
        <img src="images.jpg" alt="" height="134">
        <img src="3.jpg" alt="" height="134">
        <img src="4.jpg" alt="" height="134">
        <img src="5.jpg" alt="" height="134">
        <img src="6.jpg" alt="" height="134">

    </div>
</body>
</html>

Answer 1

为幻灯片使用以下html

<div id="one">
            <ol>
                <li>
                    <h2><span>Slide One</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/1.jpg" alt="image" />
                            <figcaption class="ap-caption">Slide One</figcaption>
                        </figure>
                    </div>
                </li>
                <li>
                    <h2><span>Slide Two</span></h2>
                    <div>
                        <figure>
                            <img src="img-demo/2.jpg" alt="image" />
                            <figcaption class="ap-caption">Slide Two</figcaption>
                        </figure>
                    </div>
                </li>
    </ol>
</div>

<强> JS

$('#one').liteAccordion({
                        onTriggerSlide : function() {
                            this.find('figcaption').fadeOut();
                        },
                        onSlideAnimComplete : function() {
                            this.find('figcaption').fadeIn();
                        },
                        autoPlay : true,
                        pauseOnHover : true,
                        theme : 'stitch',
                        rounded : true,
                        enumerateSlides : true
                }).find('figcaption:first').show();

检查JS小提琴http://jsfiddle.net/raunakkathuria/7rK6c/

您可以查看更多文档http://nicolahibbert.com/demo/liteAccordion/

水平滑动菜单类型图像滑块

1 个答案: