<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>图片切换案例</title>
<link href="css.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://mobile.yesky.com/fashion/js/jquery.min.js" ></script>
<script>
$(function(){
var oImgBox=$(".imgBox");
var num=$(".imgBox li").length;
var oPre=$(".pre");
var oNext=$(".next");
var iNow=0;
var timer=null;
oImgBox.width(num*980);
//上一个
oPre.click(function(){
if(iNow<=0){
iNow=num;
}else{
iNow--;
fnPic(iNow);
}
});
//下一个
oNext.click(function(){
if(iNow>=num-1){
iNow=0;
}else{
iNow++;
fnPic(iNow);
}
});
//鼠标悬停
$(".imgWrap").hover(function(){
if(timer){
clearInterval(timer);
}
},function(){
timer=setInterval(function(){
if(iNow>=num-1){
iNow=0;
}else{
iNow++;
}
fnPic(iNow);
},3000);
});
//自动切换的时间
timer=setInterval(function(){
if(iNow>=num-1){
iNow=0;
}else{
iNow++;
}
fnPic(iNow);
},3000);
//图片切换
function fnPic(num){
oImgBox.animate({left:-num*980},600);
}
})
</script>
</head>
<body>
<div class="wrap">
<div class="imgWrap">
<ul class="imgBox">
<li><img src="images/1.jpg"/></li>
<li><img src="images/2.jpg"/></li>
<li><img src="images/3.jpg"/></li>
<li><img src="images/4.jpg"/></li>
<li><img src="images/5.jpg"/></li>
</ul>
<a class="pre" href="javascript:;"></a>
<a class="next" href="javascript:;"></a>
</div>
</div>
</body>
</html>
时间： 2024-10-03 22:39:00