jquery版的轮播图 发表于 2018-03-15 | 分类于 jq 用jquery实现一个轮播图,效果:自动轮播,点击切换,鼠标移入暂停用jquery实现无缝轮播 轮播图12345678910111213141516171819202122var n = 0;$('button').click(function() { $('button').removeClass(); // removeClass不传入参数,则默认移除该元素所有class $(this).addClass('red'); n = $(this).index(); //通过.index()方法可以获取伪数组的index $('.imgs').css('transform', 'translateX(' + (-100 * n) + 'px)');});function setTimer() { n++; $('button').eq(n % 5).trigger('click');}var timer = null;timer = setInterval(setTimer, 3000);$('.box').hover(function() { clearInterval(timer);}, function() { setTimer(); //鼠标移出后立即先执行一遍 timer = setInterval(setTimer, 3000);//然后再每隔3s执行}); 无缝轮播图通过这个demo,了解了transitionend这个方法 为了防止切换页面,重新回来时,定时器出现错乱,建议加入以下代码:123456789var timer = null;$(document).on("visibilitychange", function() { if (document.hidden === true) { clearInterval(timer); } else { timer = setInterval(slide, 2000); }}); -------------本文结束感谢您的阅读-------------