贵美网站项目总结9.24

最新推荐文章于 2020-09-25 13:44:05 发布

归-途

最新推荐文章于 2020-09-25 13:44:05 发布

阅读量119

点赞数 1

文章标签： html

本文链接：https://blog.csdn.net/w1824575989/article/details/108771643

版权

该项目运用HTML、CSS和JavaScript技术构建网页，并实现了轮播图、当前时间动态显示等功能。轮播图通过计时器和事件监听实现图片切换，时间显示使用JavaScript获取并展示实时日期和时间。CSS用于美化页面样式，页面元素通过a链接和iframe进行组织。项目难点在于轮播图和精灵图的实现，通过自学和请教解决了问题。

摘要由CSDN通过智能技术生成

贵美网站项目总结。
项目运用HTML，css，JS，等技术，
构建页面以及实现功能。
通过对css样式的设置，让页面呈现
自己想要的样式。
页面之间通过a链接进行关联。
头部和底部通过iframe标签组合。
项目难点:
轮播图，当前时间显示，精灵图。
解决方式:
通过网上查找资料向老师请教。

轮播图：

var count=1;
           var time;
           function changeimg(){
           document.getElementById("pic").src="img/"+"ad-0"+count+".jpg";
           var lis=document.getElementsByClassName("lbt");
           for (var i=0;i<lis.length;i++) {
               if (count==(i+1)) {
                   lis[i].style.backgroundColor="green";
                   }else{
               lis[i].style.backgroundColor="black";
           }
           }
           count++;
               if (count>4) {
                   count=1;
                   }

               time=setTimeout("changeimg()",3000);
               }
       function stopChange(index){
           var lis=document.getElementsByClassName("lbt");
               for (var i=0;i<lis.length;i++) {
               if (i==index) {
                   lis[i].style.backgroundColor="green";
                   document.getElementById("pic").src="img/"+"ad-0"+(parseInt(index)+1)+".jpg";
                   count=parseInt(index)+1;

                   clearTimeout(time);
                   }else{
               lis[i].style.backgroundColor="black";
           }
           }

               }

当前时间显示：
  <script type="text/javascript">
           function showTime() {
               now = new Date;
               document.write(now.getFullYear() + "年" + (now.getMonth() + 1) + "月" + now.getDate() + "日" + now.getHours() + "点" + now.getMinutes() + "分");
           }
       </script>

精灵图：

background:url('img_navsprites.gif') 0px 0px;