自定义JQuery滑块（自动滑动）

Question

I'm trying to make image slider with my own without using plugins.

1st question : How to make the animation horizontally

2nd question : Whatever the size of the image, it must cover the height and width of its container, but keeping the proportionalities original image. The image can be rendered partially. How to make this?

3rd question : About the code of the slide, if anyone finds any improvement to make it lighter and more elegant, would be welcome.

 $(function(){ setInterval(function(){ var displayed = $(".img-header.displayed"); displayed.animate({opacity : 0}, 500, function() { displayed.css("display","none"); displayed.addClass("not-displayed").removeClass("displayed"); if(displayed.next(".img-header.not-displayed").length == 0){ $(".img-header:first").css("display","inline-block").css("opacity","1"); $(".img-header:first").addClass("displayed").removeClass("not-displayed"); $(".img-header:first").animate({opacity : 1}, 500); } else{ displayed.next(".img-header.not-displayed").css("display","inline-block").css("opacity","1"); displayed.next(".img-header.not-displayed").addClass("displayed").removeClass("not-displayed"); displayed.next(".img-header.not-displayed").animate({opacity : 1}, 500); } }); }, 4000); }); 

 #slider-container{height: 200px; width: 200px;} #slider-container img.img-header{ width: 100%; height: auto;} .displayed{display: inline-block;} .not-displayed{display: none;} 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="slider-container"> <img class="img-header displayed" src="http://i.stack.imgur.com/AIHnl.png" /> <img class="img-header not-displayed" src="http://i.stack.imgur.com/XQrms.png" /> </div> 

Answer 1

I think you might be looking for something like this.

The slider here is position:relative; with top:100px; you can set as per your requirement. Still i suggest you to keep it positioned relative.

Slider has width:700px and height:500px; , you can change as per your requirement, it will be fine for whatever aspect ratio of image you have or all images with different aspect ratio.

There is an array for images to load which are serially numbered in one location, so you may give little more understanding into that. I have made a comment for that in JS file

Also you could change slider speed and delay as per your requirements.

When you hover over image it will pause the slider , which resumes after you leave image.

Snippet :

 $(document).ready(function(){ var noPannel = document.getElementsByClassName("pannel").length; var i; var imgArr = [ ]; var pannelWidth = $(".slider_holder").width(); var totalWidth = noPannel*pannelWidth; for (i=1;i<=noPannel;i++) { imgArr[i] = "http://www.picget.net/background/" + i + ".jpg"; //if you have somewhere on other path //imgArr[i] = " " + i + ".jpg"; //use this if you have image in same folder/path. } for(i=1;i<=noPannel;i++) { $(".pannel:nth-child("+i+")").css("background","url("+imgArr[i]+")"); } function jsslider() { var curScroll = $(".slider").scrollLeft(); var endScroll = totalWidth - (pannelWidth*2); if(curScroll<=endScroll) { $(".slider").animate({scrollLeft: '+=' + pannelWidth +'px'},900,"swing");// Replace 900 for speed } else { $(".slider").animate({scrollLeft: '0px'},500,"swing"); // Replace 500 for speed to go bck to first } } var interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide. $(".pannel").hover(function () { clearInterval(interval); }, function () { interval = setInterval(jsslider, 3000); // Replace 3000 for delay between each slide. }); }); // document.ready ENDS 

 html, body, * { margin:0px; width:100%; height:100%; } .slider_holder { margin-left:auto; margin-right:auto; display:block; position:relative; top:100px; width:1024px; height:768px; background:#eee; overflow:hidden; } .slider { width:auto; height:100%; width:100%; white-space: nowrap; overflow:hidden; } .pannel { margin:0px; display:inline-block; width:100%; height:calc(100% - 1px); /*border:1px solid red;*/ background-size:cover !important; background-repeat:no-repeat; background-position:50% 50% !important; position:relative; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <body onload="sliderFunc()"> <div class="slider_holder"> <div class="slider"> <span class="pannel"> </span> <span class="pannel"> </span> <span class="pannel"> </span> <span class="pannel"> </span> <span class="pannel"> </span> </div> </div> </body>