Question

我最近开始学习Javascript和Jquery，并希望创建我自己的图像幻灯片或文本自动收录器。我复制了一些代码并进行了修改，但是当我运行它时没有任何反应。

HTML就像这样，简单我希望用fadeout改变图像。所以我选择了数组。

<div class='tickr'>
<img src='img006.jpg'>  
</div>

JQuery就像这样

var i = 1;

function loop() {
    var pre = [
        'disclosure_left.png',
        'disclosure_right.png',
        'icon_more.png',
        'icon_search.png'
    ];

    var old = $('.tickr img');
    var newi = '<img src="'+ pre[1]+'"/>';

    newi.hide();
    $('.tickr').prepend(newi);

    newi.fadeIn(1000);
    old.fadeOut(1000, function () {
        $(this).remove();
    });

    i = (i == 3) ? i + 1 : 0;
}

// begin invalid code
setInterval("loop()", 2500)
}

Answer 1

您可以使用此代码添加滑块

<div class="holder">
     <div class="slider-parent">
          <div class="arrow-left2"></div>
           <div class="arrow-right2"></div>
                <div class="slider2">
            <ul>
                            <li><img src="images/slider/10.jpg" alt="Chapelle's Show" /> </li>
                            <li><img src="images/slider/11.jpg" alt="Rescue Me" /></li>
                            <li><img src="images/slider/12.jpg" alt="The Guild" /></li>
                            <li><img src="images/slider/13.jpg" alt="Trailer Park Boys" /></li>
                            <li><img src="images/slider/14.jpg" alt="The Lincoln Lawyer" /></li>
                            <li><img src="images/slider/15.jpg" alt="Bones" /></li>
                            <li><img src="images/slider/16.jpg" alt="Survivor Man" /></li>
                            <li><img src="images/slider/17.jpg" alt="WildBoyz" /></li>
                            <li><img src="images/slider/18.jpg" alt="American Dad" /></li>
                        </ul>
                    </div><!--end slider div-->
                </div>  <!--Slider parent end-->
            </div><!--end holder div-->

css：

.holder{
    width:960px;
    }

.slider-parent{
    width:100%;
    height:210px;
    background-color:#e1e1e1;
    position:relative;
    }

.slider2{
    position:absolute;
    width:780px;
    height:200px;
    background-color:#e1e1e1;
    top:20px;
    left:90px;
    overflow:hidden;
    }

    .slider2 ul {
    width:1460px;
    height:200px;
    background-color:#e1e1e1;
    }

    .slider2 ul li{
    width:140px;
    height:200px;
    background-color:orange;
    margin-right:20px;
    float:left;
    }

    .slider2 ul li:hover{
    width:140px;
    height:200px;
    opacity:.8;
    margin-right:20px;
    float:left;
    }



    .arrow-left2{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    left:0px;
    background-image: url('../images/arrow-left.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    }

    .arrow-right2{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    right:0px;
    background-image: url('../images/arrow-right.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    }

    .arrow-left2:hover{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    left:0px;
    background-image: url('../images/arrow-left.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    opacity:.6;
    }


    .arrow-right2:hover{
    width:60px;
    height:60px;
    background-color:white;
    position:absolute;
    top:100px;
    right:0px;
    background-image: url('../images/arrow-right.png');
    background-repeat:no-repeat;
    background-position:center;
    border-radius:10px;
    opacity:.6;
    }

JS：

 jQuery(".arrow-right2").hover(function() {
        count2++;
        // alert(count);

        if (count2 >4) {
            count2 = 4;
            jQuery(".slider2 ul").animate({
            "margin-right": "0px"
        }); //animate method ennnd
        } else {
            jQuery(".slider2 ul").animate({
            "margin-left": "-=160px"
            }); //animate method ennnd
        }
    }) //click right method end

    jQuery(".arrow-left2").hover(function() {
        count2--;

        if (count2 <0){
            count2 = 0;
            jQuery(".slider2 ul").animate({
            "margin-left": "0px"
            }); //animate method ennnd
        } else {
            jQuery(".slider2 ul").animate({
            "margin-left": "+=160px"
            }); //animate method ennnd
        }
    }) //click left method end

如果这不起作用，让我知道，可能已经忘记了一些js ......

Answer 2

您的代码中存在一些导致脚本无法工作的错误：

您对“pre”数组的所有引用都不正确。不是[1] ... pre [i]
函数末尾的三元运算符写错了
还可以考虑使用JQuery方法的“链接”来节省额外的时间

这些变化概述如下：

var i=0;

        function loop(){
            var pre = ['image1.jpg', 'image2.jpg', 'image3.jpg'];

            var old = $('.tickr img');

            $('.tickr').prepend('<img src="'+ pre[i]+'"/>');
            $('.tickr img[src="'+pre[i]+'"]').hide().fadeIn(1000);


            old.fadeOut(1000,function(){
                   $(this).remove();
            });


            i = (i == 3) ? 0 : i = i + 1;

         }

setInterval(loop, 2500);

希望这会有所帮助。

Html和JQuery：如何创建图像或文本的幻灯片？

2 个答案: