元素之间交叉褪色

Question

我需要帮助的是非常直接的，我希望你可以帮助我。

我所拥有的是一个jcarousel滚动缩略图轮播，其中添加了幻灯片。 单击滚动条中的某个滚动缩略图时，它会向右显示较大的图像。我的脚本运行完美，这不是问题。我需要帮助的是，我想在点击缩略图后向右侧显示的图像添加交叉淡入淡出过渡。我附上了我工作的原始代码和我页面上自己的代码的链接。 原始代码可在此处找到：http://www.queness.com/resources/html/jcarousel/index.html

我认为这可以通过css和jquery与旋转木马卷轴和主要幻灯片元素的li元素来完成。我只是不确定，任何帮助将被赞赏指出我正确的方向。这是我网页上的代码。

/////////////////////////////////////////////// ///////////////////////////////

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/jquery.jcarousel.pack.js"></script>
    <link rel="stylesheet" type="text/css" href="css/jquery.jcarousel.css" />
        <link rel="stylesheet" type="text/css" href="css/skin.css" />

    <script type="text/javascript">
    $(document).ready(function () {

        //jCarousel Plugin
        $('#carousel').jcarousel({
            vertical: true,
            scroll: 1,
            auto: false,
            visible: 4,
            wrap: 'last',
            initCallback: mycarousel_initCallback
        });

    //Front page Carousel - Initial Setup
    $('div#slideshow-carousel a img').css({'opacity': '0.5'});
    $('div#slideshow-carousel a img:first').css({'opacity': '1.0'});
    $('div#slideshow-carousel li a:first').append('<span class="arrow"></span>')


    //Combine jCarousel with Image Display
    $('div#slideshow-carousel li a').hover(
        function () {

            if (!$(this).has('span').length) {
                $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
                $(this).stop(true, true).children('img').css({'opacity': '1.0'});
            }       
        },
        function () {

            $('div#slideshow-carousel li a img').stop(true, true).css({'opacity': '0.5'});
            $('div#slideshow-carousel li a').each(function () {

                if ($(this).has('span').length) $(this).children('img').css({'opacity': '1.0'});

            });

        }
    ).click(function () {

            $('span.arrow').remove();        
        $(this).append('<span class="arrow"></span>');
        $('div#slideshow-main li').removeClass('active');        
        $('div#slideshow-main li.' + $(this).attr('rel')).addClass('active');   

        return false;
    });


});


//Carousel Tweaking

function mycarousel_initCallback(carousel) {

    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
}

    </script>


<style type="text/css" media="screen">
/* Slide Show */
body {
    font-family:arial;  
}

img {
    border:0;
}

#slideshow-main {
    width:429px; 
    float:; 
    margin-right:3px;
    margin-left:120px;
}

#slideshow-main ul {
    margin:0; 
    padding:0; 
    width:429px;
}

#slideshow-main li {
    width:429px; 
    height:290px; 
    display:none;
    position:relative;
}

#slideshow-main li.active {
    display:block !important;
}


#slideshow-main li span.content {
    position:relative;
    bottom:0; left:0;
    display:block; 
    width:100%;
    height:60px;
    z-index:1000;
}

#slideshow-main li span.content h1 {
    font-size:14px;
    margin:5px 0;
    padding:0 10px;;
    color:#000000;
}

#slideshow-main li span.content p {
    font-size:11px;
    margin:5px 0;
    padding:0 10px;;
    color:#000000;
}

#slideshow-carousel {
    float:left; 
    width:95px;
    position:relative
}

#slideshow-carousel ul {
    margin:0; 
    padding:0;
    list-style:none;
}

#slideshow-carousel li {
    background:#fff; 
    height:97px; 
    position:relative
}

#slideshow-carousel li .arrow {
    left:3px; 
    top:28px; 
    position:absolute; 
    width:20px; 
    height:40px; 
    background:url(images/arrow_white.png) no-repeat 0 0; 
    display:block;
}

#slideshow-carousel li a {
    background:#000; 
    display:block; 
    width:95px; 
    height:95px;
}


#slideshow-carousel .active {
    filter:alpha(opacity=100); 
    -moz-opacity:1.0; 
    -khtml-opacity: 1.0; 
    opacity: 1.0;
}

