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

前端之家收集整理的这篇文章主要介绍了原生js和jQuery实现淡入淡出轮播效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

一个轮播 @H_301_11@
<
pics pics pics pics pics

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

原生JS实现淡入淡出<a href="https://www.jb51.cc/tag/xiaoguo/" target="_blank" class="keywords">效果</a>

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

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

<div class="Box">

编程之家

www.jb51.cc

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

<div class="Box">

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

以上就是本文的全部内容,希望对大家学习原生js和jQuery实现淡入淡出轮播效果有所帮助。

原文链接:https://www.f2er.com/jquery/50896.html

猜你在找的jQuery相关文章