本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码，分享给大家供大家参考，具体内容如下：
基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果。
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的正整数值, 也是可选参数.
原生JS实现淡入淡出效果 本站是国内专业的网站建设资源.
本站
www.jb51.net
本站是国内专业的网站建设资源.
本站是国内专业的网站建设资源.
以上就是本文的全部内容，希望对大家学习原生js和jQuery实现淡入淡出轮播效果有所帮助。
