轮波图

第一种 简易型
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box {
                width: 1000px;
                height: 300px;
                position: relative;
                margin: 100px auto;
            }
            
            #banner {
                width: 1000px;
                height: 300px;
                position: relative;
            }
            
            img {
                width: 1000px;
                height: 300px;
                position: absolute;
                left: 0;
                top: 0;
            }
            img:nth-child(3){z-index: 1;}
            
            #btn input {
                position: absolute;
                top: 140px;
                z-index: 999999;
            }
            
            #right {
                right: 0;
            }
        </style>
    </head>

    <body>
        <div id="box">
            <div id="banner">
                <img src="img/img/1.jpg" />;
                <img src="img/img/2.jpg" />;
                <img src="img/img/3.jpg" />;
                <img src="img/img/4.jpg" />;
                <img src="img/img/5.jpg" />;
            </div>
            <div id="btn">
                <input type="button" name="left" id="left" value="<<<" />
                <input type="button" name="right" id="right" value=">>>" />
            </div>
        </div>

    </body>
    <script src="js/move.js">
        
    </script>
    <script type="text/javascript">
        function Banner() {
            this.img = document.querySelectorAll("img");
            this.right = document.querySelector("#right");
            
            this.i = 0;
            this.index = 0;
            this.init();
        }
        Banner.prototype.init = function() {
            
            var that = this;
            this.right.onclick = function() {

                that.changeIndex()
            }

        }
        Banner.prototype.changeIndex = function() {
            if(this.index == this.img.length-1) {
                this.index = 0;
            } else {
                this.index = this.index+1;
            }
            
            this.display()
        }
        Banner.prototype.display = function() {
            this.img[this.index].style.zIndex = this.i++;
        this.img[this.index].style.width = "0";
       move(this.img[this.index],{
          width:1000
       })
        }

        new Banner();
    </script>

</html>



第二种,移动装图片的大盒子
<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #banner {
                width: 1000px;
                height: 300px;
                position: relative;
                margin: 100px auto;
                overflow: hidden;
            }
            
            #imgs {
                height: 300px;
                position: absolute;
                left: 0px;
                top: 0;
            }
            
            #buttons input {
                position: absolute;
                top: 140px;
                z-index: 999999;
            }
            
            #right {
                right: 0;
            }
            
            #left {
                left: 0;
            }
            
            img {
                float: left;
            }
        </style>
    </head>

    <body>
        <div id="banner">
            <div id="imgs">
                <img src="img/img/1.jpg" />
                <img src="img/img/2.jpg" />
                <img src="img/img/3.jpg" />
                <img src="img/img/4.jpg" />
                <img src="img/img/5.jpg" />
                <img src="img/img/1.jpg" />
            </div>
            <div id="buttons">
                <input type="button" name="" id="left" value="<<<" />
                <input type="button" name="" id="right" value=">>>" />
            </div>
        </div>
    </body>
    <script src="js/move.js">
    </script>
    <script type="text/javascript">
        function Banner() {
            this.banner = document.querySelector("#banner");
            this.imgs = document.querySelector("#imgs");

            this.img = document.querySelectorAll("img");
            this.left = document.querySelector("#left");
            this.right = document.querySelector("#right");
            this.imgs.style.width = this.img.length * this.img[0].offsetWidth + "px";
            this.index = 1;

            this.init();

        }
        Banner.prototype.init = function() {

            var that = this;

            this.left.onclick = function() {
                that.changeIndexl();

            }

        }
        Banner.prototype.changeIndexl = function() {

            if(this.index == 1) {
                this.index =this.img.length- 2;
                this.imgs.style.left = -this.img.length*this.img[0].offsetWidth + "px";

            } else {
                this.index = this.index - 1;

            }

            this.display();
        }
        Banner.prototype.display = function() {

            move(this.imgs, {
                left: -this.index * this.img[0].offsetWidth
            })
        }
        
        
        
        Banner.prototype.init = function(){
            
            var that = this ;
            
                
                this.right.onclick = function(){
                that.changeIndexr();
                
            
            }
                
                    
                    this.left.onclick = function(){
                that.changeIndexl();
                that.onoff=0
            
                
            }
            
            
        }
        Banner.prototype.changeIndexr=function(){
            
            if(this.index == this.img.length-1){
                this.index = 1;
                this.imgs.style.left = 0;
                
            }else{
                this.index = this.index+1;
                
            }
            
            this.display();
                    }
        Banner.prototype.display=function(){
            
            move(this.imgs,{left:-this.index*this.img[0].offsetWidth})
        }
        
    
        
        
        
        
        

        new Banner();
    </script>

</html>



第三种 向左运动时在指向的图片后面添加一张图片, 向右运动时在指向的图片前面添加一张图片
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #banner{width: 1000px;height: 300px;position: relative;margin: 100px auto;overflow: hidden;}
            #imgs{height: 300px;position: absolute;left: 0;top: 0;}
        
            #buttons input{position: absolute;top:140px;z-index: 999999;}
            #right{right: 0;}
            #left{left: 0;}
            img{position:absolute;left:1000px;}
            img:nth-child(1){left: 0;}
        </style>
    </head>
    <body>
        <div id="banner">
            <div id="imgs">
                <img src="img/img/1.jpg"/>
                <img src="img/img/2.jpg"/>
                <img src="img/img/3.jpg"/>
                <img src="img/img/4.jpg"/>
                <img src="img/img/5.jpg"/>
                
            </div>
            <div id="buttons">
                <input type="button" name=""  id="left"  value="<<<" />
                <input type="button" name=""  id="right"  value=">>>" />
            </div>
        </div>
    </body>
    <script src="js/move.js">
        
    </script>
    <script type="text/javascript">
        function Banner (){
            this.imgs = document.querySelector("#imgs");
            this.img = document.querySelectorAll("img");
            this.right= document.querySelector("#right");
            this.left= document.querySelector("#left");
            this.index = 0;
//            this.next=this.img.length-1
            this.init();
            
        }
        Banner.prototype.init = function(){
            console.log(1)
            var that = this;
            this.left.onclick = function(){
                
                that.changeindexl();
            }
            
            this.right.onclick = function(){
                
                that.changeindexr();
            }
        }
        Banner.prototype.changeindexl= function(){
            if(this.index==0){
                this.index=this.img.length-1;
                this.next = 0
            }else{
                this.index=this.index-1;
            this.next = this.index +1;
            }
            this.displayl();
        }
        Banner.prototype.displayl= function(){
            
             this.img[this.next].style.left =0+"px";
             move(this.img[this.next],{left:1000})
            this.img[this.index].style.left =-1000+"px";
            
             move(this.img[this.index],{left:0})
            
        }
        
        
        
        
    
        Banner.prototype.changeindexr = function(){
            if(this.index == this.img.length-1){
                this.index=0;
                this.prev=this.img.length-1;
            }else{
                this.index=this.index+1;
                
            this.prev = this.index-1;
            }
            this.displayr()
        }
        Banner.prototype.displayr = function(){
            this.img[this.prev].style.left = 0;
            move(this.img[this.prev],{left:-1000})
            this.img[this.index].style.left = 1000+"px";
            move(this.img[this.index],{left:0})
        }
        
        
        
        
             
            new Banner();
    </script>
</html>

 

posted @ 2019-09-04 22:47  奋斗,少年。  阅读(184)  评论(0编辑  收藏  举报