支持JqMobi的焦点图幻灯片，支持手势、自动播放

ljq

HTML部分

1. <div class="scroll">
   
2.         <div class="slide_01" id="slide_01">
   
3.         <div class="mod_01"><a href="/News/NewsShow/?id=6578"><img src="/Content/images/banner_01.jpg" width="100%" ></a></div>
   
4.         <div class="mod_01"><a><img src="/Content/images/banner_02.jpg" width="100%" ></a></div>
   
5.         <div class="mod_01"><a href="http://weixin.zto.cn/html/job/?url=wap"><img src="/Content/images/banner_job.jpg" width="100%" alt="中通招聘"></a></div>
   
6.      </div>
   
7.         <div class="dotModule_new">
   
8.                 <div id="slide_01_dot"></div>
   
9.         </div>
   
10. </div>

复制代码

css部分

1. /*焦点图滚动*/
   
2. .scroll{position:relative;overflow:hidden;}
   
3. .mod_01{float:left; }
   
4. .mod_01 img{display:block; }
   
5. .dotModule_new{padding:0 5px;height:11px;line-height:6px;-webkit-border-radius:11px;background:rgba(45,45,45,0.5);position:absolute;bottom:5px;right:10px;z-index:11;}
   
6. #slide_01_dot{text-align:center;margin:1px 0 0 0;}
   
7. #slide_01_dot span{display:inline-block;margin:0 3px;width:5px;height:5px;vertical-align:middle;background:#f7f7f7;-webkit-border-radius:5px;}
   
8. #slide_01_dot .selected{background:#66ff33;}

复制代码

js文件

1. scroll.zip (3.62 KB, 下载次数: 255)
   2014-12-5 16:53 上传

   点击文件名下载附件

复制代码

最终效果：




预览手机访问http://wap.zto.cn扫一扫访问：

章先生

请问你的图片是多大的，会不会失真啊

414115496@qq.co

感谢分享

jh201320

不起效果

admin

gimao@qq.com

这个怎么用呢？初学，弄不明白！怎么调用，能否贴个例子

gimao@qq.com

如何调用？

tyxh1984

能分享下整个首页的代码吗？