原地址为 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