本文实例为大家介绍了基于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='https://www.jb51.net/jquery.js'></script> <script src='https://www.jb51.net/index.js'></script> </head> <body> <div> <div> <span index = 0></span> <span index = 1></span> <span index = 2></span> <span index = 3></span> <span index = 4></span> </div> <div><</div> <div>></div> <img src='https://www.jb51.net/images/1.jpg' alt='pics'> <img src='https://www.jb51.net/images/2.jpg' alt='pics'> <img src='https://www.jb51.net/images/3.jpg' alt='pics'> <img src='https://www.jb51.net/images/4.jpg' alt='pics'> <img src='https://www.jb51.net/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> <div> <h2><input type="button" value="点击淡入" /></h2> <div> <p>脚本之家</p> <p></p> </div> <p>脚本之家是国内专业的网站建设资源.</p> </div> <div> <h2><input type="button" value="点击淡出" /></h2> <div> <p>脚本之家</p> <p></p> </div> <p>脚本之家是国内专业的网站建设资源.</p> </div> <div> <h2><input type="button" value="点击淡出至指定透明度" /></h2> <div> </div> <p>脚本之家是国内专业的网站建设资源.</p> </div> </div> <!--DEMO end--> </body> </html>