javastart_2015 2015-09-13 11:25 采纳率: 0%
浏览 1880

css +js 实现轮播效果？、

利用计时器 css 等实现 简单的照片轮播效果，求大神 指点指点

再讲讲 如何实现 加点注释 谢谢 我是 菜鸟

  • 写回答

4条回答 默认 最新

  • liujianljm 2015-09-13 11:31
    关注

    <!DOCTYPE html>


    轮播
    content="text/html; charset=utf-8">

    <br> .ad{<br> border: 1px solid #ddd;<br> /* 与图片大小一致 <em>/<br> width: 480px;<br> height: 360px;<br> margin: 0;<br> padding: 0;<br> }<br> .ad li{<br> list-style-type: none;<br> width: 480px;<br> height: 360px;<br> padding: 0;<br> margin: 0;<br> }<br> .show{/</em> 显示 <em>/<br> display: block;<br> }<br> .hide{/</em> 隐藏 <em>/<br> display: none;<br> }<br>
    <br> /</em> 利用定时器，定时关闭显示图片 */<br> var timer;<br> var index = 0;//下一个图片的序号<br> function start(){<br> if(!timer){<br> timer = setInterval(function(){<br> //找到全部的 li 全部设置为hide<br> //找到下一个？设置 show<br> var ul = document<br> .getElementById(&quot;ad&quot;);<br> //找到ul中的全部li子元素<br> var li = <br> ul.getElementsByTagName(&quot;li&quot;);<br> for(var i=0; i<li.length; i++){<br> li[i].className="hide";<br> }<br> index++;<br> li[index%li.length]<br> .className="show";<br> }, 1000);<br> }<br> }<br> function stop(){<br> if(timer){<br> clearInterval(timer);<br> timer = null;<br> }<br> }<br>
    <!-- onload 在页面加载完毕以后执行 -->

    轮播


    <!-- onmouseover 事件在鼠标出现元素上的时候执行，onmouseout鼠标离开时候执行 -->
      onmouseover="stop();" onmouseout="start();">






    评论

报告相同问题？

悬赏问题

  • ¥15 安卓adb backup备份应用数据失败
  • ¥15 eclipse运行项目时遇到的问题
  • ¥15 关于#c##的问题：最近需要用CAT工具Trados进行一些开发
  • ¥15 南大pa1 小游戏没有界面，并且报了如下错误，尝试过换显卡驱动，但是好像不行
  • ¥15 没有证书，nginx怎么反向代理到只能接受https的公网网站
  • ¥50 成都蓉城足球俱乐部小程序抢票
  • ¥15 yolov7训练自己的数据集
  • ¥15 esp8266与51单片机连接问题(标签-单片机|关键词-串口)（相关搜索：51单片机|单片机|测试代码）
  • ¥15 电力市场出清matlab yalmip kkt 双层优化问题
  • ¥30 ros小车路径规划实现不了，如何解决？(操作系统-ubuntu)