CoolSlider,原创无缝滚动类,适用于图片等任意内容的无缝滚动

需求:

多图横排,无缝滚动,可定义显示图片数,提供自动滚动开关,自定义滚动时间间隔,手动向左向右按钮

要求:

图片尺寸要统一

使用说明:

  1. 调用jquery(1.4以上的版本)及coolslider类

  2. 以scroll_list,ul.scroll_ul,li的结构定义格式(以下用蓝色加粗表示固定的元素结构)

     <div class="scroll_area" id="CSlider">
         <div class="scroll_list">
             <ul class="scroll_ul">
                 <li><a href="#"><img src="images/1.gif" alt="" /></a></li>
                 <li><a href="#"><img src="images/2.gif" alt="" /></a></li>
                 <li><a href="#"><img src="images/3.gif" alt="" /></a></li>
                 <li><a href="#"><img src="images/4.gif" alt="" /></a></li>
                 <li><a href="#"><img src="images/5.gif" alt="" /></a></li>
                 <li><a href="#"><img src="images/6.gif" alt="" /></a></li>
                 <li><a href="#"><img src="images/7.gif" alt="" /></a></li>
                 <li><a href="#"><img src="images/8.gif" alt="" /></a></li>
             </ul>
         </div>
         <a id="prevA">向左</a>
         <a id="nextA">向右</a>
     </div>
    
  3. 创建滚动对象并初始化

     <script type="text/javascript">
     var ccSlider=new CoolSlider("CSlider",5,true,3000,"prevA","nextA");
     ccSlider.init();
     </script>
    

参数意义注释:(滚动对象容器ID,显示li数,自动滚动开关,滚动时间间隔,手动向左按钮ID,手动向右按钮ID)

项目链接:https://bitbucket.org/coolhihi/coolslider

演示地址:http://demo.gxxsite.com/coolslider/index.html

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