Jquery滑块不会自动滑动

时间:2013-05-11 08:54:58

标签: jquery jquery-slider

在我的网站http://operationwebdesign.com/index.php上,我有一个jquery滑块作为您看到的主要项目。如果您单击按钮切换幻灯片,它可以工作,但由于某种原因,自动化代码的代码不起作用。有谁知道什么可能是错的?

此处提供的是该网站的代码。

的header.php

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Operation Web Design - Quality</title>
    <meta charset="utf-8">
    <link rel="shortcut icon" href="images/favicon.ico" >
    <link type="text/css" href="css/styles-protfolio.css" rel="stylesheet" media="all" />
    <link href="css/prettyPhoto.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="css/base.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/reset.css" type="text/css" media="screen">
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen">
    <link rel="stylesheet" href="fontkit/stylesheet.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="slider/css/layout.css" />
    <link rel="stylesheet" type="text/css" href="slider/css/style4.css" />

    <!--Slider -->
    <script language="javascript" type="text/javascript" src="slider/js/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="slider/js/jquery.easing.js"></script>
    <script language="javascript" type="text/javascript" src="slider/js/script.js"></script>
    <script type="text/javascript">
     $(document).ready( function(){ 
            // buttons for next and previous item                        
            var buttons = { previous:$('#jslidernews1 .button-previous') ,
                            next:$('#jslidernews1 .button-next') };
             $obj = $('#jslidernews1').lofJSidernews( { interval : 4000,
                                                    easing          : 'easeInOutQuad',
                                                    duration        : 1200,
                                                    auto            : false,
                                                    maxItemDisplay  : 3,
                                                    startItem       :0,
                                                    navPosition     : 'horizontal', // horizontal
                                                    navigatorHeight : null,
                                                    navigatorWidth  : null,
                                                    mainWidth:960,
                                                    buttons:buttons} );     
        });
    </script>
    <!--Slider -->

    <script type="text/javascript" src="js/jqueryd.js"></script>
    <script type="text/javascript" src="js/ui.js"></script>
    <script type="text/javascript" src="js/ui_002.js"></script>
    <script type="text/javascript" src="js/work.js"></script>

    <!--portfolio New-->    
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
    <script src="js/po-new/jquery.quicksand.js" type="text/javascript"></script>
    <!-- -->
    <script src="js/po-new/jquery.easing.js" type="text/javascript"></script>
    <script src="js/po-new/script.js" type="text/javascript"></script>
    <!--- -->

    <script src="js/po-new/jquery.prettyPhoto.js" type="text/javascript"></script> 
    <!--[if lt IE 7]>
        <div style=' clear: both; text-align:center; position: relative;'>
            <a href="http://windows.microsoft.com/en-US/internet-explorer/products/ie/home?ocid=ie6_countdown_bannercode">
                <img src="http://storage.ie6countdown.com/assets/100/images/banners/warning_bar_0000_us.jpg" border="0" height="42" width="820" alt="You are using an outdated browser. For a faster, safer browsing experience, upgrade for free today." />
            </a>
        </div>
    <![endif]-->
    <!--[if lt IE 9]>
        <script type="text/javascript" src="js/html5.js"></script>
    <![endif]-->
</head>

<body>
    <!--div class="prodSale">
        <a href="templates.html"><span>Products for Sale</span></a>
    </div-->
    <div class="main-coll">
        <!--Header -->
        <header>
            <div class="cent-coll">
                <div class="head-post">
                    <div class="svipl-logo">
                        <h1 class="logo"><a href="index.php" title="Operation Web Design"><img src="images/logo.png" alt="Operation Web Design"></a></h1>
                    </div>
                    <nav class="topnav">
                        <ul class="nav">
                            <li><a href="index.php" class="current">HOME<span>OUR MAIN PAGE</span></a></li>
                            <li><a href="portfolio.php">PORTFOLIO<span>OUR WORK</span></a></li>
                            <li><a href="about.php">ABOUT US<span>WHO WE ARE</span></a></li>
                            <li><a href="services.php">SERVICES<span>WHAT WE OFFER</span></a></li>
                            <li><a href="contact.php">CONTACT US<span>DROP US A LINE</span></a></li>
                        </ul>
                    </nav>
                    <div class="social">
                        <a href="#" class="fbook">Facebook</a>
                        <a href="#" class="twitter">Twitter</a>
                        <a href="#" class="linkin">LinkedIn</a>
                        <a href="#" class="blog">Blog</a>
                    </div>
                </div>
            </div>
        </header>
        <!--Header -->

的index.php

<?php
    require('header.php');
