爱站屋博客 - 好东西不私藏,大家一起分享!关于博客 留言板

网站首页 模板插件 正文

轮播亚洲图片小说偷拍图片图怎么做

2019-08-03 模板插件 1466 ℃
轮播亚洲图片小说偷拍图片图怎么做-第1张图片-【秒速时时彩开奖结果】爱站屋博客

[db:标签]果图

轮播亚洲图片小说偷拍图片图怎么做-第2张图片-【秒速时时彩开奖结果】爱站屋博客

思路分析:

  1、开启一个定时器

    方法名:window.setInterval(code,MilliSec),每隔指定的时间就执行code,无限次执行。

  2、定时器函数主要是用来执行图片轮播的效果

  3、当鼠标放在图片上面时,图片就停止了轮播的效果 清除了定时器

    方法名:window.clearInterval (timer),清除指定的定时器。

  4、当鼠标离开图片上面时,图片继续在执行轮播的效果 重新开启了定时器功能

  5、当鼠标放在li标签上面时,图片就停止了轮播的效果 清除了定时器

  6、当鼠标放在li标签上面时,还会显示li标签上面对应的数字的图片

  7、当鼠标离开li标签上面时,图片就会继续开始轮播的效果 重新开启了定时器功能

  8、li标签上面的亮效果,它是随着图片滚动而滚动。

HTML代码

<body> <div id="content">         <!--轮换显示的横幅广告图片-->         <div class="scroll_top"></div>         <div class="scroll_mid">          <img src="images/dd_scroll_1.jpg"  id="dd_scroll" οnmοuseοver="stopScroll()" οnmοuseοut="goon()"/>             <div id="scroll_number">                 <ul>                     <li class="scroll_number_over" οnmοuseοver="stopScroll(1)"  οnmοuseοut="goon()">1</li>                     <li  οnmοuseοver="stopScroll(2)" οnmοuseοut="goon()">2</li>                     <li  οnmοuseοver="stopScroll(3)" οnmοuseοut="goon()">3</li>                     <li  οnmοuseοver="stopScroll(4)" οnmοuseοut="goon()">4</li>                     <li  οnmοuseοver="stopScroll(5)" οnmοuseοut="goon()">5</li>                     <li  οnmοuseοver="stopScroll(6)" οnmοuseοut="goon()">6</li>                 </ul>             </div>         </div>         <div class="scroll_end"></div> </div> </body>

JS代码

<script type="text/javascript"> window.οnlοad=function(){ timer=setInterval("imgScroll()",500); var scroll_number=document.getElementById('scroll_number'); scrLi=scroll_number.getElementsByTagName('li'); scrLiLen=scrLi.length; } var n=2; function imgScroll(){ for(var i=0;i<scrLiLen;i++){ scrLi[i].className=""; } scrLi[n-1].className="scroll_number_over"; var imgObj=document.getElementById('dd_scroll'); imgObj.src="images/dd_scroll_"+n+".jpg"; n++; if(n>6){ n=1; } } function stopScroll(imgN){ if(imgN){ n=imgN; imgScroll(); } clearInterval(timer); } function goon(){ timer=setInterval('imgScroll()',500); } </script>


以上就是轮播图怎么做的详细容,更多请关注php中文网其它相关文章!


猜你喜欢

本文暂时没有评论哦(●'◡'●)

欢迎 发表评论:

:如果评论未出现,请刷新网页,谢谢合作!

会员中心
搜索
ip签名图
    IP签名图
网站分类
标签列表
文章归档
站点信息
  • 文章总数:112038
  • 页面总数:3
  • 分类总数:12
  • 标签总数:629
  • 评论总数:2060
  • 浏览总数:1241363
爱站云安全认证