All geek questions in one place

How to create a simple slider using jquery (without using a plug-in)?

<script> var img = function(){ $("#slider").animate({"left":"-=1775px"},10000,function(){ $("#slider").animate({"left":"0px"},10000); img(); }); }; img(); </script>

I used animation properties in jquery, but I want the loop to display three images continuously.

+6
source share
2 answers

I once created a small js plugin that does this, you can see the code here:

 $.fn.luckyCarousel = function(options) { var car = this; var settings = $.extend( { 'delay' : 8000, 'transition' : 400 }, options); car.append($('<div>').addClass('nav')); var nav = $('.nav', car); var cnt = $("ul", car); var car_w = car.width(); var carItems = $('li', car); $(cnt).width((carItems.length * car_w) + car_w); $(carItems).each(function(i) { var dot_active = (!i) ? ' active' : ''; $(nav).prepend($('<div>').addClass('dot dot' + i + dot_active).bind('click', function(e) { slideSel(i); })); }); $(carItems).css('visibility', 'visible'); $(cnt).append($(carItems).first().clone()); car.append(nav); var sel_i = 0; var spin = setInterval(function() { slideSel('auto') }, settings.delay); function slideSel(i) { if (i == 'auto') { sel_i++; i = sel_i; } else { clearInterval(spin) } var position = $(cnt).position(); var t = car_w * -i; var last = false; var d = t - position.left; if (Math.abs(t) == cnt.width() - car_w) { sel_i = i = 0; } $(cnt).animate({ left: '+=' + d }, settings.transition, function() { $('.dot', car).removeClass('active'); $('.dot' + i, car).addClass('active'); if (!sel_i) { $(cnt).css('left', '0'); } }); sel_i = i; } }

http://plnkr.co/edit/bObWoQD8sGYTV2TEQ3r9

https://github.com/luckyape/lucky-carousel/blob/master/lucky-carousel.js

The code has been adapted for use without the plugin architecture here: http://plnkr.co/edit/9dmfzcyEMtukAb4RAYO9

Hope this helps, g

+3
source 
 var Slider = new function () { var that = this; var Recursion = function (n) { setTimeout(function () { console.log(n); $('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder. if (n != 0) Recursion(n - 1); else Recursion(5); }, 3000); }; var d = Recursion(5); }; 

  var Slider = new function () { var that = this; var Recursion = function (n) { setTimeout(function () { console.log(n); $('#sub_div img').attr('src', '/Images/' + n + '.JPG').addClass('current'); // n like 1.JPG,2.JPG .... stored images into Images folder. if (n != 0) Recursion(n - 1); else Recursion(5); }, 3000); }; var d = Recursion(5); }; 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script src="~/JS/Ajaxcall.js"></script> <title>Index</title> </head> <body> <div style="background: rgb(255, 106, 0) none repeat scroll 0% 0%; padding: 80px;" id="slider_div"> <div id="sub_div"> <img src="~/Images/0.JPG" style="width: 100%; height: 452px;"> </div> </div> </body> </html>
+1
source

Source: https://habr.com/ru/post/989757/

More articles:


All Articles