轮播图_u盘轮播图-CSDN博客

原地址为 http://blog.csdn.net/hxy07075032/article/details/43967091

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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta name="Copyright" content="" />
<title>带标题简单实用的网站首页js多图幻灯轮播代码</title>
    <link href="css/slideshow.css" rel="stylesheet" />
    <script src="js/slideshow.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div class="comiis_wrapad" id="slideContainer">
        <div id="frameHlicAe" class="frame cl">
            <div class="temp"></div>
            <div class="block">
                <div class="cl">
                    <ul class="slideshow" id="slidesImgs">
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/1.jpg" width="960" height="230" alt="" /></a><span class="title">第1张图的描述信息</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/2.jpg" width="960" height="230" alt="" /></a><span class="title">第2张图酷站代码网</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/3.jpg" width="960" height="230" alt="" /></a><span class="title">第3张图的描述信息</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/4.jpg" width="960" height="230" alt="" /></a><span class="title">第4张图的描述信息</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/5.jpg" width="960" height="230" alt="" /></a><span class="title">第5张图的描述信息</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/6.jpg" width="960" height="230" alt="" /></a><span class="title">第6张图的描述信息</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/7.jpg" width="960" height="230" alt="" /></a><span class="title">第7张图网页特效大全</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/8.jpg" width="960" height="230" alt="" /></a><span class="title">第8张图的描述信息</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/9.jpg" width="960" height="230" alt="" /></a><span class="title">第9张图的描述信息</span></li>
                        <li><a href="http://www.5icool.org/" target="_blank">
                            <img src="images/10.jpg" width="960" height="230" alt="" /></a><span class="title">第10张图的描述信息</span></li>
                    </ul>
                </div>
                <div class="slidebar" 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>
                        <li>9</li>
                        <li>10</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <script type="text/javascript">
        SlideShow(3000);
    </script>
    <!-- 代码 结束 -->
<div align="center" style="clear:both;font-size:12px;color:#666;" id="foot_bm"><a href="http://www.5icool.org/a/201306/945.html" target="_blank"><strong>带标题简单实用的网站首页js多图幻灯轮播代码</strong></a>  <a href="http://www.5icool.org/a/201306/945.html" target="_blank">[源码下载][使用帮助]</a></div>

</body>
</html>
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

CSS代码

* { word-wrap: break-word; }
body { font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun'; color: #444; }
body, ul, li { margin: 0; padding: 0; }
    ul li { list-style: none; }
a { color: #000; text-decoration: none; }
    a:hover { text-decoration: underline; }
    a img { border: none; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }

.frame { margin-bottom: 10px; border: 1px solid #e1e1e1; background: #FFF; }
.title { padding: 0 10px; height: 32px; font-size: 14px; font-weight: 700; line-height: 32px; overflow: hidden; }

.block { margin: 10px 10px 0; }

.temp { margin: 1px; }

.slideshow { clear: both; }
    .slideshow li { position: relative; overflow: hidden; }
    .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 32px; font-size: 14px; text-indent: 10px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); color: #FFF; overflow: hidden; }
.slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; }
    .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF); color: #000; font-weight: 700; }


ul, li { list-style: none; }
a:hover { text-decoration: underline; color: #a50001; }

.frame { background: none; border: 0px solid #fff; margin-bottom: 0px; }
.temp { margin: 0; }
.slidebar { position: absolute; top: 5px; left: 4px; }
    .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #FFF; overflow: hidden; }
        .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #ff0; font-weight: 700; }

.slideshow SPAN.title { text-indent: 0px; }
.block { margin: 0;position: relative; }
#frameHlicAe { margin: 0px !important; border: 0px !important; }
.comiis_wrap960, .comiis_wrapad { margin: 0 auto; width: 960px; }
.comiis_wrapad { margin-top: 10px; }
.comiis_wrapad { overflow: hidden; }
    .comiis_wrapad img { float: left; margin-top: 0px; }

#slidesImgs li { width: 960px; height: 230px; display: none; }
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

js代码

function SlideShow(c) {
    // a 整个轮播  f 图片列表 h数字区域 n数字列表 d 图片数量 c 时间间隔  e 定义最后元素 0  j m 未定义
    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;

        //b函数 设置播放 e为0+1 大于总数量 e+1-总数量 否则 e+1; 时间 用户设置
    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  //把e的值给lastI
    }


    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() //调用自动播放函数
}
;
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
   
   1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48