 |
热门文章 |
|
|
|
|
| 简单实用的焦点图特效 |
| 来源：壹聚教程 更新时间：2010/8/24 10:31:35 阅读次数： 我要投稿 |
|
<!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>
<title>焦点图广告js特效代码</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
</head>
<body>
<style type="text/css">
body{margin:0;padding:0;}
ul,li{list-style-type:none;margin:0;padding:0;}
#bigpic{width:400px;height:210px;overflow:hidden;position:relative;}
#bigpic li{float:left;}
#bigpic img{width:400px;height:210px;float:left;border:none;}
#btn{position:absolute;bottom:10px;right:10px;}
ul#sPic{position:absolute;}
#btn a.hover{color:#f00;}
#btn a{color:#fff;text-decoration:none;}
</style>
<div id="bigpic">
<ul id="sPic" style="width:1600px;left:0;top:0;">
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082410351534.jpg" /></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082410351526.jpg" /></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082410351523.jpg" /></a></li>
<li><a href="#"><img src="http://www.cwydesign.com/effects/UploadFiles_7074/201008/2010082410351562.jpg" /></a></li>
</ul>
<div id="btn">
<a href="###" class="hover" onclick="showPic(0)">1</a>
<a href="###" onclick="showPic(1)">2</a>
<a href="###" onclick="showPic(2)">3</a>
<a href="###" onclick="showPic(3)">4</a>
</div>
</div>
<script>
cNum = 0;
intAlphaStep=0.1;
var bPic = document.getElementById('bigpic');
var sPic = document.getElementById('sPic');
var btn = document.getElementById('btn');
var btnLink = btn.getElementsByTagName('a');
function showPic(num){
var endX = -(num*bPic.clientWidth);
curOpacity = 0;
function goimg(){
X = parseInt(sPic.style.left)
if(parseInt(sPic.style.left)==endX) return true;
if((endX-X)>0){
X += Math.ceil((endX - X) / 20 )
}else{
X += Math.floor((endX - X) / 20)
}
sPic.style.left = X + 'px';
setTimeout(goimg,5)
for(i=0;i<4;i++){
btnLink[i].className = '';
}
btnLink[num].className = 'hover';
}
goimg();
setOpacity();
}
function autoPic(){
curOpacity = 0;
if(cNum<3){
showPic(cNum+1);
cNum++;
}else if(cNum=3){cNum=-1;}
}
function setOpacity(){
curOpacity+=intAlphaStep;
sPic.style.filter='alpha(opacity='+(curOpacity*100)+')';
sPic.style.opacity = curOpacity;
if(curOpacity<0.9){
setTimeout('setOpacity()',100)
}
}
bPic.onmouseover = function(){
clearInterval(auto);
}
bPic.onmouseout = function(){
auto = setInterval(autoPic,2000);
}
auto = setInterval(autoPic,2000);
</script>
</body>
</html> |
|
| 上一篇文章： 可控制左右切换的幻灯片轮换-效果kakaFocus下一篇文章： CSS+JS滑动门式的图片轮番切换 |
|
|
|
注册 登录
