【发布时间】：2014-10-21 20:41:31
【问题描述】：
在此先感谢您提供任何帮助。我正在使用基本的 Jssor 褪色幻灯片。它在 Firefox、IE 和 Safari 上运行良好，但图像在 Chrome 中不会淡出，它们只是直接从一个图像过渡到下一个图像。我不知道哪里出了问题，而且我对 javascript 还不够熟悉，无法进行更深入的故障排除。这是正在进行的工作的链接：http://www.angelabrowndesign.com/salmon_river_brewery/index.php。
这是脚本主体标签内的代码：
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="/salmon_river_brewery/js/jquery-1.9.1.min.js"></script>
<script src="/salmon_river_brewery/js/jssor.slider.mini.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var _SlideshowTransitions = [{
$Duration: 2000,
$Delay: 40,
$During:{$Left:[0.6,0.8]},
$FlyDirection: 2,
$Easing:{$Left:$JssorEasing$.$EaseInCubic,$Opacity:$JssorEasing$.$EaseLinear},
$ScaleHorizontal:0.3,
$Opacity: 2 }];
var options = {
$DragOrientation: 3,
$AutoPlay: true,
$SlideDuration: 2000,
$AutoPlayInterval: 4500,
$SlideshowOptions: { //Options which specifies enable slideshow or not
$Class: $JssorSlideshowRunner$, //Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //Transitions to play slide, see jssor slideshow transition builder
$TransitionsOrder: 1, //The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: 2, //0 After Slideshow, 2 Always
$ContentMode: false //Whether to trait content as slide, otherwise trait an image as slide
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
更新：我已经能够调整 javascript，以便在 Chrome 中获得淡入淡出效果。然而，现在（同样，仅在 Chrome 中），图像之间有一段时期，根本没有图像出现，只有页面背景，然后新图像有点“颠簸”到框架中。它不像其他浏览器那么流畅。以下是更新后的相关代码：
<script type="text/javascript" src="/salmon_river_brewery/js/modernizr.custom.13935.js"></script>
</head>
<body>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script src="/salmon_river_brewery/js/jssor.slider.mini.js"></script>
<script>
//Reference http://www.jssor.com/development/slider-with-slideshow.html
//Reference http://www.jssor.com/development/tool-slideshow-transition-viewer.html
var _SlideshowTransitions = [
//Fade
{$Duration:700,$Opacity:2,$Brother:{$Duration:1000,$Opacity:2}}
];
</script>
<script>
jQuery(document).ready(function ($) {
var options = {
$DragOrientation: 3, //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)
$AutoPlay: true, //[Optional] Whether to auto play, to enable slideshow, this option must be set to true, default value is false
$AutoPlayInterval: 1500, //[Optional] Interval (in milliseconds) to go for next slide since the previous stopped if the slider is auto playing, default value is 3000
$SlideshowOptions: { //[Optional] Options to specify and enable slideshow or not
$Class: $JssorSlideshowRunner$, //[Required] Class to create instance of slideshow
$Transitions: _SlideshowTransitions, //[Required] An array of slideshow transitions to play slideshow
$TransitionsOrder: 1, //[Optional] The way to choose transition to play slide, 1 Sequence, 0 Random
$ShowLink: true //[Optional] Whether to bring slide link on top of the slider when slideshow is running, default value is false
}
};
var jssor_slider1 = new $JssorSlider$("slider1_container", options);
});
</script>
<header class="pageHeader cf">
<div id="slides">
<div id="slider1_container" style="position: relative; width: 785px; height: 305px;">
<div u="loading" style="position: absolute; top: 0px; left: 0px;">
<div style="filter: alpha(opacity=70); opacity:0.7; position: absolute; display: block;
background-color: #000; top: 0px; left: 0px;width: 100%;height:100%;">
</div>
<div style="position: absolute; display: block; background: url(/salmon_river_brewery/js/loading.gif) no-repeat center center;
top: 0px; left: 0px;width: 100%;height:100%;">
</div>
</div>
<div u="slides" style="cursor: move; position: absolute; overflow: hidden; left: 0px; top: 0px; width: 785px; height: 305px;">
<div><img src="/salmon_river_brewery/images/image-header3.jpg" width="785" height="305" class="slideshow" /></div>
<div><img src="/salmon_river_brewery/images/image-header4.jpg" width="785" height="305" class="slideshow" /></div>
<div><img src="/salmon_river_brewery/images/image-header1.jpg" width="785" height="305" class="slideshow" /></div>
<div><img src="/salmon_river_brewery/images/image-header5.jpg" width="785" height="305" class="slideshow" /></div>
<div><img src="/salmon_river_brewery/images/image-header2.jpg" width="785" height="305" class="slideshow" /></div>
</div></div></div>
</header>
【问题讨论】：
-
如果您发布在您的问题中不起作用的代码，您更有可能获得有用的答案。
-
编辑您的问题以包含代码，使用代码格式（每行开头四个空格）。
-
现在知道了。对不起，这是我第一次在这个论坛发帖。感谢您的耐心等待。
标签： javascript jquery google-chrome jssor