下载:　　http://sc.chinaz.com/jiaoben/151204445580.htm

效果:　　

html

 <!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

 <meta name="viewport" content="width=device-width, initial-scale=1">

 <title>jQuery焦点图插件PicCarousel</title>

 <link rel="stylesheet" href="css/style.css">

 <script src="js/jquery-1.11.3.min.js"></script>

 <script src="js/PicCarousel.js"></script>

 </head>

 <body>

 <div class="container">

 <div class="poster-main A_Demo">

     <div class="poster-btn poster-prev-btn"></div>

     <ul class="poster-list">

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

     </ul>

     <div class="poster-btn poster-next-btn"></div>

 </div>

 <div class="poster-main B_Demo" style="margin-top:100px">

     <div class="poster-btn poster-prev-btn"></div>

     <ul class="poster-list">

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

         <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>

     </ul>

     <div class="poster-btn poster-next-btn"></div>

 </div>

 <script>

 $(".A_Demo").PicCarousel("init");　　//静态

 $(".B_Demo").PicCarousel({　　　　　　//轮播动态

 "width":1000,

 "height":300,

 "posterWidth":520,

 "posterHeight":300,

 "scale":0.9,

 "speed":500,

 "autoPlay":true,

 "delay":1000,

 "verticalAlign":"top"

 });

 </script>

 </div>

 <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

 <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

 </div>

 </body>

 </html>

css  js  见下载

ok

【html】【20】高级篇--轮播图[聚焦]的更多相关文章

  1. 【html】【12】特效篇--轮播图

    必看参考: http://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 代码: <!DOCTYPE html> <h ...

  2. 【jQuery】百分比自适应屏幕轮播图特效

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. Android自定义控件之轮播图控件

    背景 最近要做一个轮播图的效果,网上看了几篇文章,基本上都能找到实现,效果还挺不错,但是在写的时候感觉每次都要单独去重新在Activity里写一堆代码.于是自己封装了一下.本篇轮播图实现原理原文出处: ...

  4. js 基础篇（点击事件轮播图的实现）

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  5. 从零开始，搭建博客系统MVC5+EF6搭建框架（5），博客详情页、留言、轮播图管理、右侧统计博文

    一.博客系统进度回顾 上一遍博客介绍到,系统已经实现到了发布以及前台布局展示,接下来就是实现一些,详情页,留言.轮播图管理.右侧博文统计信息实现. 二.博客系统详情页实现 2.1先来看看详情页展示的效 ...

  6. 手把手原生js简单轮播图

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

  7. 初识 swift 封装轮播图

    一.简介 换了一家公司.换了一个环境刚开始来公司自然不能有一丝一毫的放松,每天即使是没有什么工作也是看看这个博客.那个源码.尽量让自己更充实.慢慢的开始写几篇博客记录下自己遇到的一些问题和解决方法.其 ...

  8. Android ViewPager轮播图

    Android客户端开发中很多时候需要用到轮播图的方式进行重点新闻的推送或者欢迎页面的制作,下面这个轮播图效果的Deamo来自互联网再经过修改而成. 1.布局文件activity_main.xml中添 ...

  9. 原生js简单轮播图 代码

    在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...

随机推荐

  1. 如何检查机器是否因为装了Windows更新而需要重新启动

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:如何检查机器是否因为装了Windows更新而需要重新启动.

  2. 编写一个Shape类，具有属性：周长和面积； 定义其子类三角形和矩形，分别具有求周长的方法。 定义主类E，在其main方法中创建三角形和矩形类的对象， 并赋给Shape类的对象a、b，使用对象a、b来测试其特性。

    package shape; public class Shape { //定义成员变量 private double zhouchang; private double mianji; public ...

  3. .Net Core静态文件中间件StaticFiles的使用

    以前,当我们的网站需要显示图片的时候,直接在网站目录下新建文件夹,把图片放在这个文件夹下,然后通过文件夹的路径就可以访问到. 但是在.net core中不可以这样,要通过中间件StaticFiles配 ...

  4. 友盟分享 -QQAPI- QQApi.m:250 param error: url is nil

    有一个项目 需要用到友盟分享,点击分享内容,需要跳转到指定的url,不带参数的url非常好跳,也没什么问题,但是 带了参数之后:比如http://121.43.121.8:8080/tj/photo/ ...

  5. .NET连接MySql数据库的方法及示例

    方法一: 使用MySQL推出的MySQL Connector/Net组件, 该组件是MySQL为ADO.NET访问MySQL数据库设计的.NET专用访问组件.完成该组件后,需要在项目中引用这个组件,也 ...

  6. file_put_contents() failed to open stream: Permission denied 问题解决

    很长时间没有写PHP了,今天突然有个需求要写一个保存文件的功能. function downloadFile( $url , $savePath = '' ) {     $fileName = ge ...

  7. RotatingDoughnut

      RotatingDoughnut.zip

  8. CircleProgressBar

    http://www.eoeandroid.com/thread-333984-1-1.html CircleProgressBar.rar

  9. TIME-WAIT和CLOSE-WAIT

    系统调优,你所不知道的TIME_WAIT和CLOSE_WAIT 2016-03-11 运维帮 来源微信订阅号:大房说 作者:大房 你遇到过TIME_WAIT的问题吗?   我相信很多都遇到过这个问题. ...

  10. Tips: compilation and creating new projects on Android 4.0

    If you have downloaded android 4.0, you should read the article. $ANDROID_ROOT/tools/android.bat is ...