图片幻灯 - 琴韵之弦

HTML:

 1 <asp:Panel ID="pnl_imageScrolling" runat="server">
 2     <div id="imageScroll">
 3 
 4     </div>
 5     <div id="fade_focus">
 6         <ul style="visibility:hidden">
 7             <li style="display: block" title="title1">
 8                 <a href="javascript:;">
 9                     <img src="/DrChina/Scrolling%20Pictrure/38dbb6fd5266d0168af5f321952bd40734fa35ce.jpg" width="443" height="209" />
10                 </a>
11             </li>
12             <li title="title2">
13                 <a href="javascript:;">
14                     <img src="/DrChina/Scrolling%20Pictrure/d058ccbf6c81800ae4131010b33533fa828b473e.jpg" width="443" height="209" />
15                 </a>
16             </li>
17             <li title="title3">
18                 <a href="javascript:;">
19                     <img src="/DrChina/Scrolling%20Pictrure/sunset.jpg" width="443" height="209" />
20                 </a>
21             </li>
22         </ul>
23     </div>
24 </asp:Panel>

jQuery and JS:

<script type="text/javascript">
    $(document).ready(function () {
        InitTag("fade_focus");
    });

    function InitTag(source) {
        var interv = 2000; 
        var interv2 = 10; 
        var opac1 = 80; 
        
        //get the obj
        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);
        var imgScrollId = getid("imageScroll"); 
      
        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");
        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) - 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";
        title.appendChild(span);
        alpha(title, opac1);
        id.className = "d1";
        imgScrollId.className = "d1"; 
        div.className = "d2";

        imgScrollId.appendChild(div);
        imgScrollId.appendChild(title);
        imgScrollId.appendChild(button);
        //渐显
        var fadeon = function () {
            opac += 5;
            div.innerHTML = li[j].innerHTML;
            span.innerHTML = getTag("img", li[j])[0].alt;
            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();
    }
</script>

View Code

CSS:

 1 <style type="text/css">
 2     img {
 3         border: 0px;
 4     }
 5 
 6     .d1 {
 7         width: 443px;
 8         height: auto;
 9         overflow: hidden;
10         /*border: #666666 2px solid;*/
11         /*background-color: #000000;*/
12         position: relative;
13     }
14 
15     .d2 {
16         width: 100%;
17         height: 209px;
18         overflow: hidden;
19     }
20 
21     .num_list {
22         position: absolute;
23         width: 100%;
24         left: 0px;
25         bottom: -1px;
26         /*background-color: #000000;*/
27         color: #FFFFFF;
28         font-size: 12px;
29         padding: 4px 0px;
30         height: 20px;
31         overflow: hidden;
32     }
33 
34         .num_list span {
35             display: inline-block;
36             height: 16px;
37             padding-left: 6px;
38         }
39 
40     .button {
41         position: absolute;
42         z-index: 1000;
43         right: 0px;
44         bottom: 2px;
45         font-size: 13px;
46         font-weight: bold;
47         font-family: Arial, Helvetica, sans-serif;
48     }
49 
50     .b1, .b2 {
51         background-color: #666666;
52         display: block;
53         float: left;
54         padding: 2px 6px;
55         margin-right: 3px;
56         color: #FFFFFF;
57         text-decoration: none;
58         cursor: pointer;
59     }
60 
61     .b2 {
62         color: #FFCC33;
63         background-color: #FF6633;
64     }
65 
66 </style>

View Code

如果在SharePoint中开发，插入Script Web Part，并将以上代码写入

posted on 2014-12-15 16:09 琴韵之弦阅读(156) 评论(0) 收藏举报