Я сделал слайдер изображений, изображения которого перемещаются слева направо, и я хочу увеличить их размер, когда пользователь наводит на них курсор, уменьшая их размер, когда мышь уходит. Это работает, но только один раз. Я думаю, что это как-то связано с тем, как я объявил слушателей событий. Вот рабочий пример: (http: //www.public.asu. edu / ~ drwarner / imageslider / scrolling_Banner.html) и вот мой код:

<script>
    var images = [];
    var imagePosition = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
    var cycle;
    var hoverImagePosition;

    window.onload = function scrolling() {
        for (i = 0; i < 10; i++) {
            images.push(document.getElementById("scrollingImage" + i));
            if (document.addEventListener) {
                // For all major browsers, except IE 8 and earlier
                document.getElementById("scrollingImage" + i).addEventListener("mouseenter", imageBigger);
                document.getElementById("scrollingImage" + i).addEventListener("mouseleave", imageSmaller);
            } else if (document.attachEvent) {
                // For IE 8 and earlier versions
                document.getElementById("scrollingImage" + i).attachEvent("mouseenter", imageBigger);
                document.getElementById("scrollingImage" + i).attachEvent("mouseleave", imageSmaller);
            }
        }
        cycle = setInterval(frame, 100);
    };

    function frame() {
        for (x = 0; x < 10; x++) {
            if (imagePosition[x] == 100) {
                imagePosition[x] = 0;
            } else {
                imagePosition[x] = imagePosition[x] + 1;
                images[x].style.left = imagePosition[x] + '%';
            }
        }
    }

    function imageBigger() {
        clearInterval(cycle);
        this.style.zIndex = 1;
        this.style.width = 25 + "%";
        hoverImagePosition = parseInt(this.style.left) - 2.5;
        this.style.left = hoverImagePosition + "%";
    }

    function imageSmaller() {
        cycle = setInterval(frame, 100);
        this.style.zIndex = -1;
        this.style.width = 20 + "%";
        hoverImagePosition = parseInt(this.style.left) + 2.5;
        this.style.left = hoverImagePosition + "%";
    }

</script>
2
Mangofett 28 Май 2017 в 07:51

2 ответа

Лучший ответ

Я думаю, что ответ связан с тем, что вы установили z Index = -1 в изображении меньше. Это, вероятно, ставит изображение позади div / что угодно, и поэтому оно не работает снова

2
ControlAltDel 28 Май 2017 в 05:01

Измените z-index на 0 вместо -1

        var images = [];
        var imagePosition = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
        var cycle;
        var hoverImagePosition;
        
        window.onload = function scrolling() {
            for (i = 0; i < 10; i++) {
                images.push(document.getElementById("scrollingImage" + i));
                if (document.addEventListener) {
                    // For all major browsers, except IE 8 and earlier
                    document.getElementById("scrollingImage" + i).addEventListener("mouseover", imageBigger);
                    document.getElementById("scrollingImage" + i).addEventListener("mouseout", imageSmaller);
                } else if (document.attachEvent) {
                    // For IE 8 and earlier versions
                    document.getElementById("scrollingImage" + i).attachEvent("mouseenter", imageBigger);
                    document.getElementById("scrollingImage" + i).attachEvent("mouseleave", imageSmaller);
                }
            }
            cycle = setInterval(frame, 100);
        };

        function frame() {
             for (x = 0; x < 10; x++) {
                if (imagePosition[x] == 100) {
                    imagePosition[x] = 0;
                } else {                        
                    imagePosition[x] = imagePosition[x] + 1;
                    images[x].style.left = imagePosition[x] + '%';
                }
            }
        }
        
        function imageBigger() {
            clearInterval(cycle);
            this.style.zIndex = 1;
            this.style.width = 25 + "%";  
            hoverImagePosition = parseInt(this.style.left) - 2.5;
            this.style.left = hoverImagePosition + "%";
        }

        function imageSmaller() {
            cycle = setInterval(frame, 100);
            this.style.zIndex = 0;
            this.style.width = 20 + "%";    
            hoverImagePosition = parseInt(this.style.left) + 2.5;
            this.style.left = hoverImagePosition + "%";
        }
<html><head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="http://www.public.asu.edu/~drwarner/imageslider/scrolling_Banner.css">
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

    <!-- Optional theme -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <!-- Latest compiled and minified JavaScript -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

    <title>BANNER</title>

<style>


</style></head>


<body>

    <p style="text-align:center; color:#d2d"><span>REAL TIME IS OSSIM</span></p>

    <div id="container">
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/red.jpg" id="scrollingImage0" style="left: 36%;">
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/orange.jpg" id="scrollingImage1" style="left: 36%;">
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/yellow.jpg" id="scrollingImage2" style="left: 36%;>
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/green.jpg" id="scrollingImage3" style="left: 36%;>
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/blue.jpg" id="scrollingImage4" style="left: 36%;>
        </a>


        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/red.jpg" id="scrollingImage5" style="left: 36%; >
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/orange.jpg" id="scrollingImage6" style="left: 36%;">
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/yellow.jpg" id="scrollingImage7" style="left: 36%;>
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/green.jpg" id="scrollingImage8" style="left: 36%;>
        </a>
        <a class="scrolling_Image" href="http://www.w3schools.com">
            <img src="http://www.public.asu.edu/~drwarner/imageslider/img/blue.jpg" id="scrollingImage9" style="left: 36%;">
        </a>
    </div>




</body></html>   
2
AdhershMNair 28 Май 2017 в 05:16