基本原理:将所有图片绝对定位在同一位置,透明度设为0,然后通过jQuery的淡入淡出实现图片的切换效果;

但我在使用fadeIn淡入时却无效果,最后只能使用fadeTo实现,求大神指教

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>一个轮播</title>
<style>
#scrollPlay{
width: 730px;
height: 336px;
/*overflow: hidden;*/
}
#pre{
position: absolute;
margin-top: 150px;
width:30px;
height: 30px;
background: #000;
color:#fff;
opacity: 0.7;
text-align: center;
line-height: 30px;
font-size: 20px;
z-index: 10;
}
img{
opacity: 0;
position: absolute;
}
#next{
position: absolute;
margin-left:700px;
margin-top: 150px;
width:30px;
height: 30px;
background: #000;
color:#fff;
opacity: 0.7;
text-align: center;
line-height: 30px;
font-size: 20px;
z-index: 10;
}
span{
display: block;
width: 15px;
height: 15px;
float: left;
border: 1px solid #fff; }
#buttons{ position: absolute;
background: #000;
margin-top: 300px;
margin-left: 300px;
z-index: 10; } .onactive{
background: green;
}
</style>
<script src='jquery.js'></script>
<script src='index.js'></script>
</head>
<body>
<div id='scrollPlay'>
<div id='buttons'>
<span index = 0 class='onactive'></span>
<span index = 1></span>
<span index = 2></span>
<span index = 3></span>
<span index = 4></span> </div>
<div id='pre'>&lt</div>
<div id='next'>&gt</div>
<img src='images/1.jpg' alt='pics' style='opacity:1'>
<img src='images/2.jpg' alt='pics'>
<img src='images/3.jpg' alt='pics'>
<img src='images/4.jpg' alt='pics'>
<img src='images/5.jpg' alt='pics'>
</div>
</body> </html>

JS:

$(function(){

    var index = 0;
var flag = false; //用于判断是否处于动画状态
//切换函数
function move(offset){
flag=true;
//console.log(offset)
$('img').eq(index).fadeOut('slow',function(){
if(offset>0){
if(index ==4){
index=0;
}else{
//console.log(index);
index=index+offset;
//console.log(index);
}
}
if(offset<){
if(index==0){
index=4;
}else{
index=index+offset
}
}
$('img').eq(index).fadeTo('slow',1) //使用fadeIn不成功:$('img').eq(index).fadeIn('slow')
showButton();
flag=false;
});
} //点击切换上一张
$('#pre').click(function(){
if(flag==false){
move(-1)
} }) //点击切换下一张
$('#next').click(function(){
if(flag==false){
move(1)
}
}) //点击按钮直接切换
$('span').click(function(){
if(flag==false){
var i= $(this).attr('index')
//console.log(i)
//console.log(index)
//console.log(i-index)
move(i-index)
showButton();
} }) //高亮显示按钮
function showButton(){
if($('span').hasClass('onactive')){
$('span').removeClass();
}
$('span').eq(index).addClass('onactive')
} //自动播放
var timer; function go(){
timer = setInterval(function(){
$('#next').trigger('click');
},3000)
}
//鼠标悬停,清除自动播放
$('#scrollPlay').mouseover(function(){
clearInterval(timer)
}) //鼠标移开,开始自动播放
$('#scrollPlay').mouseout(function(){
go();
}) go();
})

