使用Jquery，javascript和css自动播放图像滑块

本文介绍了使用Jquery，javascript和css自动播放图像滑块的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述 29岁程序员，3月因学历无情被辞！ 我用jQuery和javascript创建了这个滑块，但我无法使用outplay和next-previous按钮来完成这个工作。 我需要这个滑块的图像作为标题说，你可以帮助我的左/右侧动画？ $ （document）.ready（function（）{ $（'。sp'）。first（）。addClass（'active'）; '（'。sp'）。hide（）; $（'。active'）。show（）; $（'。active'）。removeClass（'active'）。addClass（'oldActive'）; if （'。'oldActive'）。is（'：last-child'）） { $（'。sp'）。first（）。addClass（'active'）; } else { $（'。oldActive'）。next（）。addClass（'active'）; } $（'。oldActive' ）.removeClass（'oldActive'）; setTimeout（'.active'，1000）; $（'。sp'）。fadeOut（）; $（'.active'） .fadeIn（）; 其他部分代码在jsfiddle链接这是代码 https://jsfiddle.net/ghy14p0f/1/ $（document）.ready（function（） {（'。sp'）。first（）。addClass（'active'）; $（'。sp'）。hide（）; $（'.active'）。show（）; $（'＃button-下一个'）。click（function（）{$（'.active'）.removeClass（'active'）.addClass（'oldActive'）; if（$（'。oldActive'）。（'：last-child' ））{$（'。sp'）。first（）。addClass（'active'）;} else {$（'。oldActive'）。next（）。addClass（'active'）;} $（'。oldActive '）.hide（slide，{direction：right}，600）.removeClass（'oldActive'）; $（'.active'）。delay（400）.show（slide，{direction： （'active'）。removeClass（'oldActive'）; if（）;}（） $（'。oldActive'）。（'：first-child'））{$（' （'。''）。}（）。addClass（'active'）;} else {$（'。oldActive'）。prev（）。addClass（'active'）;} $（'。oldActive'）。hide（ slide，{direction：left}，600）.removeClass（'oldActive'）; $（'。active'）。delay（400）.show（slide，{direction：right}，600）; }）;}）; ＃slider-wrapper {width ：500px; height：200px;}＃slider {width：500px; height：200px; position：relative;}。sp {width：500px; height：200px; position：absolute;} img {height：200px;}＃nav {margin-top：20px;宽度：100％;}＃button-previous {border：1px dotted blue; background-color：#ccc; float：left;}＃button-next {border：1px dotted blue; background-color：#ccc; float：right;} < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< link href =https://code.jquery.com/ui/ 1.12.1 / themes / smoothness / jquery-ui.cssrel =stylesheet/>< script src =https://code.jquery.com/ui/1.12.1/jquery-ui.min。 js>< / script>< div id =slider-wrapper> < div id =slider> < div class =sp> < img src =https://upload.wikimedia.org/wikipedia/commons/3/32/Bianco_e_Rosso_(Croce)_e_Rosso.png>第一张图片< / div> < div class =sp> < img src =https://upload.wikimedia.org/wikipedia/commons/f/f0/600px_Rosso_e_Giallo.PNG>第二张图片< / div> < div class =sp> < img src =https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg>第三张图片< / div> < / div>< div id =nav>< / div>< div id =button-previous> prev<下一页>下一页< / div> i have created this slider with jQuery and javascript but I can't make this work with the outplay and with next-previous button.I need this slider for image as title said, could you help me with left/right side animation?$(document).ready(function(){$('.sp').first().addClass('active');$('.sp').hide();$('.active').show();$('.active').removeClass('active').addClass('oldActive'); if ( $('.oldActive').is(':last-child')) { $('.sp').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); } $('.oldActive').removeClass('oldActive'); setTimeout('.active', 1000); $('.sp').fadeOut(); $('.active').fadeIn();the other part of the code is in jsfiddle linkthis is the code https://jsfiddle.net/ghy14p0f/1/ 解决方案 Easiest way to do the slide is to include the jquery-ui module, to allow for effects and easing. I've added it below, and created the transitions. Also, in your fiddle, you never actually tell it to use jquery -- so yeah, it would never work. I didn't actually change much, the only lines I edited were the fadeout/fadein to make them transitions. Best of luck!!$(document).ready(function() { $('.sp').first().addClass('active'); $('.sp').hide(); $('.active').show(); $('#button-next').click(function() { $('.active') .removeClass('active') .addClass('oldActive'); if ($('.oldActive').is(':last-child')) { $('.sp').first().addClass('active'); } else { $('.oldActive').next().addClass('active'); } $('.oldActive').hide("slide", { direction: "right" }, 600).removeClass('oldActive'); $('.active').delay(400).show("slide", { direction: "left" }, 600); }); $('#button-previous').click(function() { $('.active').removeClass('active').addClass('oldActive'); if ($('.oldActive').is(':first-child')) { $('.sp').last().addClass('active'); } else { $('.oldActive').prev().addClass('active'); } $('.oldActive').hide("slide", { direction: "left" }, 600).removeClass('oldActive'); $('.active').delay(400).show("slide", { direction: "right" }, 600); });});#slider-wrapper { width: 500px; height: 200px;}#slider { width: 500px; height: 200px; position: relative;}.sp { width: 500px; height: 200px; position: absolute;}img { height: 200px;}#nav { margin-top: 20px; width: 100%;}#button-previous { border: 1px dotted blue; background-color: #ccc; float: left;}#button-next { border: 1px dotted blue; background-color: #ccc; float: right;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css" rel="stylesheet"/><script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script><div id="slider-wrapper"> <div id="slider"> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/commons/3/32/Bianco_e_Rosso_(Croce)_e_Rosso.png"> First Image </div> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/commons/f/f0/600px_Rosso_e_Giallo.PNG"> Second Image </div> <div class="sp"> <img src="https://upload.wikimedia.org/wikipedia/en/4/4c/Flag_of_Sweden.svg"> Third Image </div> </div></div><div id="nav"></div><div id="button-previous">prev</div><div id="button-next">next</div> 这篇关于使用Jquery，javascript和css自动播放图像滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！ 上岸，阿里云！