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 ...
随机推荐
- -webkit-min-device-pixel-ratio的常见值对照
-webkit-min-device-pixel-ratio为1.0 所有非Retina的Mac 所有非Retina的iOS设备 Acer Iconia A500 Samsung Galaxy Tab ...
- asp.net MVC之 自定义过滤器(Filter)
一.系统过滤器使用说明 1.OutputCache过滤器 OutputCache过滤器用于缓存你查询结果,这样可以提高用户体验,也可以减少查询次数.它有以下属性: Duration:缓存的时间,以秒为 ...
- Android 模拟器 获得 root权限
启动一个模拟器,开始-运行-输入cmd,打开dos,依次输入 adb shell mount -o remount,rw -t yaffs2 /dev/block/mtdblock3 /system ...
- ArcGIS Runtime for Android 使用异步GP服务绘制等值线
关于基于Android上ArcGIS Server GP服务的调用,已经有前辈给出了很好的例子: http://blog.csdn.net/esrichinacd/article/details/92 ...
- mssql表名列名对应语句
if exists (select * from tempdb..sysobjects where name like '#magic%') drop table #magic go select a ...
- FFmpeg编译出错_img_convert 找不到
问题出现在下载的ffmpeg的版本不一样,在0.4.8以前的版本中还有img_convert这个函数,新版本中用sws_getContext和sws_scale代替了.简单说明如下: 新版本的ffmp ...
- 【eoe 6】ActionBar的使用
一. Action Bar 一般位于屏幕顶部,包括四个可操作区域: 应用图标或LOGO区域,用于视图控制的Spinner下拉菜单或TAB控件区域, Action button(也称为Action It ...
- 【转】Velocity模板(VM)语言介绍
http://www.blogjava.net/caizh2009/archive/2010/08/20/329495.html Velocity是什么? Velocity是一个基于java的模板引擎 ...
- [转] C#反射设置属性值和获取属性值
/// /// 获取类中的属性值 /// /// /// /// public string GetModelValue(string FieldName, object obj) { try { T ...
- MyBatis XML 映射配置文件
配置文件的基本结构 configuration —— 根元素 properties —— 定义配置外在化 settings —— 一些全局性的配置 typeAliases —— 为一些类定义别名 ty ...