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

本文实例为大家介绍了基于jQuery实现淡入淡出轮播效果的关键代码，分享给大家供大家参考，具体内容如下： 基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果。 HTML代码：

rush:xhtml;">

<

>

JS：

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的正整数值,也是可选参数.

rush:xhtml;">

<div id="demo">
<div class="Box">

display:none">

编程之家

www.jb51.cc

编程之家是国内专业的网站建设资源.

<div class="Box">

编程之家

www.jb51.cc

编程之家是国内专业的网站建设资源.