js练习----图片轮播切换

发布时间：2023-09-06 02:06责任编辑：顾先生关键词：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代码：

js练习----图片轮播切换

原文地址：https://www.cnblogs.com/ayayi-666/p/9387550.html

js练习----图片轮播切换

知识推荐