下载:　　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. xampp配置host和httpd可以随意访问任何本机的地址

    1.修改host 不管你用的是什么系统,windows, mac,电脑上都会有一个 hosts 文件,修改这个文件,可以改变主机名所对应的 ip 地址.比如你安装了 Web 开发环境(MAMP 或 W ...

  2. 剑指OFFER之栈的压入、弹出序列（九度OJ1366）

    题目描述: 输入两个整数序列,第一个序列表示栈的压入顺序,请判断第二个序列是否为该栈的弹出顺序.假设压入栈的所有数字均不相等.例如序列1,2,3,4,5是某栈的压入顺序,序列4,5,3,2,1是该压栈 ...

  3. MinGW安装和使用总结

    0.前言 最近对开源编译平台和编译器产生了兴趣,借博客平台总结一些东西(包括minGW,eclipse,sourcery和GDB调试等内容).总感觉时间一长某些东西自己都会忘记,过段时间回头看看自己的 ...

  4. 作为平台的Windows PowerShell（二）

    在此系列文章的前一篇,我们看到了怎样使用System.Management.Automation.PowerShell 类来在c#应用程序中运行PowerShell 命令.在那些例子中,我们创建的都是 ...

  5. UITableViewcell autolayout下动态高度

    项目中最经常使用的一个UI就是UITableView了.iOS7.8进一步优化了复用机制,用起来相当爽.配合Autolayout,适配工作减轻了非常多. 曾经做适配工作都是在heightForRow里 ...

  6. #pragma warning 启用和禁用warning

    开发人员可以使用 #pragma 指令将警告作为错误处理:还可以启用或禁用警告,如下面的示例所示: 1.将一个warning作为一个错误 #pragma warning (error: 6260) 2 ...

  7. offsetTop和scrollTop的差别

    近期想写个组件,结果被这两个属性搞的有点晕,查了下文档和资料,对这两个属性总结例如以下: 一直以来对offsetLeft,offsetTop,scrollLeft,scrollTop这几个方法非常迷糊 ...

  8. java RSA加密解密--转载

    原文地址:http://www.blogjava.net/icewee/archive/2012/05/19/378570.html 该工具类中用到了BASE64,需要借助第三方类库:javabase ...

  9. Android反射机制实现与原理

    本文介绍Android反射机制实现与原理,在介绍之前,要和Java进行比较,所以先看下Java中的反射相关知识: 一.反射的概念及在Java中的类反射 反射主要是指程序可以访问.检测和修改它本身状态或 ...

  10. How to center a div in bootstrap3

    There are two approaches to centering a column <div> in Bootstrap 3: Approach 1 (offsets): The ...