css jquery 实现轮播效果
<!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 实现轮播效果的更多相关文章
- CSS+jQuery实现轮播
CSS+jQuery实现轮播 CSS jQuery 前端 实现功能: 自动轮播: 鼠标放在上面停止轮播: 鼠标放在上面显示左右切换的按钮: 鼠标放在小圆圈上显示对应的图片: 轮播效果图 style. ...
- jQuery实现轮播效果(一) - 基础
前戏: XXXX年XX月XX日,经理交给我一个站点新闻资讯网页开发的活儿.我一个java程序猿,怎么完毕得了网页设计这样高端的活儿呢! 之前尽管有学过一点HTML.CSS的知识.可是在实际的使用中,把 ...
- jquery图片轮播效果(unslider)
今天做网站(住建局网站)需要用到图片轮播,刚开始想借鉴DTCMS上的,查看CSS与页面代码,呵呵,不复杂,直接复制过来,结果调整半天,页面还是各种乱,没办法,网上找一个吧,于是找到了今天要说的这货un ...
- 通过jQuery实现轮播效果
HTML <div class="wrap"> <div id="slide"> <ul class="list&quo ...
- 用CSS实现新闻轮播效果
CSS: /* Make it a marquee */ .marquee { width: 450px;margin: 0 auto;overflow: hidden;white-space: no ...
- 12款经典的白富美型—jquery图片轮播插件—前端开发必备
图片轮播是网站中的常用功能,用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- JQuery实现图片轮播效果源码
======================整体结构======================== <div class="banner"> <ul class ...
- 史上最全的CSS hack方式一览 jQuery 图片轮播的代码分离 JQuery中的动画 C#中Trim()、TrimStart()、TrimEnd()的用法 marquee 标签的使用详情 js鼠标事件 js添加遮罩层 页面上通过地址栏传值时出现乱码的两种解决方法 ref和out的区别在c#中 总结
史上最全的CSS hack方式一览 2013年09月28日 15:57:08 阅读数:175473 做前端多年,虽然不是经常需要hack,但是我们经常会遇到各浏览器表现不一致的情况.基于此,某些情况我 ...
随机推荐
- BZOJ——3412: [Usaco2009 Dec]Music Notes乐谱
http://www.lydsy.com/JudgeOnline/problem.php?id=3412 Time Limit: 3 Sec Memory Limit: 128 MBSubmit: ...
- 从客户端(ExportContent="...ontinuous <br />Pass Count":13...")中检测到有潜在危险的 Request.Form 值。
mvc中,用chrome浏览器导出excel提示如题错误的解决办法. <system.web> <httpRuntime requestValidationMode="2. ...
- 8 Most Required Examples Reference For Oracle Forms
Check the following 8 Links for best Oracle Forms examples with source code (Fmb files), which will ...
- 【spring cloud】【spring boot】项目启动报错:Cannot determine embedded database driver class for database type NONE
解决参考文章:https://blog.csdn.net/hengyunabc/article/details/78762097 spring boot启动报错如下: Error starting A ...
- 工程管理,用网页就够了!——Wish3D Earth在线三维地球强势上线
大型工程涉及到众多的施工队.管理单位和相关部门,相互之间需要传递的数据.文件的数量是惊人的,必须建立起有效的信息管理方法,使管理者及时把握工程的信息,全面准确地控制工程施工情况. 现代化的建筑工程管理 ...
- 同步I/O 和 异步I/O
所谓同步I/O是指在调用ReadFile.WriteFile等函数进行输入输出操作时,系统完毕了输入输出ReedFile.WriteFile才返回. 在操作系统进行I/O操作的过程上,用户态线程不能运 ...
- tomcat下配置https方式
[本地HTTPS]①.<Connector SSLEnabled="true" clientAuth="false" keystoreFile=" ...
- HTML5移动开发实战必备知识——本地存储(2)
了解了一些主要的本地存储使用方法和思想后.我们来系统的介绍一下本地存储. 本地存储分为三大类:localStorage/sessionStorage/本地数据库 localStorage和sessio ...
- Winform GridView打印类
using System;using System.Collections.Generic;using System.Text;using System.Drawing.Printing;usin ...
- mybatis技术文章
http://legend2011.blog.51cto.com/3018495/1600478