?>     
        <!--Slider -->
        <div class="info-head">
            <div class="info-bg">
                <div class="cent-coll">
                    <div class="intro-mn">

                        <div id="jslidernews1" class="lof-slidecontent" style="width:960px; height:315px;">
                            <div class="preload"><div></div></div>
                                    <!--
                                    <div  class="button-previous">Previous</div>
                                    <div  class="button-next">Next</div>
                                    -->
                                     <!-- MAIN CONTENT --> 
                                      <div class="main-slider-content" style="width:960px; height:340px;">
                                        <ul class="sliders-wrap-inner">
                                            <li>
                                              <img src="images/slide1-img.png" title="Newsflash 1" />
                                                 <div class="slide-dtl">
                                                    <h2>HELLO &amp; WELCOME</h2>
                                                    <p>Need a website? Need help with internet marketing?<br>
                                                    We specialize in creating quality websites and effective<br>
                                                    internet Marketing for every business.
                                                    </p>
                                                    <div class="btn-coll">
                                                        <a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
                                                        <a href="contact.php" class="contoday">Contact us Today!</a>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                  <img src="images/html5-css3.png" title="Newsflash 2" />           
                                                  <div class="slide-dtl">
                                                    <h2>HTML5 &amp; CSS3</h2>
                                                    <p>All of our sites are HTML 5 and CSS 3 Compliant.<br/>
                                                    This ensures our sites work on all the popular browsers: <br/>
                                                    Mozilla Firefox, Internet Explorer, Safari, Google Chrome!
                                                    </p>
                                                    <div class="btn-coll">
                                                        <a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
                                                    </div>
                                                </div>
                                            </li>  
                                           <li>
                                              <img src="images/mobile-app.png" title="Newsflash 3" />
                                                <div class="slide-dtl">
                                                    <h2>MOBILE APPS &amp; WEB</h2>
                                                    <p>Need a mobile app for your website or business?<br>
                                                    We can make it for you.  Android® or iPhone® Platforms.<br>
                                                    We can make mobile friendly versions of your site too!
                                                    </p>
                                                    <div class="btn-coll">
                                                        <a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
                                                    </div>
                                                </div>
                                            </li> 
                                            <li>
                                              <img src="images/seo-img.png" title="Newsflash 4" />
                                                <div class="slide-dtl">
                                                    <h2>SEO</h2>
                                                    <p>Need more traffic for your website?<br>
                                                    We can get you to the top of the Search Engines<br>
                                                    Google, Yahoo, Bing, you name it!
                                                    </p>
                                                    <div class="btn-coll">
                                                        <a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
                                                    </div>
                                                </div>
                                            </li> 
                                            <li>
                                              <img src="images/web-design-dev.png" title="Newsflash 5" />
                                                <div class="slide-dtl">
                                                    <h2>WEB DESIGN</h2>
                                                    <p>Need a productive website for your business?<br>
                                                    Want a design that brings you more clients?<br>
                                                    We design to deliver you results!
                                                    </p>
                                                    <div class="btn-coll">
                                                        <a href="contact.php" class="lmore blackgred"><span>Learn More</span></a>
                                                    </div>
                                                </div>
                                            </li> 
                                          </ul>     
                                    </div>
                                   <!-- END MAIN CONTENT --> 
                                   <!-- NAVIGATOR -->
                                    <div class="navigator-content">
                                          <!--<div class="button-control"><span></span></div>    -->
                                          <div class="navigator-wrapper">
                                                <ul class="navigator-wrap-inner">
                                                   <li><span>1</span></li>
                                                   <li><span>2</span></li>
                                                   <li><span>3</span></li>
                                                   <li><span>4</span></li>    
                                                   <li><span>5</span></li>
                                                </ul>
                                          </div>

                                     </div> 
                                  <!----------------- END OF NAVIGATOR --------------------->
                         </div>

                    </div>
                </div>
            </div>
        </div>
        <!--Slider -->

        <!--Content Part -->
        <div class="main-coll">
            <div class="cent-coll">
                <section class="page-coll">
                    <h3 class="wlcm-txt">
                        <span>Operation Web Design</span> helps busy entrepreneurs save time by getting customers so they can focus on making money in their business.  How do we do this?<br/><br/> Check out our <a href="portfolio.php">work</a> or <a href="contact.php">drop us a line</a>.
                    </h3>
                    <div class="latest-work">
                        <article class="work-first">
                            <h2 class="section-title whi">OUR LATEST CLIENT</h2>
                            <p>Team Crowd Fund specializes in helping its clients raise money they need for their business/idea through crowd funding platforms, like Kickstarter or Indiegogo.</p>
                            <a href="http://teamcrowdfund.com" class="more blackgred" target="_blank"><span>Visit Page</span></a>
                        </article>
                        <ul style="" id="all" class="workThumbs ui-tabs-panel ui-widget-content ui-corner-bottom">
                            <div style="text-align:left;padding-left:25px;"><b>Other Clients:</b></div>
                            <li>
                                <a href="#"><img style="opacity: 1;" src="images/pro-img/thumb.jpg" alt="XXXLutx"></a>
                                <h4>Clickr</h4>
                                <p>Create Your Pictures Album</p>
                            </li>
                            <li>
                                <a href="#"><img style="opacity: 1;" src="images/pro-img/thumb9.jpg" alt="Saybets"></a>
                                <h4>Pernel Berkeley</h4>
                                <p>A Creative Artist</p>
                            </li>
                            <li>
                                <a href="#"><img style="opacity: 1;" src="images/pro-img/thumb19.jpg" alt="Maxxo"></a>
                                <h4>Logo Producers</h4>
                                <p>Social networking</p>
                            </li>       
                        </ul>
                    </div>
                </section>
                </div>
                <div class="services_bg">
                    <div class="cent-coll">
                        <section class="page-coll">
                            <aside class="box3_main">
                                <h2 class="section-title">SERVICES</h2>
                                <div class="main-coll">
                                    <article class="services-cell">
                                        <div class="services-img">
                                            <img src="images/webdesign-icon.png" alt="" />
                                        </div>
                                        <div class="services-detail">
                                            <h3>Web Design &amp; Development</h3>
                                            <p>Web Design &amp; Development is the most important aspect to an online campaign. We create beautiful <strong>website designs</strong> that engages customers and grows businesses.</p>
                                            <a href="#" class="readmore">Learn More →</a>
                                        </div>
                                    </article>
                                    <article class="services-cell mL20">
                                        <div class="services-img">
                                            <img src="images/ecommerce-icon.png" alt="" />
                                        </div>
                                        <div class="services-detail">
                                            <h3>eCommerce Websites</h3>
                                            <p>Want to sell your products online? Our <strong>eCommerce websites</strong> are crafted to meet your business requirements. Sell anything and everything, no limits just your imagination.</p>
                                            <a href="#" class="readmore">Learn More →</a>
                                        </div>
                                    </article>
                                    <article class="services-cell mL20">
                                        <div class="services-img">
                                            <img src="images/mobile-application-icon.png" alt="" />
                                        </div>
                                        <div class="services-detail">
                                            <h3>Mobile Websites</h3>
                                            <p>Customers are in a rush to find your business and mobile devices provide the answer.  We create sites that work on all the mobile devices such as Android® & iPhone®.</p>
                                            <a href="#" class="readmore">Learn More →</a>
                                        </div>
                                    </article>
                                </div>
                            </aside>

                            <ul class="technologies">
                                <li><img src="images/symphony-logo.png" alt="" /></li>
                                <li><img src="images/php-logo.png" alt="" /></li>
                                <li><img src="images/mysql-logo.png" alt="" /></li>
                                <li><img src="images/jquery-logo.png" alt="" /></li>
                                <li><img src="images/java-logo.png" alt="" /></li>
                                <li><img src="images/xml-logo.png" alt="" /></li>
                                <li><img src="images/androiod-logo.png" alt="" /></li>
                                <li><img src="images/wordpress-logo.png" alt="" /></li>
                            </ul>
                        </section>
                    </div>
                    <div class="crossline1"></div>
                </div>

                <div class="cent-coll">
                <section class="page-coll">
                    <article class="main-coll">
                        <h2 class="about-head"><span>ABOUT </span> Operation Web Design</h2>
                        <p class="about-dtl">Operation Web Design specializes in the business of providing Software Outsourcing & Offshore Software Development services to its clients globally. Our solid technical expertise, profound knowledge of latest industry trends, Customer needs and quality-driven delivery model offer progressive end-to-end web solutions.</p>
                        <p class="about-dtl">Our services include: Professional Web Design, SEO, ECommerce Solution, Web Application Development & Maintaining, Web-Hosting, Logo Design & Flash Websites.</p>
                        <div class="btn-cell">
                            <a href="#" class="lmore blackgred"><span>Learn More</span></a>
                        </div>
                    </article>
                </section>
                </div>

            </div>
        </div>
        <!--Content Part -->

        <?php
            require('footer.php');
        ?>

任何帮助都非常感激,我为什么不能正常工作而感到茫然。

1 个答案:

答案 0 :(得分:1)

您是否尝试过更改此部分

而不是false将auto更改为TRUE

$obj = $('#jslidernews1').lofJSidernews ({ interval : 4000,
                                           easing   : 'easeInOutQuad',
                                           duration : 1200,
                                           auto     : true
                                         });