<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.box{width:760px;height:300px;margin:100px auto;position:relative;}
.pic{width:760px;height:300px;overflow:hidden;}
.pic ul li a{list-style-type:none;width:760px;height:300px;position:relative;overflow:hidden;}
.pic ul li .img1{position:absolute;left:-760px;top:0px;}
.pic ul li .img2{position:absolute;left:-15px;top:0px;display:none;}
.nav{width:100px;height:14px;position:absolute;bottom:10px;right:20px;}
.nav ul li{list-style-type:none;width:12px;height:12px;float:left;margin-right:5px;cursor:pointer;
border:1px solid #fff;}
.nav ul .bg{background:#ff7300;width:14px;height:14px;border:none;}
.box .prev{ background:#999;width:30px;height:100px;text-align:center;line-height:100px;position:absolute;top:50%;left:-30px;color:#000;font-size:24px; cursor:pointer;margin-top:-50px;}
.box .next{background:#999;width:30px;height:100px;text-align:center;line-height:100px; position:absolute;top:50%;right:-30px;color:#000;font-size:24px; cursor:pointer;margin-top:-50px;}
</style>
</head>
<body>
<div>
<a><</a>
<a>></a>
<div>
<ul>
<li>
<a href="#" style="background:url(images/bg1.jpg) center;display:block;">
<img src="images/text1.png" />
<img src="images/con1.png" />
</a>
</li>
<li>
<a href="#" style="background:url(images/bg2.jpg) center;display:block;">
<img src="images/text2.png" />
<img src="images/con2.png" />
</a>
</li>
<li>
<a href="#" style="background:url(images/bg3.jpg) center;display:block;">
<img src="images/text3.png" />
<img src="images/con3.png" />
</a>
</li>
<li>
<a href="#" style="background:url(images/bg4.jpg) center;display:block;">
<img src="images/text4.png" />
<img src="images/con4.png" />
</a>
</li>
<li >
<a href="#" style="background:url(images/bg5.jpg) center;display:block;">
<img src="images/text5.png" />
<img src="images/con5.png" />
</a>
</li>
</ul>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i = -1;
var time=0;
junmper();
function junmper(){
i++;
if(i>4)
i=0;
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
$(".pic ul li").eq(i).find(".img2").css({display:"none",left:"-15px"});
$(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
$(".pic ul li").eq(i).find(".img2").css("display","block");
$(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
});
}
$(".prev").click(function(){
if(i>0){
i--;
clearInterval(time);
}else{
i=4;
}
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
$(".pic ul li").eq(i).find(".img2").css({display:"none",left:"-15px"});
$(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
$(".pic ul li").eq(i).find(".img2").css("display","block");
$(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
});
},function(){
time=setInterval("junmper()",3700);
});
$(".next").click(function(){
junmper();
clearInterval(time);
},function(){
time=setInterval("junmper()",3700);
});
time=setInterval("junmper()",5000);
$(".nav ul li").click(function(){
i=$(this).index();
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
$(".pic ul li").eq(i).find(".img2").css({display:"none",left:"-15px"});
$(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
$(".pic ul li").eq(i).find(".img2").css("display","block");
$(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
});
})
$(".nav ul li").hover(function(){
clearInterval(time);
},function(){
time=setInterval("junmper()",3700);
})
</script>
</body>
</html>
在H5EDU学习就是好,源码多,老师讲解细致,都是有用的源码实战教学!
<html>
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
*{margin:0px;padding:0px;}
.box{width:760px;height:300px;margin:100px auto;position:relative;}
.pic{width:760px;height:300px;overflow:hidden;}
.pic ul li a{list-style-type:none;width:760px;height:300px;position:relative;overflow:hidden;}
.pic ul li .img1{position:absolute;left:-760px;top:0px;}
.pic ul li .img2{position:absolute;left:-15px;top:0px;display:none;}
.nav{width:100px;height:14px;position:absolute;bottom:10px;right:20px;}
.nav ul li{list-style-type:none;width:12px;height:12px;float:left;margin-right:5px;cursor:pointer;
border:1px solid #fff;}
.nav ul .bg{background:#ff7300;width:14px;height:14px;border:none;}
.box .prev{ background:#999;width:30px;height:100px;text-align:center;line-height:100px;position:absolute;top:50%;left:-30px;color:#000;font-size:24px; cursor:pointer;margin-top:-50px;}
.box .next{background:#999;width:30px;height:100px;text-align:center;line-height:100px; position:absolute;top:50%;right:-30px;color:#000;font-size:24px; cursor:pointer;margin-top:-50px;}
</style>
</head>
<body>
<div>
<a><</a>
<a>></a>
<div>
<ul>
<li>
<a href="#" style="background:url(images/bg1.jpg) center;display:block;">
<img src="images/text1.png" />
<img src="images/con1.png" />
</a>
</li>
<li>
<a href="#" style="background:url(images/bg2.jpg) center;display:block;">
<img src="images/text2.png" />
<img src="images/con2.png" />
</a>
</li>
<li>
<a href="#" style="background:url(images/bg3.jpg) center;display:block;">
<img src="images/text3.png" />
<img src="images/con3.png" />
</a>
</li>
<li>
<a href="#" style="background:url(images/bg4.jpg) center;display:block;">
<img src="images/text4.png" />
<img src="images/con4.png" />
</a>
</li>
<li >
<a href="#" style="background:url(images/bg5.jpg) center;display:block;">
<img src="images/text5.png" />
<img src="images/con5.png" />
</a>
</li>
</ul>
</div>
<div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
var i = -1;
var time=0;
junmper();
function junmper(){
i++;
if(i>4)
i=0;
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
$(".pic ul li").eq(i).find(".img2").css({display:"none",left:"-15px"});
$(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
$(".pic ul li").eq(i).find(".img2").css("display","block");
$(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
});
}
$(".prev").click(function(){
if(i>0){
i--;
clearInterval(time);
}else{
i=4;
}
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
$(".pic ul li").eq(i).find(".img2").css({display:"none",left:"-15px"});
$(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
$(".pic ul li").eq(i).find(".img2").css("display","block");
$(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
});
},function(){
time=setInterval("junmper()",3700);
});
$(".next").click(function(){
junmper();
clearInterval(time);
},function(){
time=setInterval("junmper()",3700);
});
time=setInterval("junmper()",5000);
$(".nav ul li").click(function(){
i=$(this).index();
$(".nav ul li").eq(i).addClass("bg").siblings().removeClass("bg");
$(".pic ul li").eq(i).fadeIn(100).siblings().fadeOut(100);
$(".pic ul li").eq(i).find(".img1").css({left:"-760px"});
$(".pic ul li").eq(i).find(".img2").css({display:"none",left:"-15px"});
$(".pic ul li").eq(i).find(".img1").animate({left:"0px"},500,function(){
$(".pic ul li").eq(i).find(".img2").css("display","block");
$(".pic ul li").eq(i).find(".img2").animate({left:"0px"},500);
});
})
$(".nav ul li").hover(function(){
clearInterval(time);
},function(){
time=setInterval("junmper()",3700);
})
</script>
</body>
</html>
在H5EDU学习就是好,源码多,老师讲解细致,都是有用的源码实战教学!