Question

我有一个用jQuery完成的图像滑块。图像完美滑动但是当我按下暂停和/或播放按钮时没有任何反应。

    <script type="text/javascript">          
        $(function(){              
              $('#play').click(function() { $('#slider').cycle('resume'); return false; });           
              $('#pause').click(function() { $('#slider').cycle('pause'); return false; });           
            $('#slider').cycle({            
               fx:      'scrollHorz', 
               next:    '#next',
               prev:    '#prev',
               pager:   '#pager',
               timeout: 3000, 
               speed:   900
            });               
        });      
        </script>

无论如何它都是我的HTML代码

    <div id="hero">

           <div id="pager"></div>
           <div id="pause">&asymp;</div>
           <div id="play">&Delta;</div>
           <div id="next">&rang;</div>
           <div id="prev">&lang;</div>

            <div id="slider">
                <div class="items">
                    <img src="image/251H.jpg" alt="Free Images">
                        <div class="info">
                            <h2>Secret of a good image</h2>
                            <p>He is walking  anywhere. <a href="#">Learn more</a></p>

                        </div>
                </div><!---end of items--->

                <div class="items">
                    <img src="image/251H.jpg" alt="Free Images">
                        <div class="info">
                            <h2>Secret of a good image</h2>
                            <p>He is walking  anywhere. <a href="#">Learn more</a></p>

                        </div>
                </div><!---end of items--->
                <div class="items">
                    <img src="image/251H.jpg" alt="Free Images">
                        <div class="info">
                            <h2>Secret of a good image</h2>
                            <p>He is walking  anywhere. <a href="#">Learn more</a></p>

                        </div>
                </div><!---end of items--->
                <div class="items">
                    <img src="image/251H.jpg" alt="Free Images">
                        <div class="info">
                            <h2>Secret of a good image</h2>
                            <p>He is walking  anywhere. <a href="#">Learn more</a></p>

                        </div>
                </div><!---end of items--->
                <div class="items">
                    <img src="image/251H.jpg" alt="Free Images">
                        <div class="info">
                            <h2>Secret of a good image</h2>
                            <p>He is walking  anywhere. <a href="#">Learn more</a></p>                           
                        </div>
                </div><!---end of items--->
            </div><!---end of slider--->
        </div>   <!--end of id >

对于一些额外的需要，这里是css：

    #hero{
 width:960px;
 height:500px;
 display:block;
 position: relative;
 I margin:auto;    
}
#slider{
 width:100%;
 height:500px;
 display:block;
 position: absolute;
 bottom:100px;
 margin:auto;
 overflow:hidden;
}
.info{
 width:960px;
 height:80px;
 display:block;
 position:relative;
 background-color:aquamarine;
 z-index: 99;
}
.info h2{
 padding: 15px 0 0 20px;
}
.info p{
 padding: 0 0 0 20px;
}
#play{
 width:40px;
 height:40px;
 line-height: 40px;
 text-align:center;
 display:block;
 position:absolute;
 top:0;
 right:44px;
 background-color:greenyellow;
 color:bisque;
 cursor:pointer;
 z-index:99;
 transform: rotate(90deg);
 -webkit-transform: rotate(90deg);
}
#pause{
 width:40px;
 height:40px;
 line-height: 40px;
 text-align:center;
 display:block;
 position:absolute;
 top:0;
 right:88px;
 background-color:greenyellow;
 color:bisque;
 cursor:pointer;
 z-index:99;
}
#next{
 width:40px;
 height:40px;
 line-height: 40px;
 text-align:center;
 display:block;
 position:absolute;
 top:0;
 right:0;
 background-color:greenyellow;
 color:bisque;
 cursor:pointer;
 z-index:99;   
}
#prev{
 width:40px;
 height:40px;
 line-height: 40px;
 text-align:center;
 display:block;
 position:absolute;
 top:0;
 right:133px;
 background-color:greenyellow;
 color:bisque;
 cursor:pointer;
 z-index:99;  
}
#pager{
 width:100%;
 text-align: center;
 display: block;
 position: absolute;
 cursor: pointer;
 z-index: 999;
}
#pager a{
 font-size: .0em;
 color:transparent;
 width:10px;
 height:10px;
 display: inline-block;
 position:relative;
 border: 1px solid #FFF;
 border-radius: 20px;
 background: transparent;
 margin: 10px;
}
#pager a.activeSlide{
 background: #C00;
}

不知道播放和暂停操作可能出现的问题。有什么帮助吗？

使用jQuery控制图像滑块

0 个答案: