jQuery实现图片伦播效果(淡入淡出+左右切换)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
ul li {
list-style: none;
}
a{
text-decoration: none;
}
#banner{
width: 100%;
height: 300px;
overflow: hidden;
background: rgb(40, 40, 40 , .4);
}
#center{
width: 760px;
height: 300px;
margin: 0 auto;
position: relative;
}
#center ul {
width: 760px;
height: 300px;
}
#center ul li{
width: 760px;
height: 300px;
}
#center ul li a img{
width: 100%;
height: 100%;
display: block;
}
#center .btn{
display: none;
position: absolute;
width: 46px;
height: 70px;
top: 110px;
font-size: 30px;
color: #fff;
text-align: center;
line-height: 70px;
background: rgba( 0 , 0 , 0 , .4 );
font-weight: 600;
}
#center .btn:hover{
background: rgba( 0 , 0 , 0 , .8 );
}
#center .left{
left: 15px;
}
#center .right{
right: 15px;
}
#list{
width: 88px;
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -44px;
background: rgba(0,0,0,.4);
border-radius: 20px;
padding: 2px 10px;
}
#list span{
display: inline-block;
width: 9px;
height: 9px;
border-radius: 50%;
border: 1px solid #fff;
cursor: pointer;
}
#list span.active{
background: #fff;
} </style>
</head>
<body>
<div id="banner">
<div id="center">
<ul>
<li><a href="javascript:;"><img src="img/1.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/2.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/3.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/4.jpg"/></a></li>
<li><a href="javascript:;"><img src="img/5.jpg"/></a></li>
</ul>
<a href="javascript:;" class="btn left"><</a>
<a href="javascript:;" class="btn right">></a>
<div id="list">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
</div>
</div>
<script src="js/jquery-1.11.3.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
var $banner = $('#banner');
var $span = $('#list span');
var $li = $('#center ul li');
var $btn = $('#center .btn');
var $right = $('#center .right');
var $left = $('#center .left');
var timer = null;
var $index = 0;
$banner.hover(function(){
$btn.fadeIn( 500 );
clearInterval(timer);
},function(){
$btn.fadeOut( 500 );
timer = setInterval(rightC,2000);
})
$right.click(function(){
rightC();
})
$left.click(function(){
leftC();
}); timer = setInterval(rightC,2000);
$span.mouseover(function(){
$index = $(this).index();
change();
})
function rightC(){
$index ++;
if($index>$span.size()-1){
$index = 0;
}
change();
}
function leftC(){
$index --;
if($index<0){
$index = $span.size()-1;
}
change();
}
function change(){
$span.eq($index).addClass('active').siblings().removeClass('active');
$li.eq($index).stop().fadeIn(500).siblings().stop().fadeOut(500);
}
</script>
</body>
</html>
jQuery实现图片伦播效果(淡入淡出+左右切换)的更多相关文章
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- [转]jQuery实现图片轮播效果，jQuery实现焦点新闻
本文转自:http://blog.csdn.net/tsyj810883979/article/details/8986157 效果图: 实现代码: <!DOCTYPE html> < ...
- JQuery实现图片轮播效果源码
======================整体结构======================== <div class="banner"> <ul class ...
- 使用JQuery实现图片轮播效果
[效果如图] [原理简述] 这里大概说一下整个流程: 1,将除了第一张以外的图片全部隐藏, 2,获取第一张图片的alt信息显示在信息栏,并添加点击事件 3,为4个按钮添加点击侦听,点击相应的按钮,用f ...
- 首页大屏广告效果 jquery轮播图淡入淡出
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- （转）jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 用CALayer实现淡入淡出的切换图片效果
由于直接更改layer的contents显示的隐式动画切换的时候的动画持续时间没办法控制, 切换效果不尽人意,所以这里配合了CABasicAnimation实现淡入淡出的切换效果, 另外还可以使用组合 ...
- 封装bt轮播图淡入淡出效果样式
<!--BT轮播图--> <div data-ride="carousel" class="carousel slide carousel_inn ...
随机推荐
- Java中删除文件、删除目录及目录下所有文件（转）
原文链接:Java中删除文件.删除目录及目录下所有文件 知识点:File.delete()用于删除“某个文件或者空目录”!所以要删除某个目录及其中的所有文件和子目录,要进行递归删除,具体代码示例如下: ...
- Codeforces Perfect Pair (JAVA)
http://codeforces.com/problemset/problem/317/A 题意:给两个数字,可以两数相加去替换其中一个数字.问要做多少次,可以让两个数字钟至少一个 >= 目标 ...
- 经典SQL语句大全(网络资源共享)
下列语句部分是Mssql语句,不可以在access中使用. SQL分类: DDL—数据定义语言(CREATE,ALTER,DROP,DECLARE) DML—数据操纵语言(SELECT,DELET ...
- Swift初学习
距离swift发布10天了,也简单看了一下swift的语法,个人感觉相对于object-c很是简单明了.Swift的出现并不能说明iOS开发简单了很多,有可能会变得复杂,你需要学习两门编程语言,因为在 ...
- SQL SERVER UNION和UNION ALL
union与union allunion 缺省在合并结果集后消除重复项,union all 指定在合并结果集后保留重复项, 打个比喻吧 比如A表的数据是 A{ 1,4,5,9} B{2,3 ...
- 没有找到cxcore100.dll,因此这个应用程序未能启动，重新安装应用程序可能会修复此问题
第一种情况: 出现这个问题多数是因为“环境变量PATH”未设置,虽然你可能在安装的过程中勾选了Add <...>\OpenCV\bin to the system PATH项!安装Open ...
- DB2 v9.1 RACF 瞎学笔记
一.DB2 RACF control module 定义在prefix.SDSNSAMP(DSNXRXAC)中,查找一下数据集 符合*.SDSNSAMP数据集有两个,我这里使用的DB V9,自然pre ...
- 受限玻尔兹曼机（RBM）学习笔记（六）对比散度算法
去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算 ...
- Android学习笔记之ExecutorService线程池的应用....
PS:转眼间就开学了...都不知道这个假期到底是怎么过去的.... 学习内容: ExecutorService线程池的应用... 1.如何创建线程池... 2.调用线程池的方法,获取线程执行完毕后的结 ...
- Java中接口式的匿名内部类的构造方法
在使用多线程的时候,时常会使用两种方式实现,一种是直接继承Thread类来实现多线程,另外一种就是实现Runnable接口. 我们都知道,接口是没有构造方法的,同时匿名内部类也是没有构造方法的.原因有 ...