首页
所有分类
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优缺点分析说明
Apr 10 Javascript
JQuery 返回布尔值Is()条件判断方法代码
May 14 Javascript
页面加载完毕后滚动条自动滚动一定位置
Feb 20 Javascript
js中用window.open()打开多个窗口的name问题
Mar 13 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
Apr 06 Javascript
简述AngularJS相关的一些编程思想
Jun 23 Javascript
jQuery简单实现中间浮窗效果
Sep 04 Javascript
jQuery实现导航栏头部菜单项点击后变换颜色的方法
Jul 19 jQuery
Vue实现一个返回顶部backToTop组件
Jul 25 Javascript
深入浅析javascript函数中with
Oct 28 Javascript
解决vue prop传值default属性如何使用,为何不生效的问题
Sep 21 Javascript
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
城市猎人(1) 守望先锋(1) Docker(14) 巫师(1) AngularJS(2) 波段(1) 最终幻想(1) 西索(1) 帝国时代(1) explain(2)
You might like
PHP 截取字符串专题集合
2010/08/19 PHP
yii框架源码分析之创建controller代码
2011/06/28 PHP
采集邮箱的php代码(抓取网页中的邮箱地址)
2012/07/17 PHP
PHP二维数组排序简单实现方法
2016/02/14 PHP
Yii框架日志记录Logging操作示例
2018/07/12 PHP
Jquery 设置标题的自动翻转
2009/10/03 Javascript
jquery控制listbox中项的移动并排序
2009/11/12 Javascript
一个简单的Ext.XTemplate的实例代码
2012/03/18 Javascript
jquery.autocomplete修改实现键盘上下键自动填充示例
2013/11/19 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
对Web开发中前端框架与前端类库的一些思考
2015/03/27 Javascript
javascript常用功能汇总
2015/07/05 Javascript
javaScript知识点总结(必看篇)
2016/06/10 Javascript
Vue学习笔记进阶篇之vue-router安装及使用方法
2017/07/19 Javascript
angularjs手动识别字符串中的换行符方法
2018/10/02 Javascript
webpack dll打包重复问题优化的解决
2018/10/10 Javascript
微信小程序保存多张图片的实现方法
2019/03/05 Javascript
selenium+java中用js来完成日期的修改
2019/10/31 Javascript
vue使用recorder.js实现录音功能
2019/11/22 Javascript
vue tab切换,解决echartst图表宽度只有100px的问题
2020/07/19 Javascript
Vue项目利用axios请求接口下载excel
2020/11/17 Vue.js
python实现JAVA源代码从ANSI到UTF-8的批量转换方法
2015/08/10 Python
浅析python中SQLAlchemy排序的一个坑
2017/02/24 Python
分享给Python新手们的几道简单练习题
2017/09/21 Python
Python实现基本数据结构中栈的操作示例
2017/12/04 Python
Python垃圾回收机制三种实现方法
2020/04/27 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
HTML5重塑Web世界它将如何改变互联网
2012/12/17 HTML / CSS
学生就业推荐信
2013/11/13 职场文书
《大作家的小老师》教学反思
2014/04/16 职场文书
乡镇保密工作责任书
2014/07/28 职场文书
2014年收银工作总结
2014/11/13 职场文书
婚庆开业庆典主持词
2015/06/30 职场文书
大学军训通讯稿（2016最新版）
2015/12/21 职场文书
CSS3 制作的彩虹按钮样式
2021/04/11 HTML / CSS
Elasticsearch Recovery 详细介绍
2022/04/19 Java/Android