#slideshow-carousel .faded {
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5;
}


    </style>



</head>

<body>

    <div id="welcomeHero">

        <div id="slideshow-main">
            <ul>
                <li class="p1 active">
                    <a href="#">
                        <img src="images/vv01.jpg" width="100%" height="auto" alt=""/>
                        <span class="opacity"></span>
                        <span class="content"><h1>Title 1</h1><p>Photo vv01.</p></span>
                    </a>
                </li>
                <li class="p2">
                    <a href="#">
                        <img src="images/vv02.jpg" width="100%" height="auto" alt=""/>
                        <span class="opacity"></span>
                        <span class="content"><h1>Title 2</h1><p>Photo vv02.</p></span>
                    </a>
                </li>
                <li class="p3">
                    <a href="#">
                        <img src="images/vv03.jpg" width="100%" height="auto" alt=""/>
                        <span class="opacity"></span>
                        <span class="content"><h1>Title 3</h1><p>Photo vv03.</p></span>
                    </a>
                </li>
                <li class="p4">
                    <a href="#">
                        <img src="images/vv04.jpg" width="100%" height="auto" alt=""/>
                        <span class="opacity"></span>
                        <span class="content"><h1>Title 4</h1><p>Photo vv04.</p></span>
                    </a>
                </li>
                <li class="p5">
                    <a href="#">
                        <img src="images/vv05.jpg" width="100%" height="auto" alt=""/>
                        <span class="opacity"></span>
                        <span class="content"><h1>Title 5</h1><p>Photo vv05.</p></span>
                    </a>
                </li>
                <li class="p6">
                    <a href="#">
                        <img src="images/vv06.jpg" width="100%" height="auto" alt=""/>
                        <span class="opacity"></span>
                        <span class="content"><h1>Title 6</h1><p>Photo vv06.</p></span>
                    </a>
                </li>
                <li class="p7">
                    <a href="#">
                        <img src="images/vv07.jpg" width="100%" height="auto" alt=""/>
                        <span class="opacity"></span>
                        <span class="content"><h1>Title 7</h1><p>Photo vv07.</p></span>
                    </a>
                </li>
            </ul>                                       
        </div>

        <div id="slideshow-carousel" style="margin-top: -280px; position: absolute;">               
              <ul id="carousel" class="jcarousel jcarousel-skin-tango">
                <li><a href="#" rel="p1"><img src="images/vv01.jpg" width="95" height="95" alt="#"/></a></li>
                <li><a href="#" rel="p2"><img src="images/vv02.jpg" width="95" height="95" alt="#"/></a></li>
                <li><a href="#" rel="p3"><img src="images/vv03.jpg" width="95" height="95" alt="#"/></a></li>
                <li><a href="#" rel="p4"><img src="images/vv04.jpg" width="95" height="95" alt="#"/></a></li>
                <li><a href="#" rel="p5"><img src="images/vv05.jpg" width="95" height="95" alt="#"/></a></li>
                <li><a href="#" rel="p6"><img src="images/vv06.jpg" width="95" height="95" alt="#"/></a></li>
                <li><a href="#" rel="p7"><img src="images/vv07.jpg" width="95" height="95" alt="#"/></a></li>
              </ul>
        </div>

        <div class="clear"></div>

    </div>


</body>

</html>

Answer 1

我快速思考的方法就是用css。 尝试这样的事情：

#slideshow-main li a {
  opacity: 0;
  transition: all 0.25s ease-in-out;
}

#slideshow-main li.active a {
  opacity: 1;
}

不确定它是否正常工作或未检查但希望您有所了解;）

是的，你是对的，它不起作用。 我对css进行了一些调整（仅限），你可以让他们检查一下你的代码吗？

#slideshow-main ul {
    height: 290px;
    margin: 0;
    padding: 0;
    position: relative;
    width: 429px;
}


#slideshow-main li {
    display: inherit;
    height: 290px;
    position: absolute;
    width: 429px;
}

#slideshow-main li.active {
    /* display: block!important; */
}

#slideshow-main li a {
    opacity: 0;
    transition: all 0.25s ease-in-out;
}

#slideshow-main li.active a {
    opacity: 1;
}