前台辅助jsp bannerPPT.html-优快云博客

本文链接：https://blog.youkuaiyun.com/chaoyv/article/details/88302935

<!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>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>JS幻灯片</title>
    <link rel="stylesheet" type="text/css" href="bannerPPT/bannerPPT.css" />
    <script src="bannerPPT/bannerPPT.js" type="text/javascript"></script>
    <base target="_self" />
</head>
<body>
<div id="slideContainer">
	<div id="frameHlicAe">
    	<ul id="slidesImgs">
        	<li><a><img src="bannerPPT/img01.jpg" width="771" height="245" /></a></li>
            <li><a><img src="bannerPPT/img02.jpg" width="771" height="245" /></a></li>
            <li><a><img src="bannerPPT/img03.jpg" width="771" height="245" /></a></li>
            <li><a><img src="bannerPPT/img04.jpg" width="771" height="245" /></a></li>
            <li><a><img src="bannerPPT/img05.jpg" width="771" height="245" /></a></li>
            <li><a><img src="bannerPPT/img06.jpg" width="771" height="245" /></a></li>
            <li><a><img src="bannerPPT/img07.jpg" width="771" height="245" /></a></li>
            <li><a><img src="bannerPPT/img08.jpg" width="771" height="245" /></a></li>
        </ul>
        <div id="slideBar">
            <ul>
                <li class="on">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
            </ul>
    	</div>
    </div>
</div>
<script type="text/javascript">
    SlideShow(1000);
</script>
</body>
</html>

/* CSS Document */

/*公共样式*/
*{ margin:0; padding:0; word-break:break-all;}
body{ font-family:"宋体"; color:#666; font-size:12px; background:#fff;}
a{ color:#666; text-decoration:none;}
a:hover{ color:#666; text-decoration:none;}
a img{ border:none;}
.f_l{ float:left;}
.f_r{ float:right;}
span{ display:block;}
i{ font-style:normal;}
em{ font-style:normal;}
ul li{ list-style-type:none;}
.c{ clear:both;}

/*控制页面*/
#slideContainer{ width:771px; height:245px; overflow:hidden; position:relative;}
#slideBar { position: absolute; bottom: 18px; right: 20px; width:168px; height:20px;}
#slideBar li { background:#737373; width:20px; height:20px; float:left; text-align:center; line-height:20px; margin-right:1px; color: #FFF; overflow: hidden; }
#slideBar li.on { background:#f60; color: #fff; font-weight: 700; }

function SlideShow(c) {
    var a = document.getElementById("slideContainer"), f = document.getElementById("slidesImgs").getElementsByTagName("li"), h = document.getElementById("slideBar"), n = h.getElementsByTagName("li"), d = f.length, c = c || 3000, e = lastI = 0, j, m;
    function b() {
        m = setInterval(function () {
            e = e + 1 >= d ? e + 1 - d : e + 1;
            g()
        }, c)
    }
    function k() {
        clearInterval(m)
    }
    function g() {
        f[lastI].style.display = "none";
        n[lastI].className = "";
        f[e].style.display = "block";
        n[e].className = "on";
        lastI = e
    }
    f[e].style.display = "block";
    a.onmouseover = k;
    a.onmouseout = b;
    h.onmouseover = function (i) {
        j = i ? i.target : window.event.srcElement;
        if (j.nodeName === "LI") {
            e = parseInt(j.innerHTML, 10) - 1;
            g()
        }
    };
    b()
};

效果图：