前端学习----实现轮播图

实现轮播图

刚开始我看到这个问题 直接想到了里切换元素的display属性来实现

1. js--改变元素的display属性

就是这样一个 改变display来实现(ps:也说明了 display会让img大小为0)

//html
<div id="container">
    <ul id="img_div">
        <li><img src="image/imouto.png"></li>
        <li><img src="image/sanjiu.jpg"></li>
    </ul>
</div>
//css
        *{padding: 0;margin:0;}
        li{list-style: none;}
        #container{
            width: 300px;
            height: 300px;
            display: inline-block;
            overflow: hidden;
        }
        #img_div{
            width: 600px;
            margin-left: 0;
        }
        #img_div li{
            float: left;
        }
        #img_div li img{
            width: 300px;
            height: 300px;
        }
        .display{
            display:inline-block;
        }
        .not{
            display: none;
        }
//js
        function change_img(){
            var img_div=document.getElementById('img_div');
            for(var i=0;i<img_div.children.length;i++){
                if(img_div.children[i].children[0].getAttribute('class')=='display'){
                    img_div.children[i].children[0].setAttribute('class','not');
                    if(i==img_div.children.length-1){
                        img_div.children[0].children[0].setAttribute('class','display');
                    }else{
                        img_div.children[i+1].children[0].setAttribute('class','display');
                    }
                    break;
                }
            }
        }
        setInterval(change_img, 1000);

增加上按钮 左右移动后的效果

//html
<div id="container">
        <div id="img_container">
            <a href="#"><img id="img" src="./imouto.png"></a>
        </div>
        <div id="btn">
            <div id="left">
                <a href="#">左</a>
            </div>
            <div id="right">
                <a href="#">右</a>
            </div>
        </div>
        <div id="dot">
            <ul id="ul-dot">
                <li class="active"><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
                <li><a href="#"></a></li>
            </ul>
        </div>
    </div>
//css
*{padding:0;margin:0;}
        #container{
            width: 100%;
            height: 400px;
        }
        #img_container{
            height: 300px;
            width: 300px;
            margin:0 auto;
            border:1px solid yellow;
        }
        #img_container img{
            height: 300px;
            width: 300px;
        }
        #btn{
            text-align: center;
            line-height: 100px;
        }
        #left{
            width: 100px;
            height: 100px;
            margin-top: -200px;
            float: left;
        }
        #right{
            width: 100px;
            height: 100px;
            margin-top: -200px;
            float: right;
        }

        #dot{
            position: relative;
        }
        #ul-dot{
            width: 140px;
            padding:0 90px 0 80px;
            margin:0 auto;
            position: relative;
            top: -20px;
        }
        #ul-dot:after{
            content:' ';
            display: block;
            clear: both;
        }
        #ul-dot li{
            list-style:none;
            width: 20px;
            height: 20px;
            border-radius: 20px;
            background: lightblue;
            float: left;
            margin-left: 15px;      
        }
        .active{
        background-color: orangered !important;
        }
//javascript
    //设置图片位置
    var imgUrl=['./imouto.png','./sanjiu.jpg','./imouto.png','./sanjiu.jpg'];
    //获取元素
    var container=document.getElementById('container');
    var img_container=document.getElementById('img_container');
    var img=document.getElementById('img');
    var left=document.getElementById('left');
    var right=document.getElementById('right');
    var dot=document.getElementById('dot');
    var li=document.getElementsByTagName('li');
    var num=0;
    var timer=null;
    //改变图片
    function changeImg(){
        img.src=imgUrl[num];
        for(var i=0;i<li.length;i++)
            li[i].className='';
        li[num].className='active';
    }

    container.onmouseover=function(event){
        clearInterval(timer);
    }
    //重点注意
    container.onmouseout=autoPlay;

    //点击按钮
    for(var i=0;i<li.length;i++){
        //注意 直接利用i改变num是不行的 
        //就像这样 num=i是不行的 因为循环结束后 i已经变成了4
        li[i].index=i;
        li[i].onclick=function(){
            num=this.index;
            changeImg();
        }
    }

    //自动播放
    function autoPlay(){
        timer=setInterval(function(){
            if(num==imgUrl.length-1)
                num=0;
            else
                num++;
            changeImg();
        },1500);
    }

    //左右点击
    left.onclick=function(event){
        if(num==0)
            num=imgUrl.length-1;
        else
            num--;
        changeImg();
    }

    right.onclick=function(event){
        if(num==imgUrl.length-1)
            num=0;
        else
            num++;
        changeImg();
    }

    setTimeout(autoPlay());

但是效果并不如意 因为切换时候一闪而过并不怎么美观
解决这个可以利用另外一种方式来写 利用transition 和 opacity 来实现

2.css实现轮播

前端学习----实现轮播图

原文：https://www.cnblogs.com/57one/p/12493503.html