图片的动态效果

1. 建立CSS，代码

@charset "utf-8";

/* CSS Reset */

*{margin:0;padding:0;list-style-type:none;}

a,img{border:0;}

body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

/* tFocus */

#tFocus-btn li.active,#tFocus-leftbtn,#tFocus-rightbtn{display:block;background:url(img/spr.png) no-repeat;}

#tFocus{width:338px;height:323px;background:#DDD;overflow:hidden;margin:30px auto 0 auto;}

#tFocus-pic{width:338px;height:243px;position:relative;}

#tFocus-pic li{width:338px;height:243px;position:absolute;left:0;top:0;filter:alpha(opacity:0);opacity:0;}

#tFocusBtn{width:359px;height:68px;padding-left:5px;margin-top:5px;z-index:20;overflow:hidden;}

#tFocus-btn{width:289px;height:68px;position:relative;left:0;bottom:0;overflow:hidden;float:left;margin-right:3px;}

#tFocus-btn ul{width:100000px;position:absolute;left:0;top:0;}

#tFocus-btn li{height:57px;width:91px;padding-top:7px;display:block;float:left;margin-right:5px;}

#tFocus-btn li img{border:2px solid #dddddd}

#tFocus-btn li.active{background-position:-448px -100px;}

#tFocus-btn li.active img{border:2px solid #40b9e5}

#tFocus-leftbtn,#tFocus-rightbtn{height:40px;margin-top:18px;width:15px;float:left;text-indent:-9999px;}

#tFocus-leftbtn{margin-right:5px;background-position:-455px -60px;}

#tFocus-rightbtn{background-position:-480px -60px;}

2.在images放一组图片

3.建立JS的Script

/*图片切换*/

function addLoadEvent(func) {

var oldonload = window.onload;

if (typeof window.onload != 'function') {

} else {

window.onload = function() {

oldonload();

func();

}

}

}

function Focus() {

function byid(id) {

return document.getElementById(id);

}

function bytag(tag, obj) {

return (typeof obj == 'object' ? obj: byid(obj)).getElementsByTagName(tag);

}

var timer = null;

var oFocus = byid('tFocus');

var oPic = byid('tFocus-pic');

var oPicLis = bytag('li', oPic);

var oBtn = byid('tFocus-btn');

var oBtnLis = bytag('li', oBtn);

var iActive = 0;

function inlize() {

oPicLis[0].style.filter = 'alpha(opacity:100)';

oPicLis[0].style.opacity = 100;

oPicLis[0].style.zIndex = 5;

};

for (var i = 0; i < oPicLis.length; i++) {

oBtnLis[i].sIndex = i;

oBtnLis[i].onclick = function() {

if (this.sIndex == iActive) return;

iActive = this.sIndex;

changePic();

}

};

byid('tFocus-leftbtn').onclick = byid('prev').onclick = function() {

iActive--;

if (iActive == -1) {

iActive = oPicLis.length - 1;

}

changePic();

};

byid('tFocus-rightbtn').onclick = byid('next').onclick = function() {

iActive++;

if (iActive == oPicLis.length) {

iActive = 0;

}

changePic();

};

function changePic() {

for (var i = 0; i < oPicLis.length; i++) {

doMove(oPicLis[i], 'opacity', 0);

oPicLis[i].style.zIndex = 0;

oBtnLis[i].className = '';

};

doMove(oPicLis[iActive], 'opacity', 100);

oPicLis[iActive].style.zIndex = 5;

oBtnLis[iActive].className = 'active';

if (iActive == 0) {

doMove(bytag('ul', oBtn)[0], 'left', 0);

} else if (iActive >= oPicLis.length - 2) {

doMove(bytag('ul', oBtn)[0], 'left', -(oPicLis.length - 3) * (oBtnLis[0].offsetWidth + 4));

} else {

doMove(bytag('ul', oBtn)[0], 'left', -(iActive - 1) * (oBtnLis[0].offsetWidth + 4));

}

};

function autoplay() {

if (iActive >= oPicLis.length - 1) {

iActive = 0;

} else {

iActive++;

}

changePic();

};

aTimer = setInterval(autoplay, 2000);

inlize();

function getStyle(obj, attr) {

if (obj.currentStyle) {

return obj.currentStyle[attr];

} else {

return getComputedStyle(obj, false)[attr];

}

};

function doMove(obj, attr, iTarget) {

clearInterval(obj.timer);

obj.timer = setInterval(function() {

var iCur = 0;

if (attr == 'opacity') {

iCur = parseInt(parseFloat(getStyle(obj, attr)) * 100);

} else {

iCur = parseInt(getStyle(obj, attr));

}

var iSpeed = (iTarget - iCur) / 6;

iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);

if (iCur == iTarget) {

clearInterval(obj.timer);

} else {

if (attr == 'opacity') {

obj.style.filter = 'alpha(opacity:' + (iCur + iSpeed) + ')';

obj.style.opacity = (iCur + iSpeed) / 100;

} else {

obj.style[attr] = iCur + iSpeed + 'px';

}

}

},

30)

};

