首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生js和jQuery实现淡入淡出轮播效果

Posted in Javascript onDecember 25, 2015

本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码，分享给大家供大家参考，具体内容如下：
基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果。
html代码：

<html>
<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'><</div>
 <div id='next'>></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<0){
  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(); 
})

文章最后为大家提了一个小问题，希望大家能给出解决方法。
使用fadeIn淡入时却无效果，最后只能使用fadeTo实现，这是什么原因？
为大家分享一个小例子：原生JS实现淡入淡出效果(fadeIn/fadeOut/fadeTo)
淡入淡出效果,在日常项目中经常用到,可惜原生JS没有类似的方法,而有时小的页面并不值得引入一个jQuery库,所以就自己写了一个,已封装, 有用得着的朋友, 可以直接使用. 代码中另附有一个设置元素透明度的方法, 是按IE规则(0~100)设置, 若改成标准设置方法(0.00~1.00), 下面使用时请考虑浮点精确表达差值.
参数说明:
fadeIn()与fadeOut()均有三个参数,第一个是事件, 必填; 第二个是淡入淡出速度, 正整数, 大小自己权衡, 可选参数; 第三个, 是指定淡入淡出到的透明度值(类似于jQuery中的fadeTo()), 0~100的正整数值, 也是可选参数.

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<title>原生JS实现淡入淡出效果</title> 
<style> 
/*demo css*/ 
#demo div.box {float:left;width:31%;margin:0 1%} 
#demo div.box h2{margin-bottom:10px} 
#demo div.box h2 input{padding:5px 8px;font-size:14px;font-weight:bolder} 
#demo div.box div{text-indent:10px; line-height:22px;border:2px solid #555;padding:0.5em;overflow:hidden} 
</style> 
<script> 
window.onload = function(){ 
 //底层共用 
 var iBase = { 
 Id: function(name){ 
  return document.getElementById(name); 
 }, 
 //设置元素透明度,透明度值按IE规则计,即0~100 
 SetOpacity: function(ev, v){ 
  ev.filters ? ev.style.filter = 'alpha(opacity=' + v + ')' : ev.style.opacity = v / 100; 
 } 
 } 
 //淡入效果(含淡入到指定透明度) 
 function fadeIn(elem, speed, opacity){ 
 /* 
  * 参数说明 
  * elem==>需要淡入的元素 
  * speed==>淡入速度,正整数(可选) 
  * opacity==>淡入到指定的透明度,0~100(可选) 
  */ 
 speedspeed = speed || 20; 
 opacityopacity = opacity || 100; 
 //显示元素,并将元素值为0透明度(不可见) 
 elem.style.display = 'block'; 
 iBase.SetOpacity(elem, 0); 
 //初始化透明度变化值为0 
 var val = 0; 
 //循环将透明值以5递增,即淡入效果 
 (function(){ 
  iBase.SetOpacity(elem, val); 
  val += 5; 
  if (val <= opacity) { 
  setTimeout(arguments.callee, speed) 
  } 
 })(); 
 } 
 
 //淡出效果(含淡出到指定透明度) 
 function fadeOut(elem, speed, opacity){ 
 /* 
  * 参数说明 
  * elem==>需要淡入的元素 
  * speed==>淡入速度,正整数(可选) 
  * opacity==>淡入到指定的透明度,0~100(可选) 
  */ 
 speedspeed = speed || 20; 
 opacityopacity = opacity || 0; 
 //初始化透明度变化值为0 
 var val = 100; 
 //循环将透明值以5递减,即淡出效果 
 (function(){ 
  iBase.SetOpacity(elem, val); 
  val -= 5; 
  if (val >= opacity) { 
  setTimeout(arguments.callee, speed); 
  }else if (val < 0) { 
  //元素透明度为0后隐藏元素 
  elem.style.display = 'none'; 
  } 
 })(); 
 } 
 
 
 var btns = iBase.Id('demo').getElementsByTagName('input'); 
 
 btns[0].onclick = function(){ 
 fadeIn(iBase.Id('fadeIn')); 
 } 
 btns[1].onclick = function(){ 
 fadeOut(iBase.Id('fadeOut'),40); 
 } 
 btns[2].onclick = function(){ 
 fadeOut(iBase.Id('fadeTo'), 20, 10); 
 } 
 
} 
</script> 
</head> 
<body> 
 
