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 ...
随机推荐
- HTML5应用程序缓存Application Cache详解
什么是Application Cache HTML5引入了应用程序缓存技术,意味着web应用可进行缓存,并在没有网络的情况下使用,通过创建cache manifest文件,可以轻松的创建离线应用. A ...
- 30个php操作redis常用方法代码例子
From: http://www.jb51.net/article/51884.htm 这篇文章主要介绍了30个php操作redis常用方法代码例子,本文其实不止30个方法,可以操作string类型. ...
- undercore & Backbone对AMD的支持（Require.js中如何使用undercore & Backbone）
RequireJS填补了前端模块化开发的空缺,RequireJS遵循AMD(异步模块定义,Asynchronous Module Definition)规范,越来越多的框架支持AMD,像最近的jQue ...
- window.location 对象所包含的属性
window.location 对象所包含的属性 属性 描述 hash 从井号 (#) 开始的 URL(锚) host 主机名和当前 URL 的端口号 hostname 当前 URL 的主机名 hre ...
- left join on
问题: select * from A left join f on e.cust=f.account_id where f.status='0' 与 select * from A left jo ...
- iOS-上拉刷新,下拉加载-----------详解
一.使用的第三方库 1.AFNetworking ----> 网络请求 2. MJRefresh ----> 刷新 3. MBProgressHUD -- ...
- .Net魔法堂：史上最全的ActiveX开发教程——开发篇
一.前言 在设计某移动内部自动化运维平台时,经综合考虑终端机性能和功能需求等因素后,决定采用B/S模式,并且浏览器通过ActiveX组件实现与服务器Agent作P2P的通讯.好处,整个平台以网页形式存 ...
- 【分享】iOS功能界面漂亮的弹出框
STPopup 为 iPhone 和 iPad提供了 STPopupController UINavigationController 弹出的风格. 特性: Extend your view cont ...
- 查找最小的k 个元素之C#算法实现
紧接着上一篇微软编程面试100题,这次想解决的是查找最小的K个元素,题目是:输入n 个整数,输出其中最小的k 个.例如输入1,2,3,4,5,6,7 和8 这8 个数字,则最小的4 个数字为1,2,3 ...
- TortoiseSVN的bin目录下面没有svn.exe
自己在idea联合svn时遇到这个问题,然后bd和gg,发现很多人都乱说,说什么TortoiseSVN是客户端,默认不包含svn.exe,需要安装Subversion.bullshit! 之所以没有, ...