Ich möchte, dass die Bilder einzeln durchlaufen werden, z. B. alle 2 Sekunden das Bild wechseln, aber dann zum richtigen Bild wechseln, wenn der zugehörige Link bewegt wird. Folgendes habe ich bisher geschafft. Im Moment habe ich die Bilder beim Schweben angezeigt, bin mir aber nicht sicher, wie ich sie zum Radfahren bringen soll.

$("#one").on({
mouseover: function () {
    timer = setTimeout(function () {
        $("#first").removeClass('hidden').css('opacity', '1');
    }, 300);
},
mouseout: function () {
    clearTimeout(timer);
    $("#first").css({
        'opacity': '0'
    }).addClass('hidden');
}
});

https://jsfiddle.net/enwed7b9/1/

2
user2252219 23 Aug. 2015 im 23:42

3 Antworten

Beste Antwort

Sie haben einen defekten Bildlink in Ihrem HTML. Aber das sollte den Trick machen: https://jsfiddle.net/pengyanb/st47yxqb/6/

var imageIndex = 0;
var periodicTimer;
setPeriodicTimer();

function setPeriodicTimer()
{
    periodicTimer = setTimeout(function(){
        $('img').addClass('hidden').css('opacity', '0');
        console.log('imageIndex: '+imageIndex);
		switch(imageIndex)
        {
            case 0:
                $('#first').removeClass('hidden').css('opacity', '1');
                break;
           case 1:
                $('#second').removeClass('hidden').css('opacity', '1');
                break;
           case 2:
                $('#third').removeClass('hidden').css('opacity', '1');
                break;       
           case 3:
                $('#fourth').removeClass('hidden').css('opacity', '1');
                break;
   
           case 4:
                $('#fifth').removeClass('hidden').css('opacity', '1');
                break;
           case 5:
                $('#sixth').removeClass('hidden').css('opacity', '1');
                break;
           case 6:
                $('#seventh').removeClass('hidden').css('opacity', '1');
                break;
        }
        imageIndex++;
        if(imageIndex > 6)
            imageIndex = 0;
        setPeriodicTimer();
	}, 2000);
}

$("#one").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 0;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#two").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 1;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#second").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#second").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#three").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 2;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#third").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#third").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#four").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 3;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#fourth").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#fourth").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#five").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 4;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#fifth").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        
        $("#fifth").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#six").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 5;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#sixth").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#sixth").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