<!--DEMO start--> 
<div id="demo"> 
 <div class="box"> 
 <h2><input type="button" value="点击淡入" /></h2> 
 <div id="fadeIn" style="display:none"> 
  <p>三水点靠木</p> 
  <p>3water.com</p> 
 </div> 
 <p>三水点靠木是国内专业的网站建设资源.</p> 
 </div> 
 
 <div class="box"> 
 <h2><input type="button" value="点击淡出" /></h2> 
 <div id="fadeOut"> 
  <p>三水点靠木</p> 
  <p>3water.com</p> 
 </div> 
 <p>三水点靠木是国内专业的网站建设资源.</p> 
 </div> 
 
 <div class="box"> 
 <h2><input type="button" value="点击淡出至指定透明度" /></h2> 
 <div id="fadeTo"> 
  
 </div> 
 <p>三水点靠木是国内专业的网站建设资源.</p> 
 </div> 
</div> 
<!--DEMO end--> 
 
</body> 
</html>

以上就是本文的全部内容，希望对大家学习原生js和jQuery实现淡入淡出轮播效果有所帮助。

原生js和jQuery实现淡入淡出轮播效果

- Author -

Big_Dot

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
jquery与google map api结合使用 控件,监听器
Mar 04 Javascript
javascript中方便增删改cookie的一个类
Oct 11 Javascript
jQuery 遍历-nextUntil()方法以及prevUntil()方法的使用介绍
Apr 26 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
jquery实现的蓝色二级导航条效果代码
Aug 24 Javascript
使用jQuery制作基础的Web图片轮播效果
Apr 22 Javascript
jquery 遍历数组 each 方法详解
May 25 Javascript
JavaScript对象封装的简单实现方法(3种方法)
Jan 03 Javascript
js 倒计时（高效率服务器时间同步）
Sep 12 Javascript
分析JavaScript数组操作难点
Dec 18 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
jQuery实现模仿微博下拉滚动条加载数据效果
Dec 25 #Javascript
尝试动手制作javascript放大镜效果
Dec 25 #Javascript
js操作cookie保存浏览记录的方法
Dec 25 #Javascript
js实现跨域的多种方法
Dec 25 #Javascript
jquery.cookie.js用法实例详解
Dec 25 #Javascript
理解javascript中try...catch...finally
Dec 25 #Javascript
javascript实现简单加载随机色方块
Dec 25 #Javascript
Mybatis-Plus(3) create(1) el-table(1) mounted(1) Next.js(1) 子查询(1) 日志格式分析(1) nginx(76) TableField(1) 脚手架(2)
You might like
DOTA2 玩家自创拉野攻略 特色英雄快速成长篇
2020/04/20 DOTA
php UTF8 文件的签名问题
2009/10/30 PHP
php中导出数据到excel时数字变为科学计数的解决方法
2013/02/03 PHP
php使用百度ping服务代码实例
2014/06/19 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
PHP使用Nginx实现反向代理
2017/09/20 PHP
Cookie 注入是怎样产生的
2009/04/08 Javascript
javascript 匿名函数的理解（透彻版)
2010/01/28 Javascript
将json当数据库一样操作的javascript lib
2013/10/28 Javascript
文字垂直滚动之javascript代码
2015/07/29 Javascript
强大Vue.js组件浅析
2016/09/12 Javascript
JavaScript中在光标处插入添加文本标签节点的详细方法
2017/03/22 Javascript
如何使用Bootstrap 按钮实例详解
2017/03/29 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
Node.js 的模块知识汇总
2017/08/16 Javascript
Vue.js路由实现选项卡简单实例
2019/07/24 Javascript
微信小程序官方动态自定义底部tabBar的例子
2019/09/04 Javascript
微信小程序实现禁止分享代码实例
2019/10/19 Javascript
详解vue页面首次加载缓慢原因及解决方案
2019/11/06 Javascript
微信小程序实现首页弹出广告
2020/12/03 Javascript
Python之eval()函数危险性浅析
2014/07/03 Python
Python列表list解析操作示例【整数操作、字符操作、矩阵操作】
2017/07/25 Python
利用python和百度地图API实现数据地图标注的方法
2019/05/13 Python
django框架model orM使用字典作为参数，保存数据的方法分析
2019/06/24 Python
python实现坦克大战
2020/04/24 Python
Python类super()及私有属性原理解析
2020/06/15 Python
巴西服装和鞋子购物网站：Marisa
2018/10/25 全球购物
高级Java程序员面试要点
2013/08/02 面试题
医学求职信
2014/05/28 职场文书
中国在我心中演讲稿
2014/09/13 职场文书
道路交通事故人身损害赔偿协议书
2014/11/19 职场文书
2014年创卫工作总结
2014/11/24 职场文书
比较几种Redis集群方案
2021/06/21 Redis
opencv用VS2013调试时用Image Watch插件查看图片
2021/07/26 Python
Python可变集合和不可变集合的构造方法大全
2021/12/06 Python
将MySQL的表数据全量导入clichhouse库中
2022/03/21 MySQL