029-81773686

宏 · 新闻

当前位置: 首页 > 宏 · 新闻行业视野  

简单手机自适应banner轮播

2016.07.18

  最近很多手机站都做成了模板站,改改样式就换成了另外一种风格,而首页的banner图从我开始着手做永远就是那么个样式,可以加点点也可以加箭头,但是最近越来越多客户发现最后好像少了一张,起初我们以为是网站速度卡才会最后一张没有加载出来,但是网站就不能刷新,一刷新最后一张就没有了,一个空白出来了,最近做的首页站也不太多,但也有几十个,这样很是影响客户的点击率的,有的客户只是做了手机站,没有网站的。近期轮番换banner图开始了......


上端bannenr用到的js

<!-- banner--> 

<script src="js/jquery.min.js" type="text/javascript"></script>/*--最常见基础js--*/

<link rel="stylesheet" href="image/style.css" type="text/css" />/*--里面的样式,为了不和你的样式起冲突,专门放在image下面--*/

<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>

<script type="text/javascript" src="js/jquery.jslides.js"></script>

<!-- banner--> 


<!-- 轮播图开始 -->

<main class="cd-main-content">

     <div class="block_home_slider">

          <div id="home_slider" class="flexslider">

               <ul class="slides">

                    <?php for($s=0;$s<count($banner);$s++){?>

<li>

                           <div class="slide">

                                <a href="<?=$banner[$s][2]?>"> 

                                    <img src="../hbUploadFile/<?=$banner[$s][1]?>" />

                                </a>

                           </div>

                        </li>

                     <?php }?> 

                </ul>

          </div>

   <script type="text/javascript">

$(function () {

$('#home_slider').flexslider({

animation : 'slide',

controlNav : true,

directionNav : true,

animationLoop : true,

slideshow : false,

useCSS : false

});

});

  </script>

</div>

     

         

               

                        <?php for($s=0;$s



     

    精彩案例