上士
<!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=gbk" />
<title>jquery焦点图特效by 25175</title>
<link href="http://img.51udf.com/ui/favicon.ico" rel="shortcut icon">
<link type="text/css" rel="stylesheet" href="scroll-commom_files/common.css">
<script type="text/javascript" src="scroll-commom_files/jquery.js"></script>
</head>
<body>
<h2><a href="http://www.25175.com/" tittle="jquery插件">25175</a></h2>
<h1>jQuery焦点图</h1>
<style type="text/css">
.demo{ width:640px; height:200px; position:relative; overflow:hidden; border:#ddd 1px solid;padding:5px;}
.num{ position:absolute;right:10px; top:10px; z-index:10;}
.num a{ width:16px; height:16px; display:inline-block; text-align:center; margin:0 3px; cursor:pointer;}
.num a.cur{ background:#ff6700;color:#fff;}
.demo ul{ position:relative; z-index:5;}
.demo ul li{ position:absolute; display:none;}
</style>
<div class="demo">
<div class="num"><a class="cur">1</a><a>2</a><a>3</a></div>
<ul>
<li style="display:block;"><a href="http://www.25175.com/" target="_blank">
<img src="scroll-commom_files/ipad.png"></a></li>
<li><a href="http://www.25175.com/" target="_blank"><img src="scroll-commom_files/html5.jpg"></a></li>
<li><a href="http://www.25175.com/" target="_blank"><img src="scroll-commom_files/css.jpg"></a></li>
</ul>
</div>
<script type="text/javascript">
$(function(){
var sw = 0;
$(".demo .num a").mouseover(function(){
sw = $(".num a").index(this);
myShow(sw);
});
function myShow(i){
$(".demo .num a").eq(i).addClass("cur").siblings("a").removeClass("cur");
$(".demo ul li").eq(i).stop(true,true).fadeIn(600).siblings("li").fadeOut(600);
}
//滑入停止动画，滑出开始动画
$(".demo").hover(function(){
if(myTime){
clearInterval(myTime);
}
},function(){
myTime = setInterval(function(){
myShow(sw)
sw++;
if(sw==3){sw=0;}
} , 3000);
});
//自动开始
var myTime = setInterval(function(){
myShow(sw)
sw++;
if(sw==3){sw=0;}
} , 3000);
})
</script>
<a href="http://www.25175.com/" tittle="jquery插件">25175</a>
</body></html>
|
|
Jquery焦点图特效
分享到：
 购买记录   其他最新源码
           
|
新兵