<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    jquery特效简单轮播图代码下载

                    分享 :

                    网盘下载链接:

                    提取密码: suik
                    复制提取密码
                    这是一款jquery简单轮播图代码。该jquery轮播图仅用40多行js代码就可以实现,轮播图带前后导航按钮,分页圆点导航按钮,并可以自动进行播放。
                    • 详情
                      文件来源

                      网络收集

                      更新日期

                      2018-01-02

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      18次

                      这款jquery简单轮播图代码效果如下:

                    • 使用说明

                      在页面中引入jquery和样式文件style.css。

                      <link rel="stylesheet" href="css/style.css">
                      <script type="text/javascript" src="path/to/jquery.min.js"></script>
                      

                      HTML结构

                      该轮播图的HTML结构如下:

                      <div id="wrapper">
                        <div id="slider-wrap">
                                  <ul id="slider">
                                     <li data-color="#1abc9c">
                                        <div>
                                            <h3>Slide #1</h3>
                                            <span>Sub-title #1</span>
                                        </div>                
                                        <i class="fa fa-image"></i>
                                     </li>
                                     <li data-color="#3498db">
                                        <div>
                                            <h3>Slide #2</h3>
                                            <span>Sub-title #2</span>
                                        </div>
                                        <i class="fa fa-gears"></i>
                                     </li>
                                     <li data-color="#9b59b6">
                                        <div>
                                            <h3>Slide #3</h3>
                                            <span>Sub-title #3</span>
                                        </div>
                                        <i class="fa fa-sliders"></i>
                                     </li>
                                     <li data-color="#34495e">
                                        <div>
                                            <h3>Slide #4</h3>
                                            <span>Sub-title #4</span>
                                        </div>
                                        <i class="fa fa-code"></i>
                                     </li>
                                     <li data-color="#e74c3c">
                                        <div>
                                            <h3>Slide #5</h3>
                                            <span>Sub-title #5</span>
                                        </div>
                                        <i class="fa fa-microphone-slash"></i>
                                     </li>
                                  </ul>
                                   <!--控制按钮-->
                                  <div class="btns" id="next"><i class="fa fa-arrow-right"></i></div>
                                  <div class="btns" id="previous"><i class="fa fa-arrow-left"></i></div>
                                  <div id="counter"></div>
                                   
                                  <div id="pagination-wrap">
                                    <ul>
                                    </ul>
                                  </div>
                                  <!--控制按钮-->
                        </div>
                      </div>
                      

                      JavaScript

                      实现该jquery轮播图的js代码如下:

                      //current position
                      var pos = 0;
                      //number of slides
                      var totalSlides = $('#slider-wrap ul li').length;
                      //get the slide width
                      var sliderWidth = $('#slider-wrap').width();
                      $(document).ready(function(){
                        /*****************
                         BUILD THE SLIDER
                        *****************/
                        //set width to be 'x' times the number of slides
                        $('#slider-wrap ul#slider').width(sliderWidth*totalSlides);
                         //next slide   
                        $('#next').click(function(){
                          slideRight();
                        });
                         
                        //previous slide
                        $('#previous').click(function(){
                          slideLeft();
                        });
                        /*************************
                         //*OPTIONAL SETTINGS
                        ************************/
                        //automatic slider
                        var autoSlider = setInterval(slideRight, 3000);
                         
                        //for each slide 
                        $.each($('#slider-wrap ul li'), function() { 
                           //set its color
                           var c = $(this).attr("data-color");
                           $(this).css("background",c);
                            
                           //create a pagination
                           var li = document.createElement('li');
                           $('#pagination-wrap ul').append(li);    
                        });
                         
                        //counter
                        countSlides();
                         
                        //pagination
                        pagination();
                         
                        //hide/show controls/btns when hover
                        //pause automatic slide when hover
                        $('#slider-wrap').hover(
                          function(){ $(this).addClass('active'); clearInterval(autoSlider); }, 
                          function(){ $(this).removeClass('active'); autoSlider = setInterval(slideRight, 3000); }
                        );
                      });
                       
                      /***********
                       SLIDE LEFT
                      ************/
                      function slideLeft(){
                        pos--;
                        if(pos==-1){ pos = totalSlides-1; }
                        $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos));  
                         
                        //*> optional
                        countSlides();
                        pagination();
                      }
                      /************
                       SLIDE RIGHT
                      *************/
                      function slideRight(){
                        pos++;
                        if(pos==totalSlides){ pos = 0; }
                        $('#slider-wrap ul#slider').css('left', -(sliderWidth*pos)); 
                        countSlides();
                        pagination();
                      }
                      /************************
                       //*> OPTIONAL SETTINGS
                      ************************/
                      function countSlides(){
                        $('#counter').html(pos+1 + ' / ' + totalSlides);
                      }
                       
                      function pagination(){
                        $('#pagination-wrap ul li').removeClass('active');
                        $('#pagination-wrap ul li:eq('+pos+')').addClass('active');
                      } ```               
                      
                    • 相关下载
                    北京赛车玩法和赔率|官网_首页