jQuery滑块 - 革命图像不显示MVC4项目

时间:2013-06-14 11:16:58

标签: slider carousel jquery-easing

我正在尝试在主页上设置一个带滑块控件的页面。我设计了离线页面,他们正在成功地工作,所有图像都按预期工作,但是当我将它们上传到我的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 &copy; 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>

1 个答案:

答案 0 :(得分:0)

我忘了调用JqueryUI捆绑包,虽然与其他顶级浏览器一起工作,却导致IE出现问题