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 ...
随机推荐
- iOS开发之身份证号码校验
// // Card.h // THCStore // // Created by Mac on 15/7/15. // Copyright (c) 2015年 Mac. All rights ...
- Microsoft 2013 新技术学习笔记 二
在探讨系统重构的代码结构组织之前,先初步考虑框架与数据库的交互,在.net平台上数据访问方案有人总结为三类:DataSet.ADO.net 2.0.ORM组件.我只熟悉ADO.NET方式,众多的企业特 ...
- 写出几种IE6 BUG的解决方法
1.双边距BUG float引起的 使用display:inline 2.3像素问题 使用多个float和注释引起的 使用dislpay:inline -3px 3.超链接hover 点击后失效 ...
- 在redhat上搭建redmine
搞个项目管理的东西 找了下还是redmine比较合适,行动action: 1.ruby 额 是的你没有看错 需要先安装一个ruby的环境.话说这个安装起来很是纠结,本来想用yum 结果咩有成功,于是乎 ...
- C#读写Json
C#处理json文件主要有两种方式: (1)使用JavaScriptSerializer类,需要引入System.Web.Extension库,并添加下面两个引用: using System.Web; ...
- Gulp：新一代前端构建利器
1.什么是Gulp gulp.js 是一种基于流的,代码优于配置的新一代构建工具. Gulp 和 Grunt 类似.但相比于 Grunt 的频繁的 IO 操作,Gulp 的流操作,能更快地完成构建. ...
- Unity 3D 中自动寻路 和 跟随转向 探析
这里主要讲三个函数 , 一个自动跟随函数 和 两个指向旋转函数 , 这三个函数在游戏角色创建过程中会经常用到: 这个是跟随函数 和 欧拉角旋转函数 public class GensuiZhixian ...
- Hadoop入门进阶课程4--HDFS原理及操作
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,博主为石山园,博客地址为 http://www.cnblogs.com/shishanyuan ...
- 标志数在wordcount程序中的应用与拓展
wordcount程序要求测出文本中的单词数,字符数和行数. 设计思路: 将文件读入,逐字检测,检测到空格单词数加一,检测到回车行数单词数加一,如果既不是回车也不是空格则说明是字符,字符数加一 编程时 ...
- 分享一套精美的现代 UI PSD 工具包【免费下载】
艾库特·耶尔马兹,是土耳其伊斯坦布尔的一位高级艺术总监,他向大家分享了一套美丽的现代 UI 工具包,你可以免费下载.所以,你可以使用这个优秀的素材设计视觉互动和有吸引力的用户界面. 此 UI 套件提供 ...