标签：
基本原理：将所有图片绝对定位在同一位置，透明度设为0，然后通过jQuery的淡入淡出实现图片的切换效果；
但我在使用fadeIn淡出时却无效果，最后只能使用fadeOut实现，求大神指教
HTML：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <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=‘jquery.js‘></script> <script src=‘index.js‘></script> </head> <body> <div id=‘scrollPlay‘> <div id=‘buttons‘> <span index = 0 class=‘onactive‘></span> <span index = 1></span> <span index = 2></span> <span index = 3></span> <span index = 4></span> </div> <div id=‘pre‘><</div> <div id=‘next‘>></div> <img src=‘images/1.jpg‘ alt=‘pics‘ style=‘opacity:1‘> <img src=‘images/2.jpg‘ alt=‘pics‘> <img src=‘images/3.jpg‘ alt=‘pics‘> <img src=‘images/4.jpg‘ alt=‘pics‘> <img src=‘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(); })
标签：
原文地址：http://www.cnblogs.com/yzg1/p/4457845.html