byid('tFocus').onmouseover = function() {

clearInterval(aTimer);

}

byid('tFocus').onmouseout = function() {

aTimer = setInterval(autoplay, 2000);

}

}

4.建立index.jsp页面

<!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=utf-8" />

<title>仿91手机和iphone频道焦点图特效</title>

<link href="css/style.css" rel="stylesheet" />

<script type="text/javascript" src="js/script.js"></script>

</head>

<body>

<div id="tFocus">

<div class="prev" id="prev"></div>

<div class="next" id="next"></div>

<ul id="tFocus-pic">

<li><a href="#"><img src="images/706-131119110625157.jpg" width="338" height="243" alt="iOS 7.1测试版发布 新界面和新功能可不少" /></a></li>

<li><a href="#"><img src="images/645-1311191056130-L.jpg" width="338" height="243" alt="iOS 7.1测试版发布 到底提升了哪些？  " /></a></li>

<li><a href="#"><img src="images/706-13111Q1234X03.jpg" width="338" height="243" alt="iH8sn0w：iOS 7完美越狱今年或无缘发布" /></a></li>

<li><a href="#"><img src="images/645-13111Q354530-L.jpg" width="338" height="243" alt="买5s纠结裸机合约机? 明白人帮你理头绪 " /></a></li>

<li><a href="#"><img src="images/706-13111Q359433J.jpg" width="338" height="243" alt="帅惨了！国外用户亲自设计概念iPhone 6" /></a></li>

<li><a href="#"><img src="images/645-13111Q136160-L.jpg" width="338" height="243" alt="美创业者用废弃的iPhone造家具和首饰  " /></a></li>

</ul>

<div id="tFocusBtn">

<a href="javascript:void(0);" id="tFocus-leftbtn">上一张</a>

<div id="tFocus-btn">

<ul>

<li class="active"><img src="images/706-131119110625157.jpg" width="87" height="57" alt="iOS 7.1测试版发布 新界面和新功能可不少" /></li>

<li><img src="images/645-1311191056130-L.jpg" width="87" height="57" alt="iOS 7.1测试版发布 到底提升了哪些？  " /></li>

<li><img src="images/706-13111Q1234X03.jpg" width="87" height="57" alt="iH8sn0w：iOS 7完美越狱今年或无缘发布" /></li>

<li><img src="images/645-13111Q354530-L.jpg" width="87" height="57" alt="买5s纠结裸机合约机? 明白人帮你理头绪 " /></li>

<li><img src="images/706-13111Q359433J.jpg" width="87" height="57" alt="帅惨了！国外用户亲自设计概念iPhone 6" /></li>

<li><img src="images/645-13111Q136160-L.jpg" width="87" height="57" alt="美创业者用废弃的iPhone造家具和首饰  " /></li>

</ul>

</div>

<a href="javascript:void(0);" id="tFocus-rightbtn">下一张</a>

</div>

</div><!--tFocus end-->

<script type="text/javascript">addLoadEvent(Focus());</script>

</body>

</html>

转载于:https://my.oschina.net/u/2411762/blog/484740