轮播图

实现效果：

实现代码：

1.css：

css样式我也不怎么熟练，我感觉这就要靠多练，多记了吧

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

2.根据偏移量获取显示的图片：

        function animate(offset){
            var newLeft = parseInt(picture.style.left) + offset;
            picture.style.left = newLeft + 'px';
            if(newLeft<-1200){
                picture.style.left = 0 + 'px';
            }
            if(newLeft>0){
                picture.style.left = -1200 + 'px';
            }
        }; 

3.消除按钮样式：

        function showButton(){
            for(var i = 0 ;i < button.length ; i++){
                if(button[i].className = 'on')
                    button[i].className = ' ';
            }
            
            button[index-1].className = 'on';
        
        }

4.通过左右按钮点击来切换图片：

        prev.onclick = function(){
            index -= 1;
            if(index < 1){
                index = 3;
            }
            showButton();
            animate(600);
        };
        
        next.onclick = function(){
            index += 1;
            if(index > 3){
                index = 1;
            }
            showButton();
            animate(-600);
        };

5.可以自动播放，以及鼠标放至图片上，停止播放：

        function play(){
            timer = setInterval(function () {
                next.onclick()
            },1500 )    
        };
        
        play();
        
        function stop(){
            clearInterval(timer);
        };
        
        container.onmouseover = stop;
        container.onmouseout = play;

6.点击按钮显示相应的图片和按钮样式：

        for(var i = 0;i < button.length;i ++){
            (function(i){
                button[i].onclick = function(){
                    var clickIndex = parseInt(this.getAttribute('index'));
                    offset = 600 * (index - clickIndex);
                    animate(offset);
                    index = clickIndex;
                    showButton();
                }
            })(i)
        };

7.html：

    <div id="container">
        <div id="picture" style="left:0px;">
            
            <img src="img/1.jpg"></img>
            <img src="img/2.jpg"></img>
            <img src="img/3.jpg"></img>
            
        </div>
        
        <div id="button">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>
        
        <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
        
    </div>　

 

完整代码：

<html>
<head>
    <meta charset="utf-8">
    <title>轮播图</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
            text-decoration:none;
        }
        body{
            padding:20px;
        }
          
        #container{
            position:relative;
            width:600px;
            height:400px;
            margin:0 auto;
            border:3px solid #333;
            overflow:hidden;
        }
        
        #picture{
            position:absolute;
            width:1800px;
            height:400px;
            z-index:1;
        }
        #picture img{
            float:left;
            width:600px;
            height:400px;
        }
        
        #button{
            position:absolute;
            left:250px;
            bottom:20px;
            width:100px;
            height:10px;
            z-index:2;
        }
        #button span{
            float:left;
            margin-right:5px;
            width:10px;
            height:10px;
            border:1px solid #fff;
            border-radius:50%;
            background:#333;
            cursor:pointer;
        }
        #button .on{
            background:orangered;
        }
        .arrow{
            position:absolute;
            top:180px;
            z-index:2;
            width:40px;
            height:40px;
            font-size:36px;
            font-weight:bold;
            line-height:39px;
            text-align:center;
            color:#fff;
            background-color: RGBA(0, 0, 0, .3);
            cursor:pointer;
        }
        .arrow:hover{
            background-color: RGBA(0, 0, 0, .9);
        }
        #prev{
            left:20px;
        }
        #next{
            right:20px;
        }
    </style>
    <script>
        window.onload = function(){
            var container = document.getElementById('container');
            var picture = document.getElementById('picture');
            var button = document.getElementById('button').getElementsByTagName('span');
            var prev = document.getElementById('prev');
            var next = document.getElementById('next');
            var index = 1;
            var timer;
            
        //根据偏移量获取显示的图片
        function animate(offset){
            var newLeft = parseInt(picture.style.left) + offset;
            picture.style.left = newLeft + 'px';
            if(newLeft<-1200){
                picture.style.left = 0 + 'px';
            }
            if(newLeft>0){
                picture.style.left = -1200 + 'px';
            }
        };
        
        //消除按钮样式
        function showButton(){
            for(var i = 0 ;i < button.length ; i++){
                if(button[i].className = 'on')
                    button[i].className = ' ';
            }
            
            button[index-1].className = 'on';
        
        }
        
        prev.onclick = function(){
            index -= 1;
            if(index < 1){
                index = 3;
            }
            showButton();
            animate(600);
        };
        
        next.onclick = function(){
            index += 1;
            if(index > 3){
                index = 1;
            }
            showButton();
            animate(-600);
        };
        
        
        function play(){
            timer = setInterval(function () {
                next.onclick()
            },1500 )    
        };
        
        play();
        
        function stop(){
            clearInterval(timer);
        };
        
        container.onmouseover = stop;
        container.onmouseout = play;
        
        //点击按钮显示相应的图片和按钮样式
        for(var i = 0;i < button.length;i ++){
            (function(i){
                button[i].onclick = function(){
                    var clickIndex = parseInt(this.getAttribute('index'));
                    offset = 600 * (index - clickIndex);
                    animate(offset);
                    index = clickIndex;
                    showButton();
                }
            })(i)
        };
        
    
        }
        
        
        
    </script>
    
</head>

<body>
    <div id="container">
        <div id="picture" style="left:0px;">
            
            <img src="img/1.jpg"></img>
            <img src="img/2.jpg"></img>
            <img src="img/3.jpg"></img>
            
        </div>
        
        <div id="button">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
        </div>
        
        <a href="javascript:;" id="prev" class="arrow"><</a>
        <a href="javascript:;" id="next" class="arrow">></a>
        
    </div>


</body>
</html>

　

 

注意：

id  container是相对定位(width:600px)，picture是绝对定位(width:3000px),

所以随着偏移量的改变，picture位置会依据container位置相应改变。

相对定位看自身，绝对定位看已定位的最近的父元素。

 

参考的博客：https://www.cnblogs.com/LIUYANZUO/p/5679753.html