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

本文实例为大家介绍了基于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~100SetOpacity: 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）;//初始化透明度变化值为0var 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;//初始化透明度变化值为0var 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实现淡入淡出轮播效果有所帮助。