我正在尝试在主页上设置一个带滑块控件的页面。我设计了离线页面,他们正在成功地工作,所有图像都按预期工作,但是当我将它们上传到我的MVC4页面时,javascript箭头一直在旋转,部分图像正在显示但是外观功能似乎没有工作。
有人可以查看我的代码,看看他们是否能看到我错在哪里:
_Layout.cshtml
<!DOCTYPE html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" id="view" content="width=device-width minimum-scale=1, maximum-scale=1" />
<title>MetaAwareness</title>
<link rel="stylesheet" type="text/css" href= "@Url.Content("~/Content/meta-foundation.min.css")" />
<link rel="stylesheet" type="text/css" href= "@Url.Content("~/Content/meta-style.css")" />
<link rel="stylesheet" type="text/css" href= "@Url.Content("~/Content/meta-color.css")" title="color6" />
<link rel="stylesheet" type="text/css" href= "@Url.Content("~/Content/opensans_stylesheet.css")"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@Styles.Render("~/Content/css")
@Scripts.Render("~/bundles/modernizr")
</head>
<body>
<header>
<div class="content-wrapper">
<div class="container region1wrap">
<div class="row top_header">
<div class="eight columns">
<div class="login">
<a href="#" class="button" data-reveal-id="Login"><i class="icon-signin"></i>Login</a>
</div>
<div class="login user-control"> You are not logged in!</div>
</div>
<div class="four columns">
<div class="row collapse topheader-search">
<div class="eight mobile-three columns">
<input type="text" placeholder="Enter search terms" />
</div>
<div class="four mobile-one columns">
<a href="#" class="button expand"><i class="icon-search"></i>Search</a>
</div>
</div>
</div>
</div>
</div>
<div class="container region2wrap">
<div class="row">
<div class="three columns">
<div id="logo">
<a href="meta-index.html"><img src= "@Url.Content("~/Images/logo.png")" alt="MetaAwareness" title="MetaAwareness" /></a>
</div>
</div>
<div class="nine columns">
<nav class="top-bar">
<ul>
<li class="name"><h1><a href="#"> Please select your page</a></h1></li>
<li class="toggle-topbar"><a href="#"></a></li>
</ul>
<nav>
<ul class="right">
<li><a class="active" href="@Url.Action("Index")"><i class="icon-home"></i>Home</a></li>
<li><a href="meta-media.html"><i class="icon-laptop"></i>Media</a></li>
<li><a href="meta-course.html"><i class="icon-tasks"></i>Courses</a></li>
<li><a href="meta-profile.html"><i class="icon-user"></i>Profile</a></li>
<li><a href="@Url.Action("Contact")"><i class="icon-comments"></i>Contact</a></li>
</ul>
</nav>
</nav>
</div>
</div>
</div>
</div>
</header>
<div id="body">
@RenderSection("featured", required: false)
<section class="content-wrapper main-content clear-fix">
@RenderBody()
</section>
</div>
<!--Start of the footer section -->
<footer>
<div class="container region10wrap">
<div class="row footer_bottom">
<div class="six columns">
<p class="copyright">Copyright © 2013 MetaAwareness. All rights reserved.</p>
</div>
<div class="six columns">
<ul class="link-list">
<li><a href="@Url.Action("Index")">Home</a></li>
<li><a href="#">Media</a></li>
<li><a href="#">Profile</a></li>
<li><a href="@Url.Action("Contact")">Contact</a></li>
</ul>
</div>
</div>
</div>
<div id="Login" class="reveal-modal login-modal">
<h2>Login</h2>
<p>Please login using your credentials recived by email when you register.</p>
<form>
<label>Username</label>
<input type="text" placeholder="" />
<label>Password</label>
<input type="text" placeholder="" />
<p class="right"><a href="#">I forgot my password</a> | <a href="#">Resend activation e-mail</a></p>
<input type="submit" class="medium button" value="Login!" />
</form>
<a class="close-reveal-modal"><i class="icon-remove"></i></a>
</div>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/foundation.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/modernizr.foundation.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.plugins.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/slider-revolution/jquery.themepunch.revolution.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.carouFredSel-6.0.3-packed.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/Scripts/jquery.touchSwipe.min.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/jquery.titanlighbox.js")"></script>
<script type="text/javascript" src= "@Url.Content("~/plugins/titan/js/prettify.js")"></script>
<script type="text/javascript"src= "@Url.Content("~/Scripts/meta-app-head.js")"></script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript"src= "@Url.Content("~/Scripts/meta-app.js")"></script>
</footer>
</body>
Index.cshtml
@{
ViewBag.Title = "Home Page";
}
<div class="container region3wrap">
<div class="mainslider-container responsive">
<div class="mainslider">
<ul>
<li data-transition="slotfade-horizontal" data-slotamount="10" data-thumb= "@Url.Content("~/Images/thumb0.jpg")"> <img src= "@Url.Content("~/Images/thumb0.jpg")"/>
<div class="caption lft"
data-x="80" data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "@Url.Content("~/Images/pic_slider_2_1.png")" />
</div>
<div class="caption lfl"
data-x="40"
data-y="13"
data-speed="900"
data-start="1300"
data-easing="easeOutBack"> <img src= "@Url.Content("~/Images/girl.png")" />
</div>
<div class="caption lft big_white"
data-x="505"
data-y="100"
data-speed="400"
data-start="1700"
data-easing="easeOutExpo">High Value, Comprehensive
</div>
<div class="caption lft big_cyan"
data-x="505"
data-y="144"
data-speed="400"
data-start="1900"
data-easing="easeOutExpo">E-learning Solutions
</div>
<div class="caption lft blue"
data-x="505"
data-y="186"
data-speed="400"
data-start="2100"
data-easing="easeOutBack">Inventore veritatis et quasi architecto <br />
beatae dicta sed ut perspiciatis unde omnis<br />
iste natus laudantium.
</div>
</li>
<li data-transition="boxfade" data-slotamount="7" data-thumb= "@Url.Content("~/Images/thumb5.jpg")"> <img src= "@Url.Content("~/Images/thumb5.jpg")" />
<div class="caption sfb"
data-x="0"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutSine"> <img src= "@Url.Content("~/Images/course-banner2.png")" />
</div>
<div class="caption lfb small_white"
data-x="40"
data-y="90"
data-speed="600"
data-start="1800"
data-easing="easeOutExpo">Kickstart Your
</div>
<div class="caption lfb medium_white"
data-x="40"
data-y="130"
data-speed="600"
data-start="2200"
data-easing="easeOutExpo">E-learning Experience
</div>
<div class="caption lfb large_white"
data-x="40"
data-y="185"
data-speed="600"
data-start="2600"
data-easing="easeOutExpo">TODAY...
</div>
</li>
<li data-transition="curtain-3" data-slotamount="7" data-thumb="@Url.Content("~/Images/thumb2.jpg")"> <img src= "@Url.Content("~/Images/thumb2.jpg")" />
<div class="caption lfl"
data-x="35"
data-y="0"
data-speed="900"
data-start="900"
data-easing="easeOutExpo"> <img src= "@Url.Content("~/Images/course-banner4.png")" />
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="70"
data-speed="300"
data-start="1400"
data-easing="easeOutExpo">THE QUICKEST
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="120"
data-speed="300"
data-start="1600"
data-easing="easeOutExpo">PATH TO
</div>
<div class="caption lfr very_big_white"
data-x="650"
data-y="170"
data-speed="300"
data-start="1800"
data-easing="easeOutExpo">E-LEARNING
</div>
<div class="caption lfb big_white"
data-x="660"
data-y="230"
data-speed="300"
data-start="2000"
data-easing="easeOutExpo"><a href="#">SEE MORE</a>
</div>
</li>
</ul>
<div class="tp-bannertimer"></div>
</div>
</div>
答案 0 :(得分:0)
我忘了调用JqueryUI捆绑包,虽然与其他顶级浏览器一起工作,却导致IE出现问题