下载:　　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. cocos2d-x 3.0 开发（一） Hello_New_World

    1.Previous On 2dx     2dx 的3.0版本是个与以往不同的版本.变化比2dx从1.x 到2.x的变化还要大不少.具体的新功能可以参见:CocoaChina大会见闻——cocos2 ...

  2. CentOS安装卸载memcache及JAVA示例

      原文地址:http://www.cnblogs.com/zhongshengzhen/   先安装libevent,memcached依赖libevent的lib [root@VM_64_81_c ...

  3. sass 使用入门教程

    我们都知道,css没有变量,也没有条件语句,在开发过程中,难免有些麻烦,因此有了CSS预处理器(css preprocessor),Sass便是其中之一. 一.什么是Sass Sass (Syntac ...

  4. SQLite使用教程10 运算符

    SQLite 运算符 SQLite 运算符是什么? 运算符是一个保留字或字符,主要用于 SQLite 语句的 WHERE 子句中执行操作,如比较和算术运算. 运算符用于指定 SQLite 语句中的条件 ...

  5. spring读书笔记----Quartz Trigger JobStore出错解决

    将Quartz的JOBDetail,Trigger保持到数据库的时候发现,系统报错 The job (DEFAULT.jobDetail) referenced by the trigger does ...

  6. Smack[3]用户列表，头像，组操作，用户操作

    用户列表 Smack主要使用Roster进行列表管理的 connection.getRoster(); /** * 返回所有组信息 <RosterGroup> * * @return Li ...

  7. 修改 suse 上的postfix 的日志路径

    刚刚搭建的邮件服务器,没过多久硬盘就爆满了,不得已移动存储,包括日志. 移动存储灰常简单,查找 /etc/postfix/main.cf 中的 data_directory / base_direct ...

  8. 转载:iPhone 6 Plus 屏幕宽度问题 375 vs 414

    首先看一张比较简单明了的 iPhone 6 与 iPhone 6 Plus 对比图,来自 PaintCode 的<The Ultimate Guide To iPhone Resolutions ...

  9. C++中str1::function和bind

    在C++的TR1中(TechnologyReport)中包括一个function模板类和bind模板函数,使用它们能够实现类似函数指针的功能,但却却比函数指针更加灵活,特别是函数指向类的非静态成员函数 ...

  10. Codeforces Round #324 (Div. 2) B. Kolya and Tanya 快速幂

    B. Kolya and Tanya Time Limit: 1 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/584/pro ...