我在我的网站上插入了幻灯片。我能够将CSS
position
完全放在我想要的位置。它工作得很好。但是,当我在每个图像中输入我的源代码并更改了“标题”(每张照片都有一个小标题)时,照片停止显示。他们出现了,直到我改变了每张照片的标题。除了标题,我没有改变任何东西。
我的错误可能是哪些建议?
以下是我的图片列表:
<style type="text/css"> #mhgallery img { display:none; } </style>
<div id="mhgallery"><img src="family gallery/images/3kids.jpg" title="All Dressed Up!" /><img src="family gallery/images/boysnguns.jpg" title="Laser Tag" />
<img src="family gallery/images/boyswisconsindells.jpg" title="This was taken on our last Wisconsin Dells Trip" />
<img src="family gallery/images/carridewithkids.jpg" title="Typical Car Ride For Us" />
<img src="family gallery/images/grandmaandcharlie.jpg" title="Grandma and puppy Charlie" />
<img src="family gallery/images/Jacobandjuliasleeping.jpg" title="Two Peas in a Pod" />
<img src="family gallery/images/jacobandmomfaceshot.jpg" title="Jacob with Mom Never a Dull Moment" />
<img src="family gallery/images/jacobcakeface.jpg" title="Silly Jacob" />
<img src="family gallery/images/jacobchurch.jpg" title="Jacob" />
<img src="family gallery/images/jacobfootball.jpg" title="Jacob Football" />
<img src="family gallery/images/Jacobindesk.jpg" title="Jacob in an Old Fashioned Desk at a Museum" />
<img src="family gallery/images/JacobsFace.jpg" title="Jacobs" />
<img src="family gallery/images/jamesandjenahalloween.jpg" title="James & Jen joining in the Halloween Fun" />
<img src="family gallery/images/jamesandjencamping.jpg" title="Camping!!!!" />
<img src="family gallery/images/jameswithhisfish.jpg" title="James in his Glory" />
<img src="family gallery/images/jonathancakeface.jpg" title="Happy 1st Birthday Jonathan!" />
<img src="family gallery/images/jonathanface.jpg" title="Jonathan" />
<img src="family gallery/images/jonathaninahat.jpg" title="Love the Hat! Thanks Auntie Tanya!" />
<img src="family gallery/images/jonathantoys.jpg" title="Love my Toys" />
<img src="family gallery/images/jonthanonawalk.jpg" title="Jonathan Out for a Stroll" />
<img src="family gallery/images/juliaandjacobswing.jpg" title="Jacob and Julia Playing" />
<img src="family gallery/images/juliaartist.jpg" title="Our little artist" />
<img src="family gallery/images/juliagoeyhands.jpg" title="Gooey Fun!!" />
<img src="family gallery/images/juliainaturtle.jpg" title="Riding a Turtle is so Fun!" />
<img src="family gallery/images/juliamuddy.jpg" title="Tom-Boy" />
<img src="family gallery/images/julianna.slide.jpg" title="Look at the Fun!" />
<img src="family gallery/images/Juliannaanddaddybutterflyball.jpg" title="Butterfly Ball 2013" />
<img src="family gallery/images/juliannaplayground.jpg" title="More Camping Adventures" />
<img src="family gallery/images/juliaonthedock.jpg" title="Camping" />
<img src="family gallery/images/juliashoppingforhaloween.jpg" title="Shopping for Halloween" />
<img src="family gallery/images/juliaslide.jpg" title="Julianna Sliding" />
<img src="family gallery/images/justinboredface.jpg" title="Justin...bored.." />
<img src="family gallery/images/justinhelpingjonathan.jpg" title="Justin is a big help!" />
<img src="family gallery/images/Justininahat.jpg" title="Justin" />
<img src="family gallery/images/justinrollercoaster.jpg" title="Justin" />
<img src="family gallery/images/Justinsprofile.jpg" title="Justin" />
<img src="family gallery/images/kidsatchuckeecheese.jpg" title="Chuckee Cheese Fun" />
<img src="family gallery/images/kidsatdq.jpg" title="Local Dairy Queen Treat" />
</div>
这是我的 CSS :
.mhSlideshow {
position: relative;
display: inline-block;
margin-top: 20;
margin-bottom: 0;
margin-left: 200px;
}
.fullscreen {
position:fixed;
display:block;
top:0px;
left:0px;
z-index:10000;
margin:0 auto;
}
.mhSlideshowBg {
display:block;
position:absolute;
top:0px;
left:0px;
z-index:10;
}
.mhSlideshow img {
position:absolute;
top:0px;
left:0px;
display:none;
}
.slideContainer, .navArrowWrap {
position: relative;
display: block;
z-index: 100;
overflow: hidden;
visibility: hidden;
}
.bgWrap, .slide {
display:block;
position:absolute;
z-index:200;
height:100%;
}
.slice {
display:block;
position:absolute;
z-index:200;
height:100%;
}
.captionBar {
position:absolute;
left:0px;
z-index:400;
}
.caption {
margin:0 auto;
}
.caption a {
display:inline !important;
}
.navArrows a {
position:absolute;
display:block;
width:32px;
height:32px;
border:0;
top:40%;
z-index:300;
cursor:pointer;
}
.thumbBar {
position:absolute;
left:0px;
z-index:600;
display:block;
}
.thumbLeftArrow, .thumbRightArrow, .thumbPause, .thumbPlay, .thumbFullscreen{
position:absolute;
display:block;
width:30px;
height:30px;
border:0;
cursor:pointer;
}
.thumbLeftArrow {
left:0px;
}
.thum
JS
$(document).ready(function(){
$("#mhgallery").mhgallery({
width:600,
height:300,
scaleMode:'scaleToFit',
firstSlide:0,
randomPlay:false,
autoPlay:true,
backgroundMode:'transparent',
backgroundColor:'#333333',
showShadow:true,
showThumbShadow:true,
showPause:true,
showBorder:true,
borderSize:6,
borderColor:'#5E220F',
showFullscreen:true,
fullscreenBackgroundColor:'#333333',
fullscreenThumbArrowStyle:'white',
interval:3000,
effectSpeed:500,
showCaption:true,
textCSS:'.title {font-size:12px;font-weight:bold;font-family:Arial;color:#ffffff;line-height:200%;} .alt {font-size:12px;font-family:Arial;color:#ffffff;}',
captionPosition:'bottom',
captionBarColor:'#333333',
captionBarOpacity:0.8,
captionBarPadding:8,
captionAlign:'center',
showNavArrows:true,
autoHideNavArrows:true,
arrowStyle:'white',
showThumbs:true,
thumbSize:40,
thumbGap:8,
thumbBottom:-60,
thumbArrowStyle:'black',
thumbOpacity:0.8,
thumbBorderWidth:1,
thumbBorderColor:'#FFFFFF',
thumbBorderActiveColor:'#FFFFFF',
effect:'fade,slideLeft,slideRight,slideTop,slideBottom',
jsFolder:'js'
});
});