<!doctype html>

 <html>

 <head>

 <meta charset="utf-8">

 <title>Css3 Images Fade & Slider</title>

 <style type="text/css">

 body{background:#f8f8f8; margin:;}

 img{border:; vertical-align:middle;}

 .focus{width:800px; margin:0 auto; position:relative; overflow:hidden;}

 .images{height:350px; overflow:hidden; position:relative;}

 .images .item{position:absolute; top:; left:; height:350px; overflow:hidden; opacity:; transition:opacity 0.8s linear; -webkit-transition:opacity 0.8s linear;}

 .images .item img{width:800px;}

 .images .active{opacity:;}

 .control{position:absolute; bottom:10px; width:100%; text-align:center;}

 .control span{display:inline-block; cursor:pointer; background:#5fbab1; color:#fff; width:25px; height:25px; text-align:center; line-height:25px; border-radius:25px; margin:0 8px;}

 .control span.active{background:#e77918;}

 .title{position:absolute; left:; top:30%; width:100%;}

 .title p{position:absolute; left:; top:; background:#000; background:rgba(0,0,0,0.8); color:#fff; padding:20px 0; margin:; text-indent:10px; width:300px; opacity:; transform:translateX(-300px); -webkit-transform:translateX(-300px); transition:all 0.8s ease-out; -webkit-transition:all 0.8s ease-out;}

 .title p.active{opacity:; transform:translateX(0); -webkit-transform:translateX(0);}

 </style>

 <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

 <script>

 $(function(){

     $('.images .item:first, .control span:first, .title p:first').addClass('active');

     var index = 0,

         len = $('.images .item').length;

         autoPlay = function(){

             $('.images .item').eq(index++).addClass('active').siblings('.item').removeClass('active');

             $('.title p').eq(index-1).addClass('active').siblings('p').removeClass('active');

             $('.control span').eq(index-1).addClass('active').siblings('span').removeClass('active');

             if(index == len){index = 0;}

         },

         loop = setInterval(autoPlay,3000);

     $('.control span').hover(function(){

         index = $(this).index();

         autoPlay();

         clearInterval(loop);

     },function(){

         loop = setInterval(autoPlay,3000);

     })

 })

 </script>

 </head>

 <body>

 <div class="focus">

     <div class="images">

         <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_01.jpg" /></div>

         <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_02.jpg" /></div>

         <div class="item"><img src="http://d.lanrentuku.com/down/js/jiaodiantu-1041/images/banner_03.jpg" /></div>

     </div>

     <div class="title">

         <p>不变的安全才是最可靠的安全。</p>

         <p>清新的绿色源自身边的绿色。</p>

         <p>服务于生活的科技才是最高端的科技。</p>

     </div>

     <div class="control">

         <span>1</span>

         <span>2</span>

         <span>3</span>

     </div>

 </div>

 </body>

 </html>

css jquery 实现轮播效果的更多相关文章

  1. CSS+jQuery实现轮播

    CSS+jQuery实现轮播 CSS jQuery 前端  实现功能: 自动轮播: 鼠标放在上面停止轮播: 鼠标放在上面显示左右切换的按钮: 鼠标放在小圆圈上显示对应的图片: 轮播效果图 style. ...

  2. jQuery实现轮播效果(一) - 基础

    前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...

  3. jquery图片轮播效果(unslider)

    今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...

  4. 通过jQuery实现轮播效果

    HTML <div class="wrap"> <div id="slide"> <ul class="list&quo ...

  5. 用CSS实现新闻轮播效果

    CSS: /* Make it a marquee */ .marquee { width: 450px;margin: 0 auto;overflow: hidden;white-space: no ...

  6. 12款经典的白富美型—jquery图片轮播插件—前端开发必备

    图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...

  7. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  8. JQuery实现图片轮播效果源码

    ======================整体结构======================== <div class="banner"> <ul class ...

  9. 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结

    史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...

随机推荐

  1. MySQL的INFORMATION_SCHEMA数据库简介

    大家在安装或使用MYSQL时,会发现除了自己安装的数据库以外,还有一个 information_schema数据库.information_schema数据库是做什么用的呢,使用WordPress博客 ...

  2. 使用 Jmeter 做 Web 接口测试-详解

    接口测试概述 定义 WIKI定义:接口测试作为集成测 试的一部分,通过直接控制API来判断系统的功能性,可靠性,性能与安全性.API测试是没有界面的,执行在通讯 层.API 测试在自动化测试中有着重要 ...

  3. Topcoder SRM 666 DIV 1

    WalkOverATree 题意:给你一棵树,有个人在节点0,现在问你,这个人走L步,最多能访问多少个不同的节点,一个节点可以被走多次,但只算一次. 题解:这个问题的关键在于,每个点最多走两次,这是因 ...

  4. luogu P1304 哥德巴赫猜想

    题目描述 输入N(N<=10000),验证4~N所有偶数是否符合哥德巴赫猜想. (N为偶数). 如果一个数,例如10,则输出第一个加数相比其他解法最小的方案.如10=3+7=5+5,则10=5+ ...

  5. Loj #124. 除数函数求和

    链接:https://loj.ac/problem/124 就是筛一下积性函数. #include<bits/stdc++.h> #define ll long long #define ...

  6. 清理XCode无用的文件（转）

    目录如下,直接删除即可: 1.移除对旧设备的支持 影响:可重新生成:再连接旧设备调试时,会重新自动生成.我移除了4.3.2, 5.0, 5.1等版本的设备支持. 路径: [~/Library/Deve ...

  7. 使用PreloadJS加载图片资源

    一. 使用createjs里的LoadQueue函数实现异步加载图片,监听加载进度 1.实例对象LoadQueue加载队列对象 var queue = new createjs.LoadQueue(f ...

  8. ASIHTTPRequest 类库在iOS 7.0中，会有一些报错警告，需要稍作修改

    1. if ([inputStream streamStatus] == NSStreamEventErrorOccurred) { 修改成: if ([inputStream streamStatu ...

  9. java项目热加载工具jrebel

    flask有热加载的功能,修为代码后,自动生效. java项目也有类似的功能,不过需要使用收费的插件jrebel 提供一个免费的注册服务器:http://139.199.89.239:1008/884 ...

  10. python核心编程学习(第三版)之字符串匹配

    表示择一匹配的管道符号|,表示一个“从多个模式中选中其一”,有时候也称作并或者逻辑或 点号或者句号.符号匹配出了换行符\n以外的任何字符.如果要匹配句号,只需要使用反斜线转移句号符号的功能. ^匹配字 ...