aspdotnetstorefront Javascript 不起作用答案

【问题标题】：aspdotnetstorefront Javascript not workingaspdotnetstorefront Javascript 不起作用
【发布时间】：2014-04-07 23:40:58
【问题描述】：

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

【问题讨论】：

标签： javascript jquery aspdotnetstorefront

【解决方案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 -->

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

【讨论】：