js练习----图片轮播切换
Posted ayayi-666
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js练习----图片轮播切换相关的知识，希望对你有一定的参考价值。
css代码：
.d1 { /*大的div样式*/
width: 443px;
height: auto;
overflow: hidden;
border: #666666 2px solid;
background-color: #000000;
position: relative;
margin:auto auto;
}
.loading {
width: 443px;
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 { /*放文字和序号的div样式*/
width: 100%;
height: 209px;
overflow: hidden;
}
.num_list { /*放文字的div样式*/
position: absolute;
width: 100%;
left: 0px;
bottom: -1px;
background-color: #000000;
color: #FFFFFF;
font-size: 12px;
padding: 4px 0px;
height: 20px;
overflow: hidden;
}
.num_list span {
display: inline-block;
height: 16px;
padding-left: 6px;
}
img {
border: 0px;
}
ul {
display: none;
}
.button {
position: absolute;
z-index: 1000;
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;
border-radius: 50%;
}
.b2 {
color: #FFCC33;
background-color: #FF6633;
}
js代码：
var s = function() {
var interv = 2000; //切换间隔时间
var interv2 = 20; //切换速速
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, scton = 0,
timer, timer2, timer3;
var id = getid(source); //获取id为fade_focus的容器
id.removeChild(getTag("div", id)[0]);
var li = getTag("li", id); //获取fade_focus里的li即放置图片
var div = document.createElement("div"); //创建一个div元素
var title = document.createElement("div"); //创建一个div元素
var span = document.createElement("span"); //创建一个span元素
var button = document.createElement("div"); //创建一个div元素放序号
button.className = "button"; //给放序号的div给定样式.button
for (var i = 0; i < li.length; i++) {
var a = document.createElement("a"); //创建一个a标签
a.innerhtml = i + 1;
a.onclick = function() {
clearTimeout(timer); //清除timer定时器
clearTimeout(timer2); //清除timer2定时器
clearTimeout(timer3); //清除timer3定时器
j = parseInt(this.innerHTML) - 1;
scton = 0;
t = 63;
opac = 0;
fadeon();
};
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"; //设置显示第几张的div样式
title.appendChild(span); //加一个span标签
alpha(title, opac1);
id.className = "d1";
div.className = "d2";
id.appendChild(div);
id.appendChild(title);
id.appendChild(button);
//渐显
var fadeon = function() {
opac += 5;
div.innerHTML = li[j].innerHTML; //切换图片
span.innerHTML = getTag("img", li[j])[0].alt; //span里的内容
alpha(div, opac); //设置透明度
if (scton == 0) {
sc(j);
num = -2;
scrolltxt();
scton = 1
};
if (opac < 100) {
timer = setTimeout(fadeon, interv2)
} else {
timer2 = setTimeout(fadeout, interv);
};
}
//渐隐
var fadeout = function() {
opac -= 5;
div.innerHTML = li[j].innerHTML;
alpha(div, opac);
if (scton == 0) {
num = 2;
scrolltxt();
scton = 1
};
if (opac > 0) {
timer = setTimeout(fadeout, interv2)
} else {
if (j < li.length - 1) {
j++
} else {
j = 0
};
fadeon()
};
}
//滚动文字
var scrolltxt = function() {
t += num;
span.style.marginTop = t + "px";
if (num < 0 && t > 3) {
timer3 = setTimeout(scrolltxt, interv2)
} else if (num > 0 && t < 62) {
timer3 = setTimeout(scrolltxt, interv2)
} else {
scton = 0
}
};
fadeon();
}
//初始化
window.onload = s;
html代码：
<body>
<div id="fade_focus">
<div class="loading"></div>
<ul>
<li>
<img src="./img/1.jpg" width="443" height="209" alt="图片焦点切换第一张文字" /> </li>
<li>
<img src="./img/2.jpg" width="443" height="209" alt="图片焦点切换第二张文字" /> </li>
<li>
<img src="./img/3.jpg" width="443" height="209" alt="图片焦点切换第三张文字" /> </li>
<li>
<img src="./img/4.jpg" width="443" height="209" alt="图片焦点切换第四张文字" /> </li>
<li>
<img src="./img/5.jpg" width="443" height="209" alt="图片焦点切换第四张文字" /> </li>
</ul>
</div>
</body>
以上是关于js练习----图片轮播切换的主要内容，如果未能解决你的问题，请参考以下文章