图片轮播

之前一直都是用jquery写，没有尝试过原生的javascript，今天尝试着弄了一下，代码真多，注释添加的很详细，供学习交流.....

写的时候发现一些小问题：

1、javascript获取div宽高时，不能使用div.style.width等，弹窗alert(div.style.width);时会发现是一个空值，那是什么原因呢？

　　div.style.width是给div赋值宽，或者改变它的宽度

　　那么如何获取div宽呢？

　　a.<div id="container" style="width:600px;">给div添加内联样式，div.style.width，可以获取到内联样式的宽度。

　　b.查了一下网上说需要用div.offsetWidth,但是有点问题，如果给container加border时，offsetWidth是获取到container的宽度+border的宽度，这一点需要注意。

html:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>焦点轮播图</title>
</head>
<body>

<div id="container">
    <div id="list" style="left: -600px;">
        <img src="img/5.jpg" alt="1"/>
        <img src="img/1.jpg" alt="1"/>
        <img src="img/2.jpg" alt="2"/>
        <img src="img/3.jpg" alt="3"/>
        <img src="img/4.jpg" alt="4"/>
        <img src="img/5.jpg" alt="5"/>
        <img src="img/1.jpg" alt="5"/>
    </div>
    <div id="buttons">
        <span index="1" class="on"></span>
        <span index="2"></span>
        <span index="3"></span>
        <span index="4"></span>
        <span index="5"></span>
    </div>
    <a href="javascript:;" id="prev" class="arrow">&lt;</a>
    <a href="javascript:;" id="next" class="arrow">&gt;</a>
</div>

</body>
</html>

css:

 1  <style type="text/css">
 2         *{ margin: 0; padding: 0; text-decoration: none;}
 3         body { padding: 20px;}
 4         #container { width: 600px; height: 400px; overflow: hidden; position: relative; cursor:pointer;}
 5         #list { width: 4200px; height: 400px; position: absolute; z-index: 1;}
 6         #list img { float: left;}
 7         #buttons { position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;}
 8         #buttons span { cursor: pointer; float: left; border: 1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;}
 9         #buttons .on {  background: orangered;}
10         .arrow { cursor: pointer; display: none; line-height: 39px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px;  position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.3); color: #fff;}
11         .arrow:hover { background-color: RGBA(0,0,0,.7);}
12         #container:hover .arrow { display: block;}
13         #prev { left: 20px;}
14         #next { right: 20px;}
15 </style>

css

javascript:

  1     <script type="text/javascript">
  2 
  3         window.onload = function () {
  4             var container = document.getElementById('container');  //获取容器元素
  5             var list = document.getElementById('list');  //获取包括图片列表容器元素
  6             var buttons = document.getElementById('buttons').getElementsByTagName('span'); //获取存放按钮buttons中的sapn元素,返回值为数组形式
  7             var prev = document.getElementById('prev');  //左箭头
  8             var next = document.getElementById('next'); //右箭头
  9             var index = 1;   //小圆点索引
 10             var len = 5;
 11             var animated = false;
 12             var interval = 3000;
 13             var timer;   //存放定时器
 14             
 15             var imgWidth=container.offsetWidth;  //获取到container容器的宽度
 16             
 17             //添加事件绑定,点击next触发函数
 18             //A 点击右箭头
 19             next.onclick=function(){
 20                 if(index==len){
 21                     index=1;
 22                     }else{
 23                     index += 1;     //D
 24                         }
 25                 //list.style.left=parseInt(list.style.left)-imgWidth+"px";
 26                 animate(-imgWidth); //C调用函数传参
 27                 showButton();  //D
 28                 }
 29             //B 点击左箭头
 30             prev.onclick=function(){
 31                 if(index==1){
 32                     index=len;
 33                     }else{
 34                     index -= 1;     //D
 35                         }
 36                 //list.style.left=parseInt(list.style.left)+imgWidth+"px";
 37                 animate(imgWidth);  //C
 38                 showButton();  //D
 39                 }
 40             
 41             //C  提取出一个公共函数,图片切换显示
 42             function animate(offset){
 43                 var newleft=parseInt(list.style.left)+offset;  //由A，B中提取公用
 44                 list.style.left=newleft+"px";  //替换掉list.style.left，一个新的值
 45                 if( newleft > -imgWidth ){
 46                     list.style.left = -(imgWidth*len) + 'px';
 47                     }
 48                 if( newleft < -(imgWidth*len) ){
 49                     list.style.left= -imgWidth + 'px';
 50                     }
 51                 }
 52                 
 53          //D 亮起小圆点
 54             function showButton(){
 55                 //关掉其它的按钮，
 56                 for(var i = 0; i < buttons.length; i++){
 57                     if(buttons[i].className=="on"){
 58                         buttons[i].className="";
 59                         break;
 60                         }
 61                     }
 62                 //只让对应的显示
 63                 buttons[index-1].className="on";
 64                 }
 65             
 66             //------------------------我是一条分隔线---------------------
 67             //E   按钮切换,计算对应图片的偏移量  （目标值-原始值）*（-container宽度）
 68             for(var i = 0; i < buttons.length; i++){
 69                     buttons[i].onclick=function(){
 70                         //优化代码,刚学不懂可不用在意
 71                         if (this.className=='on') {
 72                             return;
 73                         }
 74                         
 75                         //注意span中的index属性是自己定义的，与class，id等都是不同的
 76                         //getAttribute可以获取自定义属性，也可获取自带属性
 77                         var myIndex=parseInt(this.getAttribute('index'));  //点击的当前的值,即原始值
 78                         var offset=-imgWidth*(myIndex-index);  //偏移量,index是小圆点索引，不同于span中index属性，即目标值
 79                         animate(offset);
 80                         index=myIndex;  //切换完之后归位
 81                         showButton();
 82                         }
 83                     }
 84             
 85             //------------------------我是一条分隔线---------------------
 86             // F  定时轮播
 87             function play(){
 88                 timer=setInterval(function(){
 89                     next.onclick();
 90                     },3000);
 91                 }
 92                 
 93             //清除定时器
 94             function stop(){
 95                 clearInterval(timer);
 96                 }
 97                 
 98             container.onmouseover=stop;
 99             container.onmouseout=play;
100             play();
101         }
102     </script>

imgShow

posted @ 2015-04-19 15:30 夏目の-の阅读(253) 评论(0) 编辑收藏举报

刷新页面返回顶部

图片轮播

公告