移动端-左右滑动 

 1 <div id="picBox" style="overflow: hidden;">
 2    <ul class="hotPic" style="display:flex;padding-bottom:15px;">
 3        {loop $news_category $item}
 4        <li class="hotImg " style="position: relative;">
 5            <a href="#" style="width:103px;">
 6                 <img class="hotImg1" src="./resource/attachment/{$item['thumb']}" alt="">
 7                 <div style="width:96%;height:103px;
 8                                 position: absolute;top:0;left:0;">
 9                      {if $item['isrecommand'] == 1}
10                      <span style="display: block;width:40px;height:26px;line-height:26px;text-align: center;
11                                     font-size:16px;color:#fff;background-color:rgb(255,102,102);margin-bottom:-26px;">
12                                         活动
13                      </span>
14                      {/if}
15                      <p style="color: #fff;font-weight:bold;text-align:center;margin-top:43px;margin-bottom:0;">
16                                         #{$item['name']}#
17                      </p>
18                                 </div>
19             </a>
20         </li>
21         {/loop}
22      </ul>
23 </div>  
 1 <script src="http://cdn.bootcss.com/jquery/1.11.3/jquery.js"></script>
 2 <script src="http://cdn.bootcss.com/iScroll/5.2.0/iscroll.js"></script>
 3 
 4 <script>
 5 
 6         var ele = $(".hotPic");
 7         ele.width((ele.find(".hotImg").length + 1) * 112);   // 112-滑动距离？
 8         var myScroll = new IScroll('#picBox', {scrollX: true, scrollY: false});   //实例化
 9 
10 </script>

 

posted @ 2018-09-13 19:59  昵称已被使用。  阅读(249)  评论(0)  编辑  收藏  举报