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) { 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() };
- 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
