原生js和jQuery实现淡入淡出轮播效果
本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码，分享给大家供大家参考，具体内容如下：
基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果。
html代码：
<html>
<head>
<metahttp-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:1pxsolid#fff;
}
#buttons{
position:absolute;
background:#000;
margin-top:300px;
margin-left:300px;
z-index:10;
}
.onactive{
background:green;
}
</style>
<scriptsrc='jquery.js'></script>
<scriptsrc='index.js'></script>
</head>
<body>
<divid='scrollPlay'>
<divid='buttons'>
<spanindex=0class='onactive'></span>
<spanindex=1></span>
<spanindex=2></span>
<spanindex=3></span>
<spanindex=4></span>
</div>
<divid='pre'><</div>
<divid='next'>></div>
<imgsrc='images/1.jpg'alt='pics'style='opacity:1'>
<imgsrc='images/2.jpg'alt='pics'>
<imgsrc='images/3.jpg'alt='pics'>
<imgsrc='images/4.jpg'alt='pics'>
<imgsrc='images/5.jpg'alt='pics'>
</div>
</body>
</html>
JS：
$(function(){
varindex=0;
varflag=false;//用于判断是否处于动画状态
//切换函数
functionmove(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){
vari=$(this).attr('index')
//console.log(i)
//console.log(index)
//console.log(i-index)
move(i-index)
showButton();
}
})
//高亮显示按钮
functionshowButton(){
if($('span').hasClass('onactive')){
$('span').removeClass();
}
$('span').eq(index).addClass('onactive')
}
//自动播放
vartimer;
functiongo(){
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>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8"/>
<title>原生JS实现淡入淡出效果</title>
<style>
/*democss*/
#demodiv.box{float:left;width:31%;margin:01%}
#demodiv.boxh2{margin-bottom:10px}
#demodiv.boxh2input{padding:5px8px;font-size:14px;font-weight:bolder}
#demodiv.boxdiv{text-indent:10px;line-height:22px;border:2pxsolid#555;padding:0.5em;overflow:hidden}
</style>
<script>
window.onload=function(){
//底层共用
variBase={
Id:function(name){
returndocument.getElementById(name);
},
//设置元素透明度,透明度值按IE规则计,即0~100
SetOpacity:function(ev,v){
ev.filters?ev.style.filter='alpha(opacity='+v+')':ev.style.opacity=v/100;
}
}
//淡入效果(含淡入到指定透明度)
functionfadeIn(elem,speed,opacity){
/*
*参数说明
*elem==>需要淡入的元素
*speed==>淡入速度,正整数(可选)
*opacity==>淡入到指定的透明度,0~100(可选)
*/
speedspeed=speed||20;
opacityopacity=opacity||100;
//显示元素,并将元素值为0透明度(不可见)
elem.style.display='block';
iBase.SetOpacity(elem,0);
//初始化透明度变化值为0
varval=0;
//循环将透明值以5递增,即淡入效果
(function(){
iBase.SetOpacity(elem,val);
val+=5;
if(val<=opacity){
setTimeout(arguments.callee,speed)
}
})();
}
//淡出效果(含淡出到指定透明度)
functionfadeOut(elem,speed,opacity){
/*
*参数说明
*elem==>需要淡入的元素
*speed==>淡入速度,正整数(可选)
*opacity==>淡入到指定的透明度,0~100(可选)
*/
speedspeed=speed||20;
opacityopacity=opacity||0;
//初始化透明度变化值为0
varval=100;
//循环将透明值以5递减,即淡出效果
(function(){
iBase.SetOpacity(elem,val);
val-=5;
if(val>=opacity){
setTimeout(arguments.callee,speed);
}elseif(val<0){
//元素透明度为0后隐藏元素
elem.style.display='none';
}
})();
}
varbtns=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>
<!--DEMOstart-->
<divid="demo">
<divclass="box">
<h2><inputtype="button"value="点击淡入"/></h2>
<divid="fadeIn"style="display:none">
<p>毛票票</p>
<p>www.nhooo.com</p>
</div>
<p>毛票票是国内专业的网站建设资源.</p>
</div>
<divclass="box">
<h2><inputtype="button"value="点击淡出"/></h2>
<divid="fadeOut">
<p>毛票票</p>
<p>www.nhooo.com</p>
</div>
<p>毛票票是国内专业的网站建设资源.</p>
</div>
<divclass="box">
<h2><inputtype="button"value="点击淡出至指定透明度"/></h2>
<divid="fadeTo">
</div>
<p>毛票票是国内专业的网站建设资源.</p>
</div>
</div>
<!--DEMOend-->
</body>
</html>
以上就是本文的全部内容，希望对大家学习原生js和jQuery实现淡入淡出轮播效果有所帮助。