码迷,mamicode.com
首页 > Web开发 > 详细

网站——如何实现轮播效果

时间:2016-08-23 23:35:42      阅读:189      评论:0      收藏:0      [点我收藏+]

标签:

实现轮播效果需要运用到的知识:

  • DOM操作
  • 定时器
  • 事件运用
  • Js动画
  • 函数递归
  • 无限滚动

原理:控制图片列表的“left”值来显示相应的图片

组成部分<div id="container">:

    1. <div id="list">//图片列表

<div id="list" style="left:-600px">//当图片的宽度全部为600px时

<img src="" />

……//首尾各需要重复一张图片

      2.<div id="button">//n个小圆点;箭头

<div id="button">

  <span index="1" class="on"></span>

  <span index="2"></span>

  <span index="3"></span>

  ……//index~~?

</div>

      3.<a href>//两个超链接_左右两个箭头的链接

<a href="" class="arrow" id="prev">&lt</a>

<a href="" class="arrow" id="next">&gt</a>

重点样式

#container{
  overflow:hidden;//隐藏超出的图片列表
  position:relative;
}
#list{
  position:absolute;
  z-index:1;
}
#buttom{
  position:absolute;
  z-index:2
}
#button#arrow{
  display:none;
}
#arrow:hover{
  background-color:RGBA(0,0,0,7)//最后一个数值改变的是当鼠标移到箭头上时箭头的透明度。
}
#container:hover .arrow{display:block}

 

JS脚本部分

<script type="text/javascript">
window.onload functino(){
  var container=document.getElementById("container");
  var list=document.getElementById("list");
  var button=document.getElementById("button").getElementByTagname("span");
  var prev=document.getElementById("prev");
  var next=document.getElementById("next");

  prev.onclick=function{
    list.style.left=parseInt(liat.style.left)-600+"px";
  }
  next.onclick=function{
    list.style.left=parseInt(liat.style.left)+600+"px";
  }


}    
</script>

网站——如何实现轮播效果

标签:

原文地址:http://www.cnblogs.com/Thelma/p/5800994.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!