-2

我有以下代码。
窗口加载功能用于移动设备的菜单按钮显示，而不是完整的菜单显示。

文档就绪功能适用于全宽响应滑块。

window.onload = function() {
var nav = document.getElementById('nav'); 
var navItem = nav.getElementsByTagName('li');
//is it floated?
var floated = navItem[0].currentStyle ? el.currentStyle['float'] :  document.defaultView.getComputedStyle(navItem[0],null).getPropertyValue('float');

if (floated != 'left') {
    var collapse = document.getElementById('nav-collapse');

    //toggle class utility function
    var classToggle = function( element, tclass ) {
        var classes = element.className,
        pattern = new RegExp( tclass );
        hasClass = pattern.test( classes );
        //toggle the class
        classes = hasClass ? classes.replace( pattern, '' ) : classes + ' ' + tclass;
        element.className = classes.trim();
    };

    classToggle(nav, 'hide');
    classToggle(collapse, 'active');
    collapse.onclick = function() {
        classToggle(nav, 'hide');
        return false;
    }
}
}

$.noConflict();
jQuery(document).ready(function($) {
$('#full-width-slider').royalSlider({
arrowsNav: true,
loop: false,
keyboardNavEnabled: true,
controlsInside: false,
imageScaleMode: 'fill',
arrowsNavAutoHide: false,
autoScaleSlider: true, 
autoScaleSliderWidth: 960,     
autoScaleSliderHeight: 350,
controlNavigation: 'bullets',
thumbsFitInViewport: false,
navigateByClick: true,
startSlideId: 0,
autoPlay: false,
transitionType:'move',
globalCaption: false,
fullscreen: {
    // fullscreen options go gere
    enabled: true,
    nativeFS: true
},
autoPlay: {
    // autoplay options go gere
    enabled: true,
    pauseOnHover: true
},
deeplinking: {
  enabled: true,
  change: false
},
/* size of all images http://help.dimsemenov.com/kb/royalslider-jquery-plugin-faq/adding-width-and-height-properties-to-images */
imgWidth: 1400,
imgHeight: 680
 });
});

html

<nav role="navigation">
                  <a href="#nav" class="nav-collapse" ><img src="images/btn_menu.jpg" alt="menu" id="nav-collapse"></a>
                  <ul class="nav" id="nav">
                       <li class="active"><a href="index.html">Home</a></li>
                       <li><a href="services.html">Services</a></li>
                       <li><a href="compliant-reporting.html">Compliant Reporting</a></li>
                       <li><a href="setup-training.html">Setup &amp; Training</a></li>
                       <li><a href="demo-videos.html">Demo Videos</a></li>
                       <li><a href="events-calendar.html">Events Calendar</a></li>
                       <li><a href="contact-us.html">Contact Us</a></li>
                  </ul>
                  </nav>

javascript 和 jQuery 都在同一个文件 default.js 中 window.onload 工作但滑块脚本不工作。如果我删除 window.onload 那么滑块正在工作。

他们是矛盾的。有什么帮助吗？

4

2 回答 2

0

default.js 是一个通用文件。它包含在其他页面上使用的表单验证代码、jQuery 选项卡、jQuery 日期选择器等。

我只将 window.onload 函数和 document.ready 函数放在一个单独的文件中并包含该文件。

现在可以了！

谢谢大家。

于 2013-07-20T22:17:05.827 回答
-2

window.onload从所有意图和目的来看，与$.ready* 相同，这意味着它们都将在任何设备上执行。

如果您真的希望某些东西在移动设备而不是桌面设备上运行（反之亦然），您必须使用某种移动设备检测并执行以下操作：

if ($.browser.mobole) {
    your mobile code here
} else {
    your desktop code here
}

* 专家：不，它们实际上并不相同。

于 2013-07-20T18:25:48.993 回答