循环显示图像，直到悬停jquery

时间：2015-08-23 20:42:42

标签： javascript jquery css

我想让图像单独循环，比如说每2秒更换一次图像，但是当关联的链接悬停时切换到正确的图像。以下是我到目前为止所取得的成就。现在，我在悬停时显示了图像，但我不确定如何让它们循环播放。

$("#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/

3 个答案:

答案 0 :(得分：2)

HTML中有一些损坏的图片链接。但这应该可以解决问题： 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>

答案 1 :(得分：1)

这将每隔3秒循环到下一个图像，当用户将鼠标悬停在链接上时，它将停止循环并显示悬停的图像。

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);

然后，当用户将鼠标悬停或停止悬停在链接上时，您需要更新对on（）的调用以将autoCycle设置为true或false：

$("#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');
    }
});

答案 2 :(得分：0)

这应该是通用的，

您应该尽可能地尝试减少代码重复。 您可以通过以下方面的图像链接创建一般功能：

HTML :(从链接中删除ID＆＃39;添加＆＃34;数据ID＆＃34; - ＆gt;这是图像的链接＆＃39; 

<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 :(删除了大量不需要的代码）

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');

}

Fiddle here

相关问题
最新问题