您的位置:首页 > Web前端 > JQuery

用jQuery+css+div 写一个 乱换效果

2012-04-28 17:09 190 查看
源码请上群索要,纯属原创 如有雷同 一定是缘分

用jQuery+css+div 写一个 轮换效果。无聊之作 专注后台开发 但是超级喜欢div+css 和js 最近看看html5 和css3



















// var lip = 0;
//计时器
var init ;
var CurrAutoIndex=0;
jQuery(".adPic a:first").attr('id', 'aOne');
var aLength = jQuery(".adPic a").size();
var adPicWidth= 202;//= aLength * 505;
jQuery(function($){
//$(".adPic").css("width", adPicWidth);
$(".Items").css("opacity", 0.5);

$(".Items").hover(function () {
$(this).css("opacity", 1);
var thisIndex=$(this).index();
goLeft(thisIndex-0);

}, function () {
})

jQuery(".Items").mousemove(function(){
window.clearInterval(init);
$(".Items").css("opacity", 0.5);
$(this).css("opacity", 1);

});
jQuery(".Items").mouseout(function(){
init=setInterval("AutoLeft()",5000);
})

function goLeft(currIndex) {
$("#aOne").stop();
var liveLeft = -currIndex * 202;
$("#aOne").animate({ "marginTop": liveLeft }, 300);
CurrAutoIndex=currIndex+1;
}

})

init=setInterval("AutoLeft()",4000);
function AutoLeft() {
if(CurrAutoIndex>3)
CurrAutoIndex=0;
jQuery("#aOne").stop();
var liveLeft = -CurrAutoIndex * 202;
jQuery("#aOne").animate({ "marginTop": liveLeft }, 300);
jQuery(".buttomMen div").css("opacity", 0.5);
jQuery(".buttomMen div:eq("+CurrAutoIndex+")").css("opacity", 1);
CurrAutoIndex=CurrAutoIndex+1;
}
// ]]>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: