下载:　　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. 谷歌下设置滚动条的css样式

    .oLi-lists-scroll::-webkit-scrollbar { width:5px;  padding:1px; background:url(../images/repeat-bar. ...

  2. 前端 - 使用gulp搭建es6运行环境

    1.创建一个项目目录2.全局安装Traceur,在控制台输入 npm install -g traceur3.打开项目目录,安装gulp以及gulp-traceur插件 npm install -g ...

  3. 解决 mac ssh空闲 连接断开问题

    想必大家都知道,用终端 ssh 连接服务器,如果长时间没有操作,会被断开连接. 要用的话又得重新登录,这非常不方便,也影响开发效率.那针对这种情况,有没有解决方法呢? 答案是肯定的.理论上,有两种方案 ...

  4. .Net Core-TagHelpers-Environment

    当我们新建一个.net core项目时,发现页面中有个奇怪的TagHelper元素,如下:     <environment names="Development"> ...

  5. XMPP——Smack[4]状态，心情，头像更改

    呵呵,三天时间,看的不是很深入,欢迎大家补充呀 修改自身状态 包括上线,隐身,对某人隐身,对某人上线 public static void updateStateToAvailable(XMPPCon ...

  6. hdu 2844 Coins （多重背包）

    题意是给你几个数,再给你这几个数的可以用的个数,然后随机找几个数来累加, 让我算可以累加得到的数的种数! 解题思路:先将背包初始化为-1,再用多重背包计算,最后检索,若bb[i]==i,则说明i这个数 ...

  7. Zookeeper全解析——Paxos作为灵魂

    原文地址: http://www.spnguru.com/2010/08/zookeeper%E5%85%A8%E8%A7%A3%E6%9E%90%E2%80%94%E2%80%94paxos%E7% ...

  8. C#-动态生成40个按钮，大小（20，20），要求每行6个放置

    应该为for (int i=0;i<基本数据DataSet3.Tables [0].Rows .Count ;i++)                 {                 int ...

  9. css固定表格表头(各浏览器通用)

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  10. android134 360 07 归属地查询

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...