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

效果:　　

html

  1.  <!doctype html>
  2.  <html>
  3.  <head>
  4.  <meta charset="utf-8">
  5.  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  6.  <meta name="viewport" content="width=device-width, initial-scale=1">
  7.  <title>jQuery焦点图插件PicCarousel</title>
  8.  <link rel="stylesheet" href="css/style.css">
  9.  <script src="js/jquery-1.11.3.min.js"></script>
  10.  <script src="js/PicCarousel.js"></script>
  11.  </head>
  12.  <body>
  13.  <div class="container">
  14.  <div class="poster-main A_Demo">
  15.      <div class="poster-btn poster-prev-btn"></div>
  16.      <ul class="poster-list">
  17.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  18.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  19.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  20.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  21.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  22.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  23.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  24.      </ul>
  25.      <div class="poster-btn poster-next-btn"></div>
  26.  </div>
  27.  <div class="poster-main B_Demo" style="margin-top:100px">
  28.      <div class="poster-btn poster-prev-btn"></div>
  29.      <ul class="poster-list">
  30.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  31.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  32.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  33.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  34.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  35.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  36.          <li class="poster-item"><a href="http://sc.chinaz.com"><img src="img/1.jpg" width="100%" ></a></li>
  37.      </ul>
  38.      <div class="poster-btn poster-next-btn"></div>
  39.  </div>
  40.  <script>
  41.  $(".A_Demo").PicCarousel("init");　　//静态
  42.  $(".B_Demo").PicCarousel({　　　　　　//轮播动态
  43.  "width":1000,
  44.  "height":300,
  45.  "posterWidth":520,
  46.  "posterHeight":300,
  47.  "scale":0.9,
  48.  "speed":500,
  49.  "autoPlay":true,
  50.  "delay":1000,
  51.  "verticalAlign":"top"
  52.  });
  53.  </script>
  54.  </div>
  55.  <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
  56.  <p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
  57.  </div>
  58.  </body>
  59.  </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. css控制大小写

    转换不同元素中的文本: text-transform:uppercase //全大写 text-transform:lowercase //全小写 text-transform:capitalize ...

  2. Struts2中DMI(动态方法调用)的错误问题(There is no Action mapped for namespace [/xxx] and action name [xxx!yyy] a)

    默认的Struts.xml中是这样的 <constant name="struts.enable.DynamicMethodInvocation" value="f ...

  3. oscgit

    Gitlab PaaS项目演示 git config --global user.name "你的名字或昵称" git config --global user.email &qu ...

  4. 了解CSS/CSS3原生变量var

    一.变量是个好东西 在任何语言中,变量的有一点作用都是一样的,那就是可以降低维护成本,附带还有更高性能,文件更高压缩率的好处. 随着CSS预编译工具Sass/Less/Stylus的关注和逐渐流行,C ...

  5. iOS Instruments内存检测使用

    Instruments 可以帮我们了解到应用程序使用内存的几个方面: 全局内存使用情况(Overall Memory Use): 从全局的角度监测应用程序的内存使用情况,捕捉非预期的或大幅度的内存增长 ...

  6. ssh免密码登录记录

    做mha.hadoop安装过程中都要用ssh免密码登陆,查过一些资料,踩过很多坑,下面用简单记录一下 首先要安装ssh linux : centOS 6.5 yum -y install *ssh* ...

  7. C#-设置窗体在显示器居中显示

    在窗体的属性中查看:StartPosition属性,该属性的设置中有一个"CenterScreen"的选择项,该项就是设置窗体局中显示的.

  8. iOS UICollectionView 入门 07 点击cell放大图片

    这一节,我们实现通过点击图片将图片放大显示的功能. 首先我们创建一个名为FlickrPhotoViewConroller的类,这个类继承于UIViewController. 改动头文件内容例如以下: ...

  9. JS知识点备忘

    做前端久了,会发现很多比较杂的知识点,平时很少用到(往往在面试的时候经常见到),但是遇到的时候会很揪心...所以遇到的时候把它记录下来,但求有个印象,再次遇到时,可以在这里快速找到解决. 1.文档碎片 ...

  10. android学习日记03--常用控件Dialog

    常用控件 9.Dialog 我们经常会需要在Android界面上弹出一些对话框,比如询问用户或者让用户选择.这些功能我们叫它Android Dialog对话框 对话框,要创建对话框之前首先要创建Bui ...