Question

我试图通过链接在图像之间进行转换。我在this页面尝试了'演示6'。但它根本不起作用，我完成了教程页面中显示的所有步骤。这是我的测试网站（danithemes.fanscity.eu/shugar）的链接

这里有你正在使用的代码（教程页面也是如此，但以防万一......）

CSS代码：

p#cf7_controls {
  text-align:center;
}
#cf7_controls span {
  padding-right:2em;
  cursor:pointer;
}
#cf7 {
  position:relative;
  height:281px;
  width:450px;
  margin:0 auto 10px;
}
#cf7 img {
  position:absolute;
  left:0;
  -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  opacity:0;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
  filter: alpha(opacity=0);
}

#cf7 img.opaque {
  opacity:1;
  -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=1);
}

HTML CODE

<div id="cf7" class="shadow">
  <img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
</div>
<p id="cf7_controls">
  <span class="selected">Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
</p>

JS CODE

<script language="javascript" type="text/javascript">
$(document).ready(function() {
  $("#cf7_controls").on('click', 'span', function() {
    $("#cf7 img").removeClass("opaque");

    var newImage = $(this).index();

    $("#cf7 img").eq(newImage).addClass("opaque");

    $("#cf7_controls span").removeClass("selected");
    $(this).addClass("selected");
  });
});
</script>

我的问题是：我做错了什么？非常感谢你！

Answer 1

此处的问题出在您的HTML代码中：

<div id="cf7" class="shadow">
  <img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg;" />
</div>
<p id="cf7_controls">
  <span class="selected">Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
</p>

您正在使用相同的图片“http://css3.bradshawenterprises.com/images/Birdman.jpg”，这是没有意义的，您不会看到更改，只需更改其他图片路径。

<div id="cf7" class="shadow">
  <img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
  <img src="http://css3.bradshawenterprises.com/images/X.jpg;" />
  <img src="http://css3.bradshawenterprises.com/images/Y.jpg;" />
  <img src="http://css3.bradshawenterprises.com/images/Z.jpg;" />
</div>
<p id="cf7_controls">
  <span class="selected">Image 1</span>
  <span>Image 2</span>
  <span>Image 3</span>
  <span>Image 4</span>
</p>

您必须在HTML标题部分中包含此行。

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

见LIVE。

Answer 2

@Abdelrahman有正确的答案。您只需使用除鸟人图像之外的其他图像。我制作了一个使用相同图像但宽度不同的jsfiddle： http://jsfiddle.net/lsubirana/uzxt21yh/

<div id="cf7" class="shadow">
  <img class='opaque' src="http://css3.bradshawenterprises.com/images/Birdman.jpg" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg" width="350" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg"  width="250" />
  <img src="http://css3.bradshawenterprises.com/images/Birdman.jpg"  width="150" />
</div>

图像淡出链接时出错

2 个答案: