首页 1 2 3 4 5 6 7

javascript 幻灯片代码

Javascript幻灯片是网页制作中常用的一种技术，它可以使网页更加生动有趣，吸引用户的眼球。今天我们就来一起学习一下Javascript幻灯片的代码。首先我们需要清楚的了解一个幻灯片的组成部分，一般包括一个容器div，多个图片img和一个导航栏div。我们可以通过设置容器的样式来控制幻灯片的大小和位置，通过设置图片的样式来控制图片的位置和大小，通过设置导航栏的样式来控制导航栏的位置和样式。下面是一个简单的代码示例：

<!DOCTYPE html>
<html>
<head>
<style>
#container{
width:800px;
height:500px;
margin:0 auto;
position:relative;
}
#pic{
width:800px;
height:500px;
position:absolute;
}
#nav{
width:800px;
height:50px;
position:absolute;
bottom:0;
}
</style>
</head>
<body>
<div id="container">
<div id="pic">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
<div id="nav">
<span></span>
<span></span>
<span></span>
</div>
</div>
</body>
</html>

在上面的代码中，我们设置了一个宽度为800px，高度为500px的容器div，并设置了相对定位。然后在容器div中，我们添加了一个宽度和高度与容器相同的图片div，同时设置了绝对定位。我们在图片div中添加了三个图片，分别为img1.jpg、img2.jpg和img3.jpg。我们还添加了一个宽度为800px，高度为50px，位于容器div底部的导航栏div，同时在导航栏div中添加了三个空白span标签。下面我们就来编写Javascript代码来实现幻灯片的滚动效果。我们通过Javascript来控制图片的切换和导航栏的激活状态。具体代码如下：

<!DOCTYPE html>
<html>
<head>
<style>
#container{
width:800px;
height:500px;
margin:0 auto;
position:relative;
}
#pic{
width:800px;
height:500px;
position:absolute;
}
#nav{
width:800px;
height:50px;
position:absolute;
bottom:0;
}
#nav span{
display:inline-block;
width:20px;
height:20px;
margin-right:10px;
background-color:#EEE;
border-radius:50%;
cursor:pointer;
}
#nav span.active{
background-color:#F00;
}
</style>
</head>
<body>
<div id="container">
<div id="pic">
<img src="img1.jpg" />
<img src="img2.jpg" />
<img src="img3.jpg" />
</div>
<div id="nav">
<span class="active"></span>
<span></span>
<span></span>
</div>
</div>
<script>
var index = 0;//当前图片的索引
var timer;//定时器
//1、自动轮播
function autoPlay(){
timer = setInterval(function(){
index++;
if(index>2){
index = 0;
}
changePic(index);
},3000);
}
autoPlay();
//2、切换图片和导航栏
function changePic(index){
//2.1 切换图片
var pic = document.getElementById("pic");
var left = -index * 800;
pic.style.left = left + "px";
//2.2 切换导航栏
var nav = document.getElementById("nav");
var spans = nav.getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].className = "";
}
spans[index].className = "active";
}
//3、鼠标悬停和离开
var container = document.getElementById("container");
container.onmouseover = function(){
clearInterval(timer);
}
container.onmouseout = function(){
autoPlay();
}
//4、点击导航栏
var spans = document.getElementById("nav").getElementsByTagName("span");
for(var i=0;i<spans.length;i++){
spans[i].index = i;//缓存当前span的索引值
spans[i].onclick = function(){
index = this.index;
changePic(index);
}
}
</script>
</body>
</html>

在上面的代码中，我们通过Javascript编写了四个函数，分别为autoPlay、changePic、onmouseover和onmouseout。autoPlay函数用于控制幻灯片的自动轮播，changePic函数用于控制图片的切换和导航栏的激活状态，onmouseover和onmouseout用于鼠标悬停和离开事件的控制。我们还在导航栏span标签中添加了一个index属性，用于缓存当前span的索引值，这样在点击导航栏时就可以直接使用该属性来获取对应的索引值。综上所述，Javascript幻灯片的代码实现并不复杂，只需要掌握好组成部分和所需函数即可。通过举一反三，我们还可以根据需求来添加一些其他的效果，比如过渡效果、缩放效果等。愿大家在学习中能有所收获！