java图片切换 特效_图片切换展示效果

本文介绍了一种使用jQuery创建的Java图片切换特效。通过CSS定义图片容器样式,JavaScript处理图片切换事件,实现了平滑的滚动效果。当鼠标悬停在图片展示区域时,自动切换暂停,移开后继续自动播放,每4秒切换一次。同时,显示数字导航点,用户可以手动选择图片。
摘要由CSDN通过智能技术生成
图片切换展示效果

.scroll{width:408px;height:168px;overflow:hidden;position:relative;border:#ccc 1px solid;}

.slider{position:absolute;}

.slider img{width:408px;height:168px;display:block;}

.num{position:absolute;right:5px;bottom:5px;}

.num li{float:left;color:#FF7300;text-align:center;line-height:16px;width:16px;height:16px;font-family:Arial;font-size:12px;cursor:pointer;overflow:hidden;margin:3px 1px;border:1px solid #FF7300;background-color:#fff;}

.num li.on{color:#fff;line-height:21px;width:21px;height:21px;font-size:16px;margin:0 1px;border:0;background-color:#FF7300;font-weight:bold;}

$(function(){

var len = $("#idNum > li").length;

var index = 0;

$("#idNum li").mouseover(function(){

index =   $("#idNum li").index(this);

showImg(index);

});

$('#idTransformView').hover(function(){

if(MyTime){

clearInterval(MyTime);

}

},function(){

MyTime = setInterval(function(){

showImg(index)

index++;

if(index==len){index=0;}

} , 4000);

});

var MyTime = setInterval(function(){

showImg(index)

index++;

if(index==len){index=0;}

} , 4000);

})

function showImg(i){

$("#idSlider").stop(true,false).animate({top : -168*i},800);

$("#idNum li")

.eq(i).addClass("on")

.siblings().removeClass("on");

}

  • d5b443463ea071c3460ee7b3f6e56030.gif
  • a95208564445495064d5a6cd3870702d.gif
  • 3c385f648e7a1aacc96d5526463aea04.gif
  • d5b443463ea071c3460ee7b3f6e56030.gif
  • a95208564445495064d5a6cd3870702d.gif
  • 1
  • 2
  • 3
  • 4
  • 5
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值