实现javascript小相册

最新推荐文章于 2020-08-31 17:27:39 发布

绮羅

最新推荐文章于 2020-08-31 17:27:39 发布

阅读量426

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ruoyuanyi/article/details/8630001

本文介绍了一种使用HTML、CSS和JavaScript实现的轮播图效果，包括图片自动切换及手动选择功能。当鼠标悬停在图片上时，轮播会暂停；移开鼠标后继续播放。用户还可以通过点击下方的小图标来选择查看特定图片。

<html>
<head>
<meta charset="utf-8"/>
<style type="text/css">
*{margin:0;padding:0;border:0}
#main{width:450px;height:400px;background-color:green;margin:auto}
#head{height:350px;background-color:blue}
#head img{width:440px;height:350px;padding-left:5px;padding-right:5px}
#cont li{float:left;list-style:none;width:35px;height:30px;text-align:center;line-height:30px;margin-right:5px;border:1px solid orange}
#cont ul{width:360px;margin:auto;margin-top:5px}
</style>
<script>
  //先定义一个计数器，统计图片
  var count = 1;
  //周期函数的返回值
  var interval = '';
  function changePic(){
   var myimg = document.getElementById("show");
   if(count == 8){
    count = 0;
   }
   var k = ++count;
   myimg.src = k+".jpg";
   //图片修改后，序号背景色也要发生变化
   //先将所有的序号颜色恢复
   for(var i=1;i<=8;i++){
    document.getElementById("num"+i).style.backgroundColor = '';
   }
   //将当前序号设置背景色
   document.getElementById("num"+k).style.backgroundColor = "yellow";
  }

//间歇性函数实现图片周期变换
function start_chan(){

   interval = setInterval("changePic()",1000);
  }
  //停止周期函数
  function stop_chan(){
   clearInterval(interval);
  }
  function choosePic(n){
   stop_chan();
   document.getElementById("show").src = n+".jpg";
   for(var i=1;i<=8;i++){
    document.getElementById("num"+i).style.backgroundColor = '';
   }
   document.getElementById("num"+n).style.backgroundColor = "yellow";
   count = n;
  }
</script>
</head>