$("#seven").on({
    mouseover: function () {
        clearTimeout(periodicTimer);
        imageIndex = 6;
        $('img').addClass('hidden').css('opacity', '0');
        timer = setTimeout(function () {
            $("#seventh").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        setPeriodicTimer();
        clearTimeout(timer);
        $("#seventh").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
.box {
    position: relative;
    display: inline-block;
    height: 15px;
    line-height: 15px;
    text-align: center;
    transition: .3s;
    cursor: pointer;
    margin-bottom: 4px;
    margin-right: 3px;
    padding-bottom: 7px
}

.image {
    width: 100%;
    z-index: -1
}
.image img {
    margin: auto;
    position: absolute;
    top: 0;
    left: 10%;
    bottom: 0;
    right: 0;
    width: 55%;
    transition: ease-out .4s;
    z-index: -1
}
.hidden {
   
    opacity: 1
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="project-link-2">
    <li class="box" id="one"> <a class="project-link" href="#modal1"><span>Modurra Shelving</span>   </a>	
    </li>
    <br>
    <li class="box" id="two"> <a class="project-link" href="#modal2"><span>Kami Bicycle Helmet</span> </a>	
    </li>
    <br>
    <li class="box" id="three"> <a class="project-link" href="#modal3"><span>Revamping Language Learning</span> </a>	
    </li>
    <br>
    <li class="box" id="four"> <a class="project-link" href="#modal4"><span>Sports Innovation Challenge</span> </a>	
    </li>
    <br>
    <li class="box" id="five"> <a class="project-link" href="#modal5"><span>Lights Out</span></a> 
    </li>
    <br>
    <li class="box" id="six"> <a class="project-link" href="#modal6"><span>Maru Personal Speaker Design</span> </a>	
    </li>
    <br>
    <li class="box" id="seven"> <a class="project-link" href="#modal7"><span>A Few Casual Projects</span> </a>	
    </li>
</ul>
   
        
        
<div class="image">
    <img alt="" class="hidden" id="first" src="http://consequenceofsound.files.wordpress.com/2013/06/datside-ram.jpg">
</div>
<!-- Lights Out -->
<div class="image">
    <img alt="" class="hidden" id="second" src="http://tctechcrunch2011.files.wordpress.com/2012/03/random_house_logo.jpg">
</div>
<!-- Modurra -->
<div class="image">
    <img alt="" class="hidden" id="third" src="work/Wordpix/splash_word.jpg">
</div>
<!-- WordPix -->
<div class="image">
    <img alt="" class="hidden" id="fourth" src="work/Sports/splash_sports.jpg">
</div>
<!-- Luna -->
<div class="image">
    <img alt="" class="hidden" id="fifth" src="work/Lights Out/Lights-Out-Gif.gif">
</div>
<!-- Kami -->
<div class="image">
    <img alt="" class="hidden" id="sixth" src="work/Maru/splash_maru.jpg">
</div>
<!-- Misc -->
<div class="image">
    <img alt="" class="hidden" id="seventh" src="work/Misc/splash_comp.jpg">
</div>
</div>
2
Maximillian Laumeister 24 Aug. 2015 im 04:46

Dies sollte so allgemein wie möglich sein.

Sie sollten versuchen, die Codewiederholung so lange wie möglich zu reduzieren. Sie können eine allgemeine Funktionalität mit einem Link zu Bildern in der folgenden Angelegenheit erstellen:

HTML: (IDs von Links entfernt, "Daten-ID" hinzugefügt -> dies ist der 'Link' zum Bild)

<ul class="project-link-2">
    <li class="box" data-id="first"> <a class="project-link" href="#modal1"><span>Modurra Shelving</span>   </a>    
    </li>
    <br>
    <li class="box" data-id="second"> <a class="project-link" href="#modal2"><span>Kami Bicycle Helmet</span> </a>  
    </li>
    <br>
    <li class="box" data-id="third"> <a class="project-link" href="#modal3"><span>Revamping Language Learning</span> </a>   
    </li>
    <br>
    <li class="box" data-id="fourth"> <a class="project-link" href="#modal4"><span>Sports Innovation Challenge</span> </a>  
    </li>
    <br>
    <li class="box" data-id="fifth"> <a class="project-link" href="#modal5"><span>Lights Out</span></a> 
    </li>
    <br>
    <li class="box" data-id="sixth"> <a class="project-link" href="#modal6"><span>Maru Personal Speaker Design</span> </a>  
    </li>
    <br>
    <li class="box" data-id="seventh"> <a class="project-link" href="#modal7"><span>A Few Casual Projects</span> </a>   
    </li>
</ul>
<div class="image">
    <img alt="" class="hidden" id="first" src="http://consequenceofsound.files.wordpress.com/2013/06/datside-ram.jpg">
</div>
<!-- Lights Out -->
<div class="image">
    <img alt="" class="hidden" id="second" src="http://tctechcrunch2011.files.wordpress.com/2012/03/random_house_logo.jpg">
</div>
<!-- Modurra -->
<div class="image">
    <img alt="" class="hidden" id="third" src="http://www.independent.co.uk/incoming/article8465213.ece/alternates/w620/v2-cute-cat-picture.jpg" />
</div>
<!-- WordPix -->
<div class="image">
    <img alt="" class="hidden" id="fourth" src="work/Sports/splash_sports.jpg">
</div>
<!-- Luna -->
<div class="image">
    <img alt="" class="hidden" id="fifth" src="work/Lights Out/Lights-Out-Gif.gif">
</div>
<!-- Kami -->
<div class="image">
    <img alt="" class="hidden" id="sixth" src="work/Maru/splash_maru.jpg">
</div>
<!-- Misc -->
<div class="image">
    <img alt="" class="hidden" id="seventh" src="work/Misc/splash_comp.jpg">
</div>
</div>

JS: (VIEL nicht benötigten Code entfernt)

var position = 0 / 1; // (divide by 1 to make sure it is int)
var myImgArr = $(".image img");
var count = myImgArr.length;
var timer;

$(function () {
    //on page load

    //show first pic
    $(myImgArr[0]).removeClass('hidden');
    timer = setInterval(setMySlider, 2000);
});

$(".project-link-2 li").mouseenter(function () {
    //stop the timer, reset all images
    clearInterval(timer);
    myImgArr.addClass('hidden');
    myID = '#' + $(this).attr('data-id');
    $(myID).removeClass('hidden');
}).mouseleave(function () {
    //add these 2 lines to hide the current ID:
    myID = '#' + $(this).attr('data-id');
    $(myID).addClass('hidden');
    //this line will show current img and continue cycle
    $(myImgArr[mod]).removeClass('hidden');
    timer = setInterval(setMySlider, 2000);
});

function setMySlider() {

    mod = ((position % count) / 1); //the current position from 0 to image count

    $(myImgArr[mod]).addClass('hidden');
     position++;
     mod = ((position % count) / 1)
    $(myImgArr[mod]).removeClass('hidden');

}

Hier fummeln

0
Ziv Weissman 24 Aug. 2015 im 04:42

Dadurch wird alle 3 Sekunden zum nächsten Bild gewechselt. Der Zyklus wird beendet und das schwebende Bild wird angezeigt, wenn der Benutzer über den Link fährt.

var autoCycle = true;
var i = 1;
var images = [
    $('#first'),
    $('#second'),
    $('#third'),
    $('#fourth'),
    $('#fifth'),
    $('#sixth'),
    $('#seventh')
];

images[0].removeClass('hidden').css('opacity', '1');

setInterval(function() {
    if(autoCycle) {
        images.forEach(function(img) {
            img.css({ 'opacity': '0' }).addClass('hidden');
        });

        var currImage = images[(i - 1) % images.length];
        var newImage = images[i % images.length];

        currImage.css({ 'opacity': '0' }).addClass('hidden');
        newImage.removeClass('hidden').css('opacity', '1');

        i++;
    }
}, 200);

Anschließend müssen Sie Ihre Aufrufe auf on () aktualisieren, um autoCycle auf true oder false zu setzen, wenn der Benutzer den Mauszeiger über Links hält oder nicht mehr über Links hält:

$("#one").on({
    mouseover: function () {
        autoCycle = false;
        timer = setTimeout(function () {
            $("#first").removeClass('hidden').css('opacity', '1');
        }, 300);
    },
    mouseout: function () {
        autoCycle = true;
        clearTimeout(timer);
        $("#first").css({
            'opacity': '0'
        }).addClass('hidden');
    }
});
1
kmc059000 23 Aug. 2015 im 21:25