我正在创建一个自定义轮播，其工作正常。
是)我有的:-
我有一个基本的代码，可以正常工作，轮播也可以在所有屏幕和设备上正常工作。
我想要的是:-
我必须在更改分辨率后重新加载元素。我希望我的插件自动加载当前屏幕分辨率的设置。
我尝试过的:
HTML
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<link href="s.css" rel="stylesheet" />
<script src="jquery.min.js"></script>
<meta name="viewport" content="widht=device-width, initial-scale=1" />
<script src="s.js"></script>
<script>
$(window).load(function(){
$( "#divstretch" ).Lslider(
{
SlideCount:5,
SlideMargin:20,
SmSlideCount : 3,
XsSlideCount : 2
});
});
</script>
</head>
<body>
<div class="Demo-Slider">
<ul id="divstretch">
<li><img target="" class="gall-img-big1" src="demo.jpg"></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
<li><a rel="group1" href="" class="fancybox"><img target="" class="gall-img-big1" src="demo.jpg"></a></li>
</ul>
</div>
</div>
</body>
</html>
JS
(function ($) {
var SlideCount = null;
var SlideMargin = null;
var SmSlideCount = null;
var XsSlideCount = null;
$.fn.Lslider = function (options) {
var Lcontainer = this;
var settings = $.extend({
// These are the defaults.
SlideCount: 4,
SmSlideCount: 3,
XsSlideCount: 2,
SlideMargin: 10
}, options);
return this.each(function () {
// We'll get back to this in a moment
SlideCount = settings.SlideCount;
SlideMargin = settings.SlideMargin;
SmSlideCount = settings.SmSlideCount
XsSlideCount = settings.XsSlideCount;
SlideCount = Math.round(SlideCount);
SmSlideCount = Math.round(SmSlideCount);
XsSlideCount = Math.round(XsSlideCount);
//paramiters
var LcontanerID = $(Lcontainer).attr('id')
var bigImgArray = $(Lcontainer).children();
//appending required html
$(Lcontainer).wrap('<div class="Lslider-Main"><div class="Lslider"></div></div>');
var Pcontainer = $(Lcontainer).parent();
var parentwidth = $(Pcontainer).width();
var SlideWidth = null;
//creating prev and next nav
var MainContainer = $(Pcontainer).parent();
$(MainContainer).prepend('<a class="Lslide-left">Prev</a>');
$(MainContainer).append('<a class="Lslide-right">Next</a>');
var next = $('.Lslide-right');
var prev = $('.Lslide-left');
//previous button
$(prev).click(function () {
var stretch = $(Lcontainer).css('left');
stretch = stretch.replace('px', '');
stretch = parseInt(stretch);
var incStretch = stretch + LIwidth + SlideMargin;
if (stretch < 0) {
$(Lcontainer).animate({
left: incStretch
});
}
});
//next button
$(next).click(function () {
var stretch = $(Lcontainer).css('left');
stretch = stretch.replace('px', '');
stretch = stretch.replace('-', '');
stretch = parseInt(stretch);
var incStretch = stretch + LIwidth + SlideMargin;
var strechWidth1 = $(Lcontainer).width();
var strechWidth2 = $(Lcontainer).parent().width();
var strechWidth = strechWidth1 - strechWidth2 - LIwidth;
if (stretch <= strechWidth || stretch == '') {
$(Lcontainer).animate({
left: - incStretch
});
}
});
//-------------------------------------//
var WSize = $(window).width();
var WHeight = $(window).height();
if (WSize < 481) {
SlideWidth = parentwidth / XsSlideCount;
}
else if (WSize < 768) {
SlideWidth = parentwidth / SmSlideCount;
}
else {
SlideWidth = parentwidth / SlideCount;
}
$(bigImgArray).width(SlideWidth - SlideMargin);
$(bigImgArray).css('margin-right', SlideMargin)
//appending the height and width to containers
var totleLI = $(bigImgArray).length;
var LIwidth = $(bigImgArray).width();
var totalWidth = LIwidth * totleLI;
var totleHeight = $(bigImgArray).height();
$(Lcontainer).width(totalWidth);
$(Lcontainer).height(totleHeight);
$(Pcontainer).height(totleHeight);
});
}
}) (jQuery);
css
.Demo-Slider{
width:500px;
margin:0px auto;
max-width:100%;
position:relative;
}
@media only screen and (max-width:768px){
.Demo-Slider{
width:100%;
}
}
.Lslider{
position:relative;
overflow:hidden;
}
.Lslider ul li{
width:115px;
margin-right:10px;
float:left;
display:block;
}
.Lslider ul li img{
max-width:100%;
}
.Lslider ul {
margin:0px;
padding:0px;
left:0px;
right:0px;
position: absolute;
}
.Lslider-Main .Lslide-left{
position: absolute;
left: -20px;
top: 0px;
bottom: 0px;
margin: auto;
height: 30px;
}
.Lslider-Main .Lslide-right{
position: absolute;
right: -20px;
top: 0px;
bottom: 0px;
margin: auto;
height: 30px;
}
请查看代码，并给我您的建议或解决方案。
最佳答案
方法1:
您可以将函数绑定(bind)到resize事件。每次调整大小时，它将再次运行您的函数。如果在项目上运行两次代码会导致问题，则可能会导致问题。
$( window ).resize(function() {
// Remove slider and redo
$( "#divstretch" ).Lslider({
SlideCount:5,
SlideMargin:20,
SmSlideCount : 3,
XsSlideCount : 2
});
});
方法2:
或者，您可以将要重新运行的代码包装在resize函数中。而且它会自动调整。
$( window ).resize(function() {
....
//appending the height and width to containers
var totleLI = $(bigImgArray).length;
var LIwidth = $(bigImgArray).width();
var totalWidth = LIwidth * totleLI;
var totleHeight = $(bigImgArray).height();
$(Lcontainer).width(totalWidth);
$(Lcontainer).height(totleHeight);
$(Pcontainer).height(totleHeight);
....
});
只要确保在加载后触发调整大小代码即可。
$(window).trigger('resize');
关于javascript - 如何在我的自定义插件中绑定(bind)大小调整事件，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28361407/