(写在文前的只言片语、意书情殇)长歌破晓穿云过,响彻碧霄振九天.------Jason Zhang
web开发已现世多年,技术成熟且学习平台广泛,笔者针对其中细节从本质上进行解释.力求透彻.
左右.gif
html部分
<div id="fade_focus">
<div class="loading">Loading...<br /></div>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
css部分
.d1 {
width: 444px;
height: auto;
overflow: hidden;
border: #666666 2px solid;
background-color: #000000;
position: relative;
}
.left {
width: 222px;
height: 209px;
overflow: hidden;
position: absolute;
z-index: 500;
top: 0px;
left: -222px;
}
.right {
width: 222px;
height: 209px;
overflow: hidden;
position: absolute;
z-index: 503;
background-position: right top;
background-repeat: no-repeat;
right: -222px;
top: 0px;
}
.loading {
width: 444px;
border: #666666 2px solid;
background-color: #000000;
color: #FFCC00;
font-size: 12px;
height: 179px;
text-align: center;
padding-top: 30px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
.d2 {
width: 100%;
height: 209px;
overflow: hidden;
}
.num_list {
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
background-color: #000000;
color: #FFFFFF;
font-size: 12px;
padding: 4px 0px;
height: 20px;
overflow: hidden;
z-index: 1000;
}
.num_list span {
display: inline-block;
height: 16px;
padding-left: 6px;
}
img {
border: 0px;
}
ul {
display: none;
}
.button {
position: absolute;
z-index: 1003;
right: 0px;
bottom: 2px;
font-size: 13px;
font-weight: bold;
font-family: Arial, Helvetica, sans-serif;
}
.b1,
.b2 {
background-color: #666666;
display: block;
float: left;
padding: 2px 6px;
margin-right: 3px;
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
}
.b2 {
color: #FFCC33;
background-color: #FF6633;
}
JavaScript原生部分
var s = function() {
var interv = 2000; //切换时间
var interv2 = 10; //速速
var opac1 = 80; //文字背景透明度
var source = "fade_focus" //焦点轮换容器id
function getTag(tag, obj) {
if(obj == null) {
return document.getElementsByTagName(tag)
} else {
return obj.getElementsByTagName(tag)
}
}
function getid(id) {
return document.getElementById(id)
};
var opac = 0,
j = 0,
t = 63,
num = -2,
scton = 0,
timer, timer2, timer3;
var id = getid(source);
id.removeChild(getTag("div", id)[0]);
var li = getTag("li", id);
var div = document.createElement("div");
var title = document.createElement("div");
var span = document.createElement("span");
var button = document.createElement("div");
var left = document.createElement("div");
var right = document.createElement("div");
button.className = "button";
for(var i = 0; i < li.length; i++) {
var a = document.createElement("a");
a.innerHTML = i + 1;
a.onclick = function() {
clearTimeout(timer);
clearTimeout(timer2);
clearTimeout(timer3);
j = parseInt(this.innerHTML) - 2;
t = 63;
slide();
};
a.className = "b1";
a.onmouseover = function() {
this.className = "b2"
};
a.onmouseout = function() {
this.className = "b1";
sc(j)
};
button.appendChild(a);
}
//控制透明度
function alpha(obj, n) {
if(document.all) {
obj.style.filter = "alpha(opacity=" + n + ")";
} else {
obj.style.opacity = (n / 100);
}
}
//控制焦点按钮
function sc(n) {
for(var i = 0; i < li.length; i++) {
button.childNodes[i].className = "b1"
};
button.childNodes[n].className = "b2";
}
title.className = "num_list";
title.appendChild(span);
alpha(title, opac1);
id.className = "d1";
div.className = "d2";
left.className = "left";
right.className = "right";
id.appendChild(div);
id.appendChild(left);
id.appendChild(right);
id.appendChild(title);
id.appendChild(button);
//滑动图片
var slide = function() {
var im = -222;
var k = 21;
if(j < li.length - 1) {
j++
} else {
j = 0
};
change_dis(1);
sc(j);
left.style.backgroundImage = "url(" + getTag("img", li[j])[0].src + ")";
right.style.backgroundImage = "url(" + getTag("img", li[j])[0].src + ")";
function run() {
if(k > 1) {
k--
};
im += k;
if(im > 0) {
im = 0
};
left.style.left = String(im) + "px";
right.style.right = String(im) + "px";
if(im < 0) {
timer = setTimeout(run, interv2)
} else {
span.innerHTML = getTag("img", li[j])[0].alt;
scrolltxt();
change_dis();
timer2 = setTimeout(slide, interv)
}
}
run();
}
var change_dis = function(n) {
if(n > 0) {
left.style.display = "block";
right.style.display = "block";
} else {
left.style.display = "none";
right.style.display = "none";
div.innerHTML = li[j].innerHTML;
}
}
var scrolltxt = function() {
t += num;
span.style.marginTop = t + "px";
if(num < 0 && t > 3) {
timer3 = setTimeout(scrolltxt, interv2)
} else {
t = 63
}
};
slide();
}
//初始化
window.onload = s;
笔没墨了!!!
预知详情,请关注下集!!!!!
