javascript幻灯片头图切换附（源代码）

最新推荐文章于 2024-07-08 10:04:44 发布

小光Hikaru

最新推荐文章于 2024-07-08 10:04:44 发布

阅读量462

点赞数 1

分类专栏：生活记载文章标签： javascript 网页设计 html

本文链接：https://blog.csdn.net/hikarusoul/article/details/44620999

版权

生活记载专栏收录该内容

5 篇文章 0 订阅

订阅专栏

源代码下载：javascript幻灯片头图切换

http://pan.baidu.com/s/1gdEMYcj

<!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>无标题文档</title>
<style>
body, div, ul, li {
	margin: 0px;
	padding: 0px;
}
#content {
	position: absolute;
	width: 400px;
	height: 250px;
	/*
	top:100px;
	left:200px;
	*/
}
#ul-picture {
	list-style: none;
}
#ul-picture li img {
	position: absolute;
	width: 400px;
	height: 250px;
}
#div-background {
	position: absolute;
	width: 400px;
	height: 50px;
	bottom: 0px;
	left: 0px;
	background: #000;
	z-index:8;
	filter:alpha(Opacity=80);
	-moz-opacity:0.5;
	opacity: 0.5;

}
#selectedItemList {
	list-style: none;
	position: absolute;
	left: 10px;
	bottom: 8px;
	z-index:10;
}
#selectedItemList li {
	float: left;
	display: inline-block;
	text-align: center;
	font-size:12px;
	color:#FFFFFF;
	line-height: 30px;
	width: 30px;
	height: 30px;
	margin: 0 10px;
	cursor: default;
	z-index:15;
	filter:alpha(Opacity=80);
	-moz-opacity:0.5;
	opacity: 0.8;
}
.selected {
	border: solid 1px #FFF;
	background: #808080;
	filter:alpha(Opacity=80);
	-moz-opacity:0.5;
	opacity: 0.8;
}
.unselected {
	border: solid 1px #FFF;
}
.hidden {
	visibility: hidden;
}
.show {
	visibility: visible;
}
</style>
<script type="text/javascript">
//版本1.3实现导航条上移动，并且透明
//获取图片数组
var showImgId = 0;
var img = null;
var imgLi = null;
var time = setInterval(play,2000);
function init()
{
	img = document.getElementById("ul-picture").getElementsByTagName("img");//获取图片数组
	addSelectItem();//添加下标li标签
	imgLi = document.getElementById("selectedItemList").getElementsByTagName("li");//获取下标数组
	play();//播放幻灯片
	document.getElementById("ul-picture").onmouseover = timeStop;//设置鼠标事件
	document.getElementById("ul-picture").onmouseout = timeStart;//设置鼠标移入
}

function play()
{
	if(showImgId == img.length)
	{
		showImgId = 0;
	}
	showImg(showImgId);
	showImgLi(showImgId);
	showImgId ++;
}
function showImgLi(id) {
	showImgId = id;
	for(var i=0;i<img.length;i++){
		if(i == showImgId){
			img.item(i).className="show";
		}else {
			img.item(i).className= "hidden";
		}
	}
	
}

function showImg(id){
	showImgId = id;
	for(var i=0;i<imgLi.length;i++){
		if(i == showImgId){
			imgLi.item(i).className="selected";
		}else {
			imgLi.item(i).className= "unselected";
		}
	}
}



function addSelectItem()
{
	var ulList = document.getElementById("selectedItemList");
	for(var i=0;i<img.length;i++)
	{
		var li = document.createElement("li");
		li.innerHTML = i+1;
		li.className = "unselected";
		//添加mouse事件
		li.setAttribute("onmouseover","ListShowImg("+i+");");
		li.setAttribute("onmouseout","timeStart();");
		ulList.appendChild(li);
	}
}

function ListShowImg(id){
	showImgId = id;
	showImg(showImgId);
	showImgLi(showImgId);
	showImgId++;
	timeStop();
}
function timeStop()
{
	clearInterval(time);
}

function timeStart()
{
	time = setInterval(play,2000);
}
</script>
</head>

<body οnlοad="init()">
<!--这边写上方法，不用加；-->
<div id="content">
  <ul id="ul-picture" >
    <li><img src="images/Blue hills.jpg" alt="bule hill"  class="hidden" /></li>
    <li><img src="images/Sunset.jpg" alt="sunset"  class="hidden" /></li>
    <li><img src="images/Water lilies.jpg" alt="wate lilier" class="hidden" /></li>
    <!-- <li><img src="images/Winter.jpg" alt="Winter" class="hidden" /></li> -->
  </ul>
  <div id="div-background"></div>
    <ul id="selectedItemList">
    </ul>
</div>
</body>
</html>

小光Hikaru

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript幻灯片头图切换附（源代码）

源代码下载：javascript幻灯片头图切换http://pan.baidu.com/s/1gdEMYcj无标题文档body, div, ul, li { margin: 0px; padding: 0px;}#content { position: absolute; width: 400px; height: 250px; /* top:100px; le
复制链接

扫一扫