javascript - aspdotnetstorefront Javascript 不起作用

Question

我的 Javascript 和 jQuery 代码在店面中工作时遇到问题。我尝试使用两种不同的方法来创建滑块，它们都不会在店面中起作用，但在商店外也不会出现问题。我已经厌倦了更改文件位置并为我的自定义文件创建了新目录，但似乎没有任何效果。认为问题出在我的工作上，我再次尝试了开箱即用的免费下载，但一旦在 ASPDOTNETSTOREFRONT 程序中，一切都会显示出来，但脚本停止工作。任何想法或帮助？

Answer 1

如果它比使用 JavaScript 更容易的话，你可以看看这样的东西。

在您的管理员中创建一个新主题并将其命名为 newhomebanner

代码示例

<div id="slides">
  <div class="slides_container">
    <div class="slide"><a href="/c-1-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image.jpg" /></a></div>
    <div class="slide"><a href="/c-2-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image2.jpg" /></a></div>
    <div class="slide"><a href="/c-3-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image3.jpg" /></a></div>
    <div class="slide"><a href="/c-4-example.aspx"><img alt="text" src="App_Themes/Skin_1/images/image4.jpg" /></a></div>
  </div>
</div>

在您的主页模板中，将其添加到结束标题标记之后

<!-- Main Banner Start -->
<div class="main_banner clearfix">
  <asp:Literal runat="server" Text="<%$ Tokens: Topic, newhomebanner%>" />
</div><!-- Main Banner End -->

在 App_Themes/Skin1 的 style.css 中添加

/* Homepage Slides */
#slides {height:340px;}
.slides_container{width:930px; overflow:hidden; position:relative; display:none; border:4px solid #e1e1e1; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius:5px;}
.slides_container .slide{width:930px; height:320px;}
.slides_container .slide img{display:block;}

.pagination{margin:-20px 11px 0 0;  float:right; z-index:48; position:relative;}
.pagination li{float:left; margin:0 1px; list-style:none;}
.pagination li a{display:block; width:12px; height:0; padding-top:12px; background-image:url(images/pagination.png); background-position:0 0; float:left; overflow:hidden; outline:none;}
.pagination li.current a{background-position:0 -12px;}

然后将这两个 jscripts 添加到您的脚本库并将此代码添加到您的主模板

<!--JQUERY BANNER START -->

<script src="jscripts/jquery.easing.1.3.js"></script>
<script src="jscripts/slides.min.jquery.js"></script>
<script>
  $(function(){
    $('#slides').slides({
      preload: true,
      preloadImage: 'images/loading.gif',
      play: 5000,
      pause: 2500,
      hoverPause: true
    });
  });
</script>    

<!--JQUERY BANNER END -->

显然，这只是获取链接到某个类别的旋转横幅的示例，但如果你让它工作，你可以改变速度、横幅数量等。