第一个问题：如何水平制作动画
第二个问题：无论图像大小如何，它必须覆盖其容器的高度和宽度，但要保持原始图像的比例。图像可以部分渲染。如何做到这一点？
第三个问题：关于幻灯片的代码，如果有人发现任何改进使其更轻，更优雅，
＃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 displayedsrc =http://i.stack.imgur.com/AIHnl.png/> < img class =img-header not-displayedsrc =http://i.stack.imgur.com/XQrms.png/>< / div>
这里的滑块是 position：relative; with top：100px; 您可以根据您的要求进行设置。不过我建议你保持它的位置相对。
滑块有宽度：700px 和高度：500px; ，您可以根据您的要求进行更改，无论图像的宽高比如何，或者所有图像具有不同的宽高比，都可以。
有一个数组用于加载图像，这些图像在一个位置被连续编号，所以您可能会对此有所了解。我已经在 JS文件
中对此进行了评论。您还可以按照您的要求更改滑块速度和延迟。
当您 hover 时，暂停滑动 strong>，它会在您离开图片后恢复。
摘录： div class =snippetdata-lang =jsdata-hide =falsedata-console =falsedata-babel =false>
html，body，* {保证金：0像素;宽度：100％; height：100％;}。slider_holder {margin-left：auto;保证金右：自动;显示：块;位置：相对;顶：100px的;宽度：1,024;高度：768px;背景：#eee; overflow：hidden;} .slider {width：auto;高度：100％;宽度：100％;白色空间：nowrap; overflow：hidden;}。pannel {margin：0px;显示：内联块;宽度：100％;高度：calc（100％ - 1px）; / * border：1px纯红色; * / background-size：cover！important;背景重复：不重复;背景位置：50％50％！重要; 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 class =pannel> < /跨度> < span class =pannel> < /跨度> < span class =pannel> < /跨度> < span class =pannel> < /跨度> < / DIV> < / body>
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>
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>
这篇关于自定义JQuery滑块（自动滑动）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
