1. [代码] 纯CSS3跳动焦点广告轮播特效

<!-- 
 
Author: Developed by Caleb Jacob
 
Author Website: http://iamceege.com/
 
Author Contact: caleb@iamceege.com
 
Description: This is a pure CSS content slider developed to remove the shroud of mystery behind CSS3 animations and transitions.
 
Version: 1.0
 
Browser Support: WebKit and FireFox
 
-----------------------------------------------
 
Usage: You are free to use and abuse this code anyway you'd like for any project (personal or commercial). Please don't directly redistribute and sell this code in any way (if you do, then you don't get a cookie). However, if you're interested in buying or selling this code, feel free to contact me at: caleb@iamceege.com
 
-----------------------------------------------
 
IMPORTANT: If you are wanting to add or subtract to the current amount of slides (4), you will need to change all of the CSS keyframe animations in css/slider.css to reflect your changes. Unfortunately, this is one of the downfalls of stricltly using CSS.
 
-----------------------------------------------
 
If you do end up using this script or finding it helpful, I'd love to hear your thoughts and see what you've done with it! (caleb@iamceege.com)
 
Thanks! And enjoy! :) 
 
 -->
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href="css/reset.css" rel="stylesheet" type="text/css" /> <!-- This CSS creates a ninja that kicks the butt of any browser that rebels against conformity *cough*IE*cough* -->
<link href="css/slider.css" rel="stylesheet" type="text/css" /> <!-- This CSS creates the magic for the slider -->
<link href="css/main.css" rel="stylesheet" type="text/css" /> <!-- This CSS is just boring -->
<title>纯CSS3跳动焦点广告轮播特效 - 模板巴士www.mobanbus.cn</title>
</head>
<body>
<div class="container">
    <div id="slider">
        <div id="mask"><!-- This masks an unordered list (<ul>) while it's sliding from right to left. Here's an illustration of what's going on (The ='s are the slides and the [ ] is the mask):
         
                        Slide 1:    [=]=== 
                        Slide 2:   =[=]==
                        Slide 3:  ==[=]=
                        Slide 4: ===[=]
                         
                        In summary, as the unordered list moves from right to left, the mask ([ ]) will only show the content (portion of the unordered list) that is currently inside of it. If it weren't for this mask, you'd see all of the slides going across your window.
                        -->
            <ul><!-- Sets up the previously mentioned unordered list. This will structure the slides and lay them out horizontally/inline with eachother (by default, an unordered list would display list items (<li>) vertically. However, with some CSS magic (display:inline;), the list items will line up horizontally -->
                <li><!-- Sets up a list item that will contain one of our slides -->
                    <a href="#" title="View my first image link"><img src="data:images/1.png" /></a><!-- This image is wrapped in an achor tag (<a>) to open up another page (or in this case, the image) when clicked on. If you don't want a slide to link to another page, simply remove the <a> tags -->
                </li>http://www.huiyi8.com/lingsheng/​
                <li>手机铃声
                    <a href="#" title="View my second image link"><img src="data:images/2.png" /></a>
                    <span><!-- The text wrapped in this span tag will become this slide's caption. If you do not want a caption, simply remove the span tag and all content/tags inside of it -->
                        <h2>Image Caption</h2>
                        <p>Lorem ipsum dolor...</p>
                    </span>
                </li>
                <li>
                    <iframe src="http://en.wikipedia.org/wiki/Calvin_and_Hobbes" width="600" height="200" frameborder="0" scrolling="no"></iframe><!-- This slide is pulling an entire web page from another website using the <iframe> tag. This goes to show that you can insert anything into the slides - even a video! This is why it's important for the slider to pause on mouseover. The pause will allow people to interact with whatever your slide contains - without it slapping them in the face and sliding away (that would suck)  -->
                    <span>
                        <h2>Iframe Caption</h2>
                    </span>
                </li>
                <li>          
                    <a href="#" title="View my third image link"><img src="data:images/3.png" /></a>
                </li>
            </ul><!-- Ends the unordered list that contains our slides -->
        </div><!-- Ends the slider mask. Everything outside of this tag will no longer be masked -->
        <div id="progress"><!-- Sets up our progress bar to show the remaining time of the current slide. This will be animated to go from 1px wide to the full width of the slide (600px) -->
        </div>
        <div id="overlay"><!-- Used to add a dope gradient ontop of the slider. Simply remove this <div> if you don't want any type of overlay -->
        </div>
        <div id="pause"><!-- This contains the pause icon that appears when hovering over the slider. Again, if you don't want the icon to appear, simply remove this <div> -->
        </div>
    </div>
</div>
</body>
</html>

纯CSS3跳动焦点广告轮播特效的更多相关文章

  1. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  2. css3关键帧动画实现轮播效果

    实现效果:打开手机京东,可以看到首页的头部,以这个头部为基础,仿写一个类似的样式. 思路:仔细观察可以发现,手机京东的头部是以一个搜索栏和轮播特效组成的,而这个搜索栏是以轮播特效做为背景的,现在运用c ...

  3. 安卓开发笔记——自定义广告轮播Banner（实现无限循环）

    关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...

  4. android 项目学习随笔十六（ 广告轮播条播放）

    广告轮播条播放 if (mHandler == null) {//在此初始化mHandler , 保证消息不重复发送 mHandler = new Handler() { public void ha ...

  5. Android 通过ViewFlipper实现广告轮播功能并可以通过手势滑动进行广告切换

    为了实现广告轮播功能,在网上找了很多方法,有的效果很好,但是代码太麻烦,并且大多是用的viewpager,总之不是很满意. 于是看了一下sdk有个控件是ViewFlipper,使用比较方便,于是尝试了 ...

  6. 纯css3实现的动画加载特效

    之前给大家带了很多款进度加载条,今天再给大家分享一款纯css3实现的动画加载特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="wrap& ...

  7. 自定义View（二)ViewPage广告轮播

    自定义View的第二个学习案例,使用ViewPage实现广告轮播,通过组合现有的View实现效果如下: 有关ViewPage使用可以学习谷歌官方API,和训练案例: 1.使用ViewPage实现屏幕滑 ...

  8. CSS3最简洁的轮播图

    <!DOCTYPE html> <html> <head> <title>CSS3最简洁的轮播图</title> <style> ...

  9. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

随机推荐

  1. OpenGL/GLSL数据传递小记(3.x)(转)

    OpenGL/GLSL规范在不断演进着,我们渐渐走进可编程管道的时代的同时,崭新的功能接口也让我们有点缭乱的感觉.本文再次从OpenGL和GLSL之间数据的传递这一点,记录和介绍基于OpenGL3.x ...

  2. iOS 多网络请求同步并发

    iOS中经常会用到多线程,在多线程中有一个线程组的概念(group),创建多个线程组任务,多组任务都完成之后,就会进入dispatch_group_notify队列中. 同时多线程中还有一个信号量的概 ...

  3. linux recv函数返回值分析

    函数原型: ssize_t recv(int sockfd, void *buf, size_t len, int flags); 该函数第一个参数制定接收端套接字描述符; 第二个参数指明一个缓冲区, ...

  4. 【转】【Mac系统】之Python版本切换、谷歌浏览器取消自动升级

    都是很有用的文章,本文都是转载文章,以便后续查阅: Mac Chrome浏览器取消自动升级(看这一篇就够了) <Mac修改默认python版本> <mac设置python版本切换,和 ...

  5. Codeforces Round #392 (Div. 2) F. Geometrical Progression

    原题地址:http://codeforces.com/contest/758/problem/F F. Geometrical Progression time limit per test 4 se ...

  6. MongoDBTemplate多条件查询的问题

    问题: 在使用Spring Data MongoDB 进行条件查询数据时,发现条件判断不起作用,结果会返回所有的数据. Criteria criteria = new Criteria(); crit ...

  7. IOS超强表格控件GMGridView

    本文转载至 http://zyc-to.blog.163.com/blog/static/1715240020124235837247/ 介绍: iOS为我们提供UITableView类,实现了项目的 ...

  8. 通讯录链表实现之C++

    前言 在mooc上学习了链表中的顺序表和单链表,并使用单链表数据结构跟着老师完成通讯录创建.通过这次链表练习使用,做一些总结. 自顶向下设计探索. 功能需求 在功能实现上,通讯录主要包括,创建联系人, ...

  9. 【python】-- SQLAlchemy操作MySQL

    ORM.SQLAchemy orm英文全称object relational mapping,就是对象映射关系程序,简单来说就是类似python这种面向对象的程序来说一切皆对象,但是使用的数据库却都是 ...

  10. spring struts2整合

    把struts2的action交给spring管理 一.导入相应jar包 导入与spring有关的基本jar包,和与struts2有关的基本jar包 还需要导入 struts2-spring整合jar ...