在特定大小的div幻燈片放映

Question

我有div和我添加一些圖像到幻燈片放映但部分圖像不是所有的圖像，我改變了圖像的寬度和高度，但仍然問題是什麼reasone這是snippt從我的代碼：

<link href="./CSS/js-image-slider.css" rel="stylesheet" type="text/css" /> 
<script src="./js/js-image-slider.js" type="text/javascript"></script> 
<div id="slider" width=100px height=100px> 
      <img src="./images/Health Care 2.jpg" alt="Health" width: 100px; 
    height: 100px; /> 
      <img src="./images/war.jpg" alt="War" width: 100px; 
    height: 100px;/> 
      <img src="./images/food.jpg" alt="Food" width: 100px; 
    height: 100px; /> 
      <img src="./images/education-it-hardware-579.jpg" alt="Education" width: 100px; 
    height: 100px;/> 
      <img src="./images/sport.jpg" alt="Sport" width: 100px; 
    height: 100px; /> 
      <img src="/images/technology.jpg" alt="Technology" width: 100px; 
    height: 100px;/> 
     </div> 

這個CSS：

/* http://www.menucool.com */ 

#sliderFrame {position:relative;width:700px;margin: 0 auto;} /*remove the "margin:0 auto;" if you want to align the whole slider to the left side*/ 

#ribbon {width:111px;height:111px;position:absolute;top:-4px;left:120px;background:url(ribbon.png) no-repeat;z-index:7;} 

#slider { 
    width: 250px; 
    height: 170px;/* Make it the same size as your images */ 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
    position:relative; 
    margin:0 auto;/*make the image slider center-aligned */ 
    box-shadow: 0px 1px 5px #999999; 
} 
#slider img { 
    position:absolute; 
    border:none; 
    display:none; 
} 

/* the link style (if an image is wrapped in a link) */ 
#slider a.imgLink { 
    z-index:2; 
    display:none;position:absolute; 
    top:0px;left:0px;border:0;padding:0;margin:0; 
    width:100%;height:100%; 
} 

/* Caption styles */ 
div.mc-caption-bg, div.mc-caption-bg2 { 
    position:absolute; 
    width:100%; 
    height:auto; 
    padding:0; 
    left:0px; /*if the caption needs to be aligned from right, specify by right instead of left. i.e. right:20px;*/ 
    bottom:0px;/*if the caption needs to be aligned from top, specify by top instead of bottom. i.e. top:150px;*/ 
    z-index:3; 
    overflow:hidden; 
    font-size: 0; 
} 
div.mc-caption-bg { 
    background-color:black; 
} 
div.mc-caption { 
    font: bold 14px/20px Arial; 
    color:#EEE; 
    z-index:4; 
    padding:10px 0;/*Adding a padding-left or padding-right here will make the caption area wider than its background. Sometimes you may need to define its width again here to keep it the same width as its background area (div.mc-caption-bg).*/ 
    text-align:center; 
} 
div.mc-caption a { 
    color:#FB0; 
} 
div.mc-caption a:hover { 
    color:#DA0; 
} 


/* ------ built-in navigation bullets wrapper ------*/ 
div.navBulletsWrapper { 
    top:460px; left:180px; /* Its position is relative to the #slider */ 
    width:150px; 
    background:none; 
    padding-left:20px; 
    position:relative; 
    z-index:5; 
    cursor:pointer; 
} 

/* each bullet */ 
div.navBulletsWrapper div 
{ 
    width:11px; height:11px; 
    background:transparent url(bullet.png) no-repeat 0 0; 
    float:left;overflow:hidden;vertical-align:middle;cursor:pointer; 
    margin-right:11px;/* distance between each bullet*/ 
    _position:relative;/*IE6 hack*/ 
} 

div.navBulletsWrapper div.active {background-position:0 -11px;} 


/* --------- Others ------- */ 
#slider 
{ 
    transform: translate3d(0,0,0); 
    -ms-transform:translate3d(0,0,0); 
    -moz-transform:translate3d(0,0,0); 
    -o-transform:translate3d(0,0,0); 
} 

Answer 1

你的語法是錯誤的。 它要麼：

width="100px" height="100px" 

或

style="width:100px; height:100px;" 

Answer 2

首先，您必須刪除兩個（寬度和高度）爲「menucool」腳本足夠聰明的CSS標準化的圖像，現在//他提供你這 /*調整到相同大小您的圖片*/,,

，因爲如果你跟着JS，你會發現，所有的動畫計算取決於寬度和高度,,

所以儘量使用帶有100像素* 100像素的圖像，無需手動CSS和更新#slider CSS

#slider { 
    width: 100px; 
    height: 100px;/* Make it the same size as your images */ 
    background:#fff url(loading.gif) no-repeat 50% 50%; 
    position:relative; 
    margin:0 auto;/*make the image slider center-aligned */ 
    box-shadow: 0px 1px 5px #999999; 
} 

看，這是你用

<div id="sliderFrame"> 
<div id="ribbon"></div> 
<div id="slider"> 
<img src="jsImgSlider/images/image-slider-1.jpg" alt="Welcome to Menucool Image Slider" /> 
<img src="jsImgSlider/images/image-slider-2.jpg" alt="" /> 
<img src="jsImgSlider/images/image-slider-4.jpg" alt="Pure Javascript. No jQuery. No flash." /> 
<img src="jsImgSlider/images/image-slider-5.jpg" alt="#htmlcaption" /> 
</div> 
</div>