Question

将幻灯片插入我的网站并发布后，我注意到幻灯片显示无法正确呈现。有六张幻灯片，您会注意到here，每次幻灯片转换后，转换都无法完成。随着循环完成，每张幻灯片的显示越来越少。幻灯片放映的左侧是问题所在。提前感谢您提供的任何帮助。我的代码如下：

CSS

 #slider {
        width: 670px;
        height: 380px;
        border: 0px solid #FFFFFF;
        border-radius: 0px;
        overflow: hidden;
        position: relative;
        cursor: hand;
        cursor: pointer
    }
    #slider .slides {
        width: 4732px;
        height: 380px;
        display: block;
        margin: 0;
        padding: 0;
    }
    #slider .slide {
        width: 670px;
        height: 380px;
        float: left;
        list-style-type: none;
    }
    .MOT160912 {
        position: absolute;
        max-width: 670px;
        margin: 0px;
    }
    .c25322 {
        position: absolute;
        bottom: 0px;
        width: 100%;
        padding: 12px;
        background-color: rgba(0, 0, 0, 0.7);
        color: #FFFFFF;
        font-size: 16pt;
        font-family: patua one;
        font-style: italic;
        font-weight: normal;
        text-align: left;
        line-height: 32px;
        z-index: 33;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

HTML

<div style="width: 670px; margin: 0 auto;">
<div style="position: relative; width: 670px; "><div style="position: absolute; right:0px; top:0px; padding: 3px 7px 3px; z-index:99; background-color: #; opacity:0.5; border-radius:7px;"><A style="color: #; text-decoration:none; font-size:0pt; line-height:0px; font-family: arial;" HREF="&#104;&#116;&#116;&#112;&#58;&#47;&#47;&#119;&#119;&#119;&#46;&#49;&#50;&#51;&#45;&#115;&#108;&#105;&#100;&#101;&#115;&#104;&#111;&#119;&#46;&#99;&#111;&#109;" TARGET="_blank">&#83;&#108;&#105;&#100;&#101;&#115;&#104;&#111;&#119;&#32;&#77;&#97;&#107;&#101;&#114;</A></div>


<div id="slider"><ul class="slides">

<li class="slide slide1">
 <figure class="MOT160912">
 <a href="http://www.realtimehockey.net" TARGET="_blank"> <IMG SRC="http://i1314.photobucket.com/albums/t563/RTH13/Homepage%20Slideshow/HomePage%20Slider%202016/RTHHomePageMarket676x380_zpsxmotlvm0.png">
 <figcaption class="c25322">
RTH Apparel
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide2">
 <figure class="MOT160912">
 <a href="http://www.realtimehockey.net" TARGET="_blank"> <IMG SRC="http://i1314.photobucket.com/albums/t563/RTH13/Homepage%20Slideshow/HomePage%20Slider%202016/ONEHOCKE676x380_zps8ycqqmxi.png">
 <figcaption class="c25322">
OneHockey Tournaments
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide3">
 <figure class="MOT160912">
 <a href="http://www.realtimehockey.net" TARGET="_blank"> <IMG SRC="http://i1314.photobucket.com/albums/t563/RTH13/Homepage%20Slideshow/HomePage%20Slider%202016/ScoreStream676x380_zpsn771k9zq.jpg">
 <figcaption class="c25322">
Score Stream
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide4">
 <figure class="MOT160912">
 <a href="http://www.realtimehockey.net" TARGET="_blank"> <IMG SRC="http://i1314.photobucket.com/albums/t563/RTH13/Homepage%20Slideshow/HomePage%20Slider%202016/918PromoBG676x380_zpszrxzpbnx.png">
 <figcaption class="c25322">
918 Hockey Apparel
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide5">
 <figure class="MOT160912">
 <a href="http://www.realtimehockey.net" TARGET="_blank"> <IMG SRC="http://i1314.photobucket.com/albums/t563/RTH13/Homepage%20Slideshow/HomePage%20Slider%202016/PlanetHockey676x380_zpst8bedho6.png">
 <figcaption class="c25322">
Planet Hockey Camps
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide6">
 <figure class="MOT160912">
 <a href="http://www.realtimehockey.net" TARGET="_blank"> <IMG SRC="http://i1314.photobucket.com/albums/t563/RTH13/Homepage%20Slideshow/HomePage%20Slider%202016/YetiHockey676x380_zpstraz1m7s.png">
 <figcaption class="c25322">
Hockey Yeti
</figcaption></a> 
 </figure>
 </li>

<li class="slide slide1">
 <figure class="MOT160912">
 <a href="http://www.realtimehockey.net" TARGET="_blank"> <IMG SRC="http://i1314.photobucket.com/albums/t563/RTH13/Homepage%20Slideshow/HomePage%20Slider%202016/RTHHomePageMarket676x380_zpsxmotlvm0.png">
 <figcaption class="c25322">
RTH Apparel
</figcaption></a> 
 </figure>
 </li>

</ul></div></div></div>

JS

<script src="http://code.jquery.com/jquery-latest.js">
    <script language="javascript">
    'use strict';
    $(function() {
        var width = 670;
        var animationSpeed = 600;
        var pause = 8000;
        var currentSlide = 1;
        var $slider = $('#slider');
        var $slideContainer = $('.slides', $slider);
        var $slides = $('.slide', $slider);
        var interval;

        function startSlider() {
            interval = setInterval(function() {
                $slideContainer.animate({
                    'margin-left': '-=' + width
                }, animationSpeed, function() {
                    if (++currentSlide === $slides.length) {
                        currentSlide = 1;
                        $slideContainer.css('margin-left', 0);
                    }
                });
            }, pause);
        }

        function pauseSlider() {
            clearInterval(interval);
        }
        $slideContainer.on('mouseenter', pauseSlider).on('mouseleave', startSlider);
        startSlider();
    });
</script>

Answer 1

＆＃34; .slide＆＃34;具有从li元素继承的4px填充。所以你的实际＆＃34; .slide＆＃34;宽度= 678px。添加＆＃34;填充：0px;＆＃34;你的.slide css

幻灯片放映无法正确呈现

1 个答案: