前端开发

.banner{position:relative;width:624px;height:200px;overflow:hidden;}
.banner .list-banner{position:absolute;width:5000px;}
.banner .list-banner li{float:left;width:624px;height:200px;}
.banner .list-num-wp{position:absolute;bottom:7px;width:624px;height:11px;}
.banner .list-num{width:100px;margin:0 auto;}
.banner .list-num a{display:inline;float:left;width:11px;height:11px;margin:0 7px; background:url(../images/list-num.png) no-repeat;}
.banner .list-num a:hover{background:url(../images/list-num-hover.png));}
.banner .list-num a.hover{background:url(../images/list-num-hover.png);}
.banner .left a{display:block;position:absolute;width:49px;height:49px;top:75px;left:4px;background:url(../images/arrow.gif) 0 0;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}
.banner .right a{display:block;position:absolute;width:49px;height:49px;top:75px;right:4px;background:url(../images/arrow.gif) 0 -49px;filter: Alpha(opacity=50);-moz-opacity:.5;opacity:0.5;}

三、脚本思路

1.先左右按钮功能

window.onload=function(){
  var prev=document.getElementById("left");
  var next=document.getElementById("right");
  var list_banner=document.getElementById("list-banner");
  next.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)-624+'px';  //注：html上的ul要加行间样式left:0;，否则这里动不起来
  }
  prev.onclick=function(){
    list_banner.style.left=parseInt(list_banner.style.left)+624+'px';
  }
}

2.左右按钮点击的两句话很像，封装成函数

function animate(offset){
    list_banner.style.left=parseInt(list_banner.style.left)+offset+'px';
}
next.onclick=function(){
    animate(-624);
}
prev.onclick=function(){
    animate(624);
}

3.无限滚动

①假图的做法

即图片为412341，小于最后一张位置的时候，回到第一张的位置，大于 第一张位置的时候，拉到最后一张的位置

function animate(offset){
  var newLeft=parseInt(list_banner.style.left)+offset;
  list_banner.style.left=newLeft+'px';
  if(newLeft<-2496){
    list_banner.style.left=-624+"px";
  }
  if(newLeft>-624){
    list_banner.style.left=-2496+"px";
  }
}

4.小圆点跟着左右按钮切换

var index=1;
function showDot(){
  for(var i=0;i4){
    index=1;
  }
  showDot();
}
prev.onclick=function(){
  animate(624);
  index--;
  if(index<1){
    index=4;
  }
  showDot();
}

5.点击小圆点图片滚动及小圆点切换

for(var i=0;i
①点自己的时候不执行下列代码
②

    
      
      
      
      
    

关键是要取到点击的是第几张图片，不能直接var myIndex=this.index;因为index是自定义属性，dom自带属性可以通过点来获取，自定义属性不行，.getAttribute（）既可以获取自定义属性，又可以获取dom自带属性
③更新index值，index=myIndex;
6.动画函数（有一个渐变的运动过程）
function animate(offset){
    animated=true;
    var newLeft=parseInt(list_banner.style.left)+offset;
    var time=300;     //位移总时间
    var interval=30;    //位移间隔时间
    var speed=offset/(time/interval);    //每次移动距离
    speed=speed>0?Math.ceil(speed):Math.floor(speed);    //可能存在小数，取整
    function go(){
      if((speed < 0 && parseInt(list_banner.style.left)>newLeft)||(speed>0&&parseInt(list_banner.style.left)-624){
          list_banner.style.left=-2496+"px";
        }
      }
    }
    go();
}
next.onclick=function(){
    if(!animated){
      index++;
    }
    if(index>4){
      index=1;
    }
    showDot();
    if(!animated){
      animate(-624);
    }
}
prev.onclick=function(){
    if(!animated){
      index--;
    }
    if(index<1){
      index=4;
    }
    showDot();
    if(!animated){
      animate(624);
    }
}
for(var i=0;i
①一个函数不停地在一个条件后调用自身，这种做法就叫做递归，这里通过递归可以实现animate这个函数的动画效果
②不停点就意味着不停调用animate函数，可能会造成卡顿，图片乱刷，需要优化，引进变量animated
7.自动播放
function autoplay(){
    timer=setInterval(function(){
      next.onclick();
    },1000)
}
function stopautoplay(){
    clearInterval(timer);
}
banner.onmouseover=stopautoplay;
banner.onmouseout=autoplay;
autoplay();
setTimeout只执行一次，之前一直执行，是因为递归
setInterval是每隔多少时间
8.假图的优化
实际运用中，图片肯定是按顺序存放，所以假图最好通过js来生成，而不是本身写在html上
var img_first=list_banner.getElementsByTagName("li")[0];
var img_last=list_banner.getElementsByTagName("li")[3];
list_banner.appendChild(img_first.cloneNode(true));
list_banner.insertBefore(img_last.cloneNode(true),list_banner.getElementsByTagName("li")[0]);
appendChild是将新的节点添加到目标的最后一个子节点之后
insertBefore是将新的节点添加到已存在的子节点之前
cloneNode方法，true表示深克隆，false表示浅克隆，深克隆是将标签和标签里的内容都复制过来，而浅克隆不复制内容
                

                

                    

                        

                            
收藏(9)
                            
赞(43)
                            
举报
                        
                    
                
                    分享到：
                            

                
                
                

            
            

            

                

                    

                                                                                    js直接操作css3属性transition/webkitTra...
                                

                                js直接操作css3属性transition/webkitTransform实现动画代码实现



  





js直接操作css3属性transition和webkitTransform实现动画
  
  
  
  
  
    
    
    function xia(sum){
    var obj=document.getElementById("webkfaid");
    obj.style.transition...                                                                        
                
                

                    

                                                                                    javascript获取url信息的常见方法
                                

                                先以“http://www.cnblogs.com/wuxibolgs329/p/6188619.html#flag?test=12345”为例，然后获得它的各个组成部分。
1、获取页面完整的url
var a=location.href;
console.log(a);　// “http://www.cnblogs.com/wuxibolgs329/p/5261577.html#flag?test=12345”
2、获取页面的域名
var host = window.location.host; //...                                                                        
                
                                                        

                    

                        

                            

                                
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
                                    Aug 30, 2017
                                
javascript将选中值累加到文本框的方法
                                    Aug 18, 2016
                                
javascript文本框宽根据输入文本宽度改变
                                    Feb 13, 2017
                                
原声Javascript基础实列
                                    Jan 02, 2017
                                
                            

                        
                    
                    

                        

                            

                                
js获取小数点后2位函数toFixed(2)
                                    Jun 22, 2016
                                
基于php中echo用逗号和用点号的区别详解
                                    Mar 21, 2018
                                
浅谈javascript动画和css3动画的优缺点
                                    Feb 23, 2017
                                
javascript纯原声ajax基础教程1、创建 ajax 对象2、连接服务器3、发送请求4、接收返回值
                                    Oct 05, 2016
                                
                            

                        
                    
                            
        
    
    

    

    

        

            

                

                    

                
                
        php迷，一个php技术的分享社区，专属您自己的技术摘抄本、收藏夹。
                
在这里……
            
        
        

            

                
Tags
                

                    
共同学习
                    
                    
发现
                    
 收藏
                    
 分享
                    
 共享
                    
共鸣
                    
专注
                    
                    
共同进步

                
            
        
        

            

                
About
                

                

                        特别鸣谢    
                    使用协议


                        意见反馈    
                    网站投稿
                
            
        
        

            
            
            
            
        
    




    

        

            网站声明：本站所有视频，教程都由网友上传，站长收集和分享给大家学习使用，如由牵扯版权问题请联系站长邮箱  冀ICP备18013926号-2
        

    

Scroll