原生js和jQuery实现淡入淡出轮播效果
更新时间:2015年12月27日 00:18 点击:1959
本文实例为大家介绍了基于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>www.jb51.net</p> </div> <p>脚本之家是国内专业的网站建设资源.</p> </div> <div class="box"> <h2><input type="button" value="点击淡出" /></h2> <div id="fadeOut"> <p>脚本之家</p> <p>www.jb51.net</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前端闭包面试题解析
下一篇: 理解javascript中DOM事件
相关文章
- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要介绍了JS实现响应鼠标点击动画渐变弹出层效果代码,具有非常自然流畅的动画过度效果,涉及JavaScript针对鼠标事件的响应及页面元素样式的动态操作相关技巧,需要的朋友可以参考下...2016-03-28
- 本文给大家介绍的是nodejs实现使用阿里大鱼短信API发送消息的方法和代码,有需要的小伙伴可以参考下。...2016-01-20
- 系统的学习了一下angularjs,发现angularjs的有些思想根php的模块smarty很像,例如数据绑定,filter。如果对smarty比较熟悉的话,学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解,感兴趣的朋友一起学习吧...2015-12-29
- 这次文章要给大家介绍的是node.JS md5加密中文与php结果不一致怎么办,不知道具体解决办法的下面跟小编一起来看看。 因项目需要,需要Node.js与PHP做接口调用,发现nod...2017-07-06
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15