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 IO 之 FileInputStream & FileOutputStream源码分析
Writer :BYSocket(泥沙砖瓦浆木匠) 微 博:BYSocket 豆 瓣:BYSocket FaceBook:BYSocket Twitter ...
- iOS开发之身份证号码校验
// // Card.h // THCStore // // Created by Mac on 15/7/15. // Copyright (c) 2015年 Mac. All rights ...
- LeetCode：4_Median of Two Sorted Arrays | 求两个排序数组的中位数 | Hard
题目: There are two sorted arrays nums1 and nums2 of size m and n respectively. Find the median of the ...
- MySQL数据库之数据类型BOOL/BOOLEAN与TINYINT测试总结
From: http://database.51cto.com/art/201203/323863.htm 网络上很多人咨询mysql是否提供布尔类型?MySQL数据库确实提供布尔类型,此数据类型的关 ...
- POJ 3320 Jessica's Reading Problem
Jessica's Reading Problem Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 6001 Accept ...
- C++:不同类型的指针的本质与差异
转自:http://blog.csdn.net/richerg85/article/details/10076365 指针的类型(The Type of a Pointer) 一 ...
- 基于jQuery右下角旋转环状菜单代码
基于jQuery右下角旋转环状菜单代码.这是一款固定在页面的右下角位置,当用户点击了主菜单按钮后,子菜单项会以环状旋转进入页面,并使用animate.css来制作动画效果.效果图如下: 在线预览 ...
- 写的一个Sass 和Compass的例子
/*1.打开项目根目录下的 config.rb 文件 2.搜索 line_comments 关键词,默认应该是 # line_comments = false 3.去掉前面的 #,保存 config. ...
- Android性能优化之内存篇
下面是内存篇章的学习笔记,部分内容与前面的性能优化典范有重合,欢迎大家一起学习交流! 1)Memory, GC, and Performance 众所周知,与C/C++需要通过手动编码来申请以及释放内 ...
- nodejs中常用加密算法
在常用的nodejs+express工程中,为了安全在登录及表单传输时,应该都需进行加密传输,目前个人常用到的加密方式有下列几种: 1.Hash算法加密: 创建一个nodejs文件hash.js,输入 ...