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

css:

 1 .d1 {           /*大的div样式*/
 2     width: 443px;
 3     height: auto;
 4     overflow: hidden;
 5     border: #666666 2px solid;
 6     background-color: #000000;
 7     position: relative;
 8     margin:auto auto;
 9 }
10 
11 .loading {
12     width: 443px;
13     border: #666666 2px solid;
14     background-color: #000000;
15     color: #FFCC00;
16     font-size: 12px;
17     height: 179px;
18     text-align: center;
19     padding-top: 30px;
20     font-family: Verdana, Arial, Helvetica, sans-serif;
21     font-weight: bold;
22 }
23 
24 .d2 {       /*放文字和序号的div样式*/
25     width: 100%;
26     height: 209px;
27     overflow: hidden;
28 }
29 
30 .num_list {     /*放文字的div样式*/
31     position: absolute;
32     width: 100%;
33     left: 0px;
34     bottom: -1px;
35     background-color: #000000;
36     color: #FFFFFF;
37     font-size: 12px;
38     padding: 4px 0px;
39     height: 20px;
40     overflow: hidden;
41 }
42 
43 .num_list span {
44     display: inline-block;
45     height: 16px;
46     padding-left: 6px;
47 }
48 
49 img {
50     border: 0px;
51 }
52 
53 ul {
54     display: none;
55 }
56 
57 .button {
58     position: absolute;
59     z-index: 1000;
60     right: 0px;
61     bottom: 2px;
62     font-size: 13px;
63     font-weight: bold;
64     font-family: Arial, Helvetica, sans-serif;
65 }
66 
67 .b1,.b2 {
68     background-color: #666666;
69     display: block;
70     float: left;
71     padding: 2px 6px;
72     margin-right: 3px;
73     color: #FFFFFF;
74     text-decoration: none;
75     cursor: pointer;
76     border-radius: 50%;
77 }
78 
79 .b2 {
80     color: #FFCC33;
81     background-color: #FF6633;
82 }

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:

<!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>图片轮播切换</title>

<link rel="stylesheet" type="text/css" href="css/style.css">
 <script type="text/javascript" src="./js/changePhoto.js"></script>

</head>

<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>
</html> 

 

 

转载于:https://www.cnblogs.com/ayayi-666/p/9387550.html