Question

下面是我的代码，我已经开发了三个功能，通过滚动来获得所需的图像，我正在＆＃34; prev＆＃34;和＆＃34; next＆＃34; divs移动图像。它看起来对我很好，但必定有一些错误，不能让它工作。

<!DOCTYPE html>
    <html>
    <head><head>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

    <script type="text/javascript" >

        var imageArr = document.getElementsByClassName('slide');
        var offset = imageArr.length-1;
        var currentImage, prevImage, nextImage;

        function getCurrentImage() {
            currentImage = imageArr[offset];
        }

        function getPrevImage() {
            if(offset == 0) 
                offset = imageArr.length-1;
            else
                offset = offset-1;

            prevImage = imageArr[offset];

        }

        function getNextImage() {
            if(offset == imageArr.length-1)
                offset = 0;
            else
                offset = offset+1;

            nextImage = imageArr[offset];

        }

    $("document").ready(function(){

        $(".prev").click(function(){

             $(function(){
                getCurrentImage();
             });
             $(function(){
                getPrevImage();
             });


             $(currentImage).css({right:0px});
             $(prevImage).css({left:0px});

             $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
             $(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
        });

        $(".next").click(function(){
                 $(function(){
                    getCurrentImage();
                 });
                 $(function(){
                    getNextImage();
                 });


             $(currentImage).css({right:0});
             $(nextImage).css({left:0px});

             $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
             $(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
        });

    });


    </script>

    <style>
        .container {
            width : 90%;
            margin-left: 5%;
            margin-right: 5%;
            height : 400px;
            border : 2px solid black;
            position: relative;
        }
        img {
            width:100%;
            height:400px;
            position: absolute;

        }

        .prev, .next {
            position :relative;
            cursor : pointer;
            width : 4%;
            height: 70px;
            border : 1px solid black;
            margin-top: -250px;
            font-size: 40px;
            color:#fff;
            padding-left:10px;
            background: #000;
            opacity: .5;

        }
        .next {
            float:right;
            margin-right: 0px;

        }
        .prev{
            float:left;
            margin-left: 0px;
        }

        .prev:hover, .next:hover{
            opacity: 1;
        }
    </style>
</head>
<body>


    <div class="container">
        <img src="slide1.jpg" class="slide" />
        <img src="slide2.jpg" class="slide" />
        <img src="slide3.jpg" class="slide" />
        <img src="slide4.jpg" class="slide" /> 
    </div>



    <div class="prev" >&#10094;</div>
    <div class="next" >&#10095;</div>


</body>
</html>

Answer 1

您有语法错误 $().css({right: 0px});中应$().css({right: '0px'});
获取html元素也必须在$("document").ready之后，因为之前不存在html元素。

它对我有用：

    $("document").ready(function(){
    var imageArr = document.getElementsByClassName('slide');
    var offset = imageArr.length-1;
    var currentImage, prevImage, nextImage;

    function getCurrentImage() {
        currentImage = imageArr[offset];
    }

    function getPrevImage() {
        if(offset == 0) 
            offset = imageArr.length-1;
        else
            offset = offset-1;

        prevImage = imageArr[offset];

    }

    function getNextImage() {
        if(offset == imageArr.length-1)
            offset = 0;
        else
            offset = offset+1;

        nextImage = imageArr[offset];
    }

    $(".prev").click(function(){

         $(function(){
            getCurrentImage();
         });
         $(function(){
            getPrevImage();
         });

         $(currentImage).css({right: '0px'});
         $(prevImage).css({left: '0px'});

         $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0'});
         $(prevImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
    });

    $(".next").click(function(){
             $(function(){
                getCurrentImage();
             });
             $(function(){
                getNextImage();
             });


         $(currentImage).css({right: '0px'});
         $(nextImage).css({left: '0px'});

         $(currentImage).animate({width:'80%',width:'60%',width:'40%',width:'20%',width:'0%'});
         $(nextImage).animate({width:'20%',width:'40%',width:'60%',width:'80%',width:'100%'});
    });
 });

使用jQuery和javascript

1 个答案: