zoukankan      html  css  js  c++  java
  • 轮播图

     部分功能没有实现 只是让图片动起来了

    <style> *{ margin: 0; padding: 0; list-style: none; } img{ vertical-align: top; } #box{ 800px; height: 460px; border: 2px solid gainsboro ; margin: 100px auto ; overflow: hidden; position: relative; cursor: pointer; } ul{ 4000px; height: 100%; position: absolute; left: -800px; } ul li { float: left } span{ display: inline-block; 44px; height: 44px; border: 1px solid; border-radius: 100%; text-align: center; line-height: 44px; font-size: 30px; font-weight: bold; cursor: pointer; z-index: 1000; } #span1{ position: absolute; left: 580px; top: 320px; } #span2{ position: absolute; left: 1284px; top: 320px; } </style> <body> <div id="box"> <ul id="ul"> <li><img src="img/poster-1.jpg" alt="" /></li> <li><img src="img/poster-2.jpg" alt="" /></li> <li><img src="img/poster-3.jpg" alt="" /></li> <li><img src="img/poster-4.jpg" alt="" /></li> <li><img src="img/poster-5.jpg" alt="" /></li> </ul> </div> <span style="display: none;" id="span1" > < </span> <span style="display: none;" id="span2">></span> <script> window.onload=function(){ var ul=document.getElementById("ul"); var timer; index=0; var box=document.getElementById("box"); var span1=document.getElementById("span1"); var span2=document.getElementById("span2"); box.onmouseover=function(){ span1.style.display="block"; span2.style.display="block"; } box.onmouseout=function(){ span1.style.display="none"; span2.style.display="none"; } //启动定时器 timer=setInterval(run,1000); function run(){ ul.style.left=-(index*800)+"px"; index++; if(index>4){ index=0; } } } </script>

      

  • 相关阅读:
    在VMware中为Red Hat配置静态ip并可访问网络-Windows下的VMware
    03-nginx虚拟主机配置
    解决nginx: [emerg] bind() to [::]:80 failed (98: Address already in use)
    02-nginx信号量
    RedHat Linux设置yum软件源为本地ISO
    01-nginx介绍及编译安装
    Linux.负载均衡
    01-MySQL优化大的思路
    10 华电内部文档搜索系统 search02
    10 华电内部文档搜索系统 search03
  • 原文地址:https://www.cnblogs.com/qurui1997/p/10446649.html
Copyright © 2011-2022 走看看