利用jQuery的淡入淡出实现轮播器的更多相关文章

  1. 利用jquery的淡入淡出函数(fadeIn和fadeOut)--实现轮播

    首先说下,我在网上找的例子全是用的UL 实现,其实大可不必,只要是能包含img标签的HTML标签都可以做轮播效果.利用jquery的淡入淡出函数(fadeIn和fadeOut).废话也不多说,边上代码 ...

  2. jQuery淡入淡出效果轮播图

    用JavaScript做了平滑切换的焦点轮播图之后,用jQuery写了个简单的淡入淡出的轮播图,代码没有做优化,html结构稍微有一些调整,图片部分用ul替换了之前用的div. html结构如下: & ...

  3. jQuery淡入淡出的轮播图

    html结构: <div class="banna">            <ul class="img">              ...

  4. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  5. 基于jQuery可悬停控制图片轮播代码

    基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览   源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...

  6. jQuery补充,基于jQuery的bxslider轮播器插件

    基于jQuery的bxslider轮播器插件 html <!DOCTYPE html> <html lang="zh-cn"> <head> & ...

  7. jQuery实现淡入淡出二级下拉导航菜单的方法

    本文实例讲述了jQuery实现淡入淡出二级下拉导航菜单的方法.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航菜单,淡入淡出二级的菜单导航,很经常见到的效果,这里使用的是jquer ...

  8. 利用CSS3制作淡入淡出动画效果

    CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...

  9. jquery特效(5)—轮播图③(鼠标悬浮停止轮播)

    今天很无聊,就接着写轮播图了,需要说明一下,这次的轮播图是在上次随笔中jquery特效(3)—轮播图①(手动点击轮播)和jquery特效(4)—轮播图②(定时自动轮播)的基础上写出来的,也就是本次随笔 ...

随机推荐

  1. jQuery浏览器差异

    //firefox Interface.send(data,function(msg){ $(msg).find("CARINFO").each(function(i){ var ...

  2. MVC3.0学习笔记之元模型元数据ModelMetaData以及模型元数据提供系统

    模型元数据ModelMetaData是MVC中很重要的概念,它包括但不仅限于 模型的类型,模型包含了哪些属性,属性都是什么类型的,属性上都有什么特性. ASP.NET MVC3.0 提供了默认的模型元 ...

  3. [Ubuntu] bash: warning: setlocale: LC_ALL: cannot change locale

    问题症状 -bash: warning: setlocale: LC_ALL: cannot change locale (en_US.utf8) 解决方法 本地化是指不同地区用户在键盘上输入不同语言 ...

  4. ArcGIS地图打印设置

    1.需求:客户自己开发的Engine程序,调用的是LayoutControl,需要连接大型绘图仪进行出图. 业务流程是先框选要打印的地图范围,该范围是自定义大小,框选完成之后进行预览,然后选择打印输出 ...

  5. sqlserver -- 学习笔记(六)日期格式转换

    忘了这篇是从哪里看到,然后复制保存下来,感谢原创的分享~ ) ::08 ),'-',''),' ',''),':','') ),'/','-') ) , ) ) , ) ) , ) ) , ) ) , ...

  6. 【转载】shell中 dd 命令

    转载自:http://blog.chinaunix.net/uid-24958038-id-3416169.html dd if=/dev/zero of=的含义是什么? 一.dd命令的解释 dd:用 ...

  7. [转载]AxureRP 7超强部件库下载

    很多刚刚开始学习Axure的朋友都喜欢到网上搜罗各种部件库(组件库)widgets library ,但是网络中真正实用的并且适合你使用的少之又少,最好的办法就是自己制作适合自己工作内容的部件库. 这 ...

  8. Testing - Selenium

    Selenium http://www.seleniumhq.org/ User Guide http://www.seleniumhq.org/docs/ Webdriver中文社区 http:// ...

  9. Direct3D11学习:(六)渲染管线

    转载请注明出处:http://www.cnblogs.com/Ray1024 一.概述 这篇文章主要讲解渲染管线(rendering pipeline)的理论知识. 渲染管线是指:在给定一个3D场景的 ...

  10. C# WinForm 技巧八:界面开发之“WeifenLuo.WinFormsUI.Docking+OutLookBar” 使用

    概述 转自 http://www.cnblogs.com/luomingui/archive/2013/09/19/3329763.html 最近几天一直在关注WinFrom方面的文章 有想着提炼一下 ...