Stop images from stacking?
I'm making a little jQuery plugin that creates a slider for images and content. However, the spans generated for the images/content are stacking ontop of another and overflowing vertically instead of sitting beside each other and overflowing horizontally. I've tried numerous ways using css and it doesn't work... The code I'm using is below:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!--<script src="http://code.jquery.com/jquery-latest.min.js"></script>-->
<script src="jquery.js"></script>
</head>
<body>
<开发者_开发百科;script type="text/javascript">
(function($) {
$.fn.slider = function(options) {
var settings = {
'delay': '5',
'height': '500px',
'width': '500px',
'anim': 'slide',
'slidedir':'right',
};
var options = $.extend(settings, options);
return this.each(function() {
var o = options;
var slidenum=0;
$(this).hide();
$(this).before('<div id="jqueryslider" style="overflow:scroll;max-height:'+o.height+';height:'+o.height+';width:'+o.width+'"></div>');
$(this).find('li').each(function(){
slidenum++;
var title=$(this).attr('title');
var html=$(this).html();
$('#jqueryslider').append('<span class="slidercont">'+html+'</span>');
$('.slidercont img').css('width',o.width).css('height',o.height);
});
});
};
})(jQuery);
$(document).ready(function(){
$('#slider').slider();
});
</script>
<ul id="slider">
<li title="Tulips"><img src="Tulips.jpg" /></li>
<li title="Penguin"><img src="Penguins.jpg" /></li>
</ul>
</body>
</html>
IMPORTANT! IT has nothing to do with the li's. Those are only there for organizational purposes. The actual thing that is displayed is in spans that have the html of the li's. The UL and LI's are hidden when the script is run.
The other answers at this point are just looking at the pre-js HTML markup. The post-jquery markup is quite different, so those won't fix your problem..
- Changed the
.slidercontwrapper from<span>to<div> - Added
display: inline-block;to.slidercont - Changed settings width/height to
intfromstring(no 'px', added that to function) - After looping, set the width of
#jqueryslidertooptions.width * slidenum
This is how I usually approach this problem with sliders. Favorited this so I can see if I'm doing this wrong...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<!--<script src="jquery.js"></script>-->
</head>
<body>
<style tyle="text/css">
.slidercont {
display:inline-block;
}
</style>
<script type="text/javascript">
(function($) {
$.fn.slider = function(options) {
var settings = {
'delay': '5',
'height': 500,
'width': 500,
'anim': 'slide',
'slidedir':'right',
};
var options = $.extend(settings, options);
return this.each(function() {
var o = options;
var slidenum=0;
$(this).hide();
$(this).before('<div style="overflow:scroll;max-height:'+o.height+'px;height:'+o.height+'px;width:'+o.width+'px;"><div id="jqueryslider"></div></div>');
$(this).find('li').each(function(){
slidenum++;
var title=$(this).attr('title');
var html=$(this).html();
$('#jqueryslider').append('<div class="slidercont">'+html+'</div>');
$('.slidercont img').css('width',o.width + 'px').css('height',o.height + 'px');
});
$('#jqueryslider').css("width", slidenum*o.width);
});
};
})(jQuery);
$(document).ready(function(){
$('#slider').slider();
});
</script>
<ul id="slider">
<li title="Tulips"><img src="Tulips.jpg" /></li>
<li title="Penguin"><img src="Penguins.jpg" /></li>
</ul>
</body>
</html>
Add display: inline; to the <li>s. List items are stacked by default (they have display: list-item).
You should try this CSS for the <li> tags:
#slider li {
list-style-type:none;
display:inline;
}
I hope this helps.
加载中,请稍侯......
精彩评论