首页 > Web开发 > 详细

js小案例

时间:2019-12-31 10:00:58      阅读:88      评论:0      收藏:0      [点我收藏+]

1.轮播图(无定时器纯手动操作)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{margin: 0;padding: 0;}
    .lunbo{height: 600px;width: 1140px;position: relative;}
    .picture .item{list-style: none; position: absolute;transition: all .5s; opacity: 0;}
    .item img{height: 600px;width: 1140px;}
    .picture .cur{z-index: 9;opacity: 1;}
    .btn{position: absolute;height: 200px; width: 50px;top: 150px;background: none;border: none;font-size: 36px;color: aquamarine;z-index: 10;}
    #btnPex{left: 0px;}
    #btnNext{right: 0px;}
    .round_list{position: absolute;z-index: 99;bottom: 10px;right: 0px;}
    .round_list .round{float: left; list-style: none;height: 15px;width: 15px;border-radius: 50%;border: 1px solid grey;margin-right: 15px;background-color: darkgray;cursor: pointer;}
    .round_list .cur{background-color: #ffffff;}
</style>
<body>
    <div class="lunbo">
        <ul class="picture">
            <li class="item cur"><img src="./img/1577663866422.jpeg" ></li>
            <li class="item"><img src="./img/1577663869884.jpeg" ></li>
            <li class="item"><img src="./img/1577663877104.jpeg" ></li>
            <li class="item"><img src="./img/1577663881433.jpeg" ></li>
            <li class="item"><img src="./img/1577663888613.jpeg" ></li>
        </ul>
        <ul class="round_list">
            <li class="round  cur" data-index="0"></li>
            <li class="round" data-index="1"></li>
            <li class="round" data-index="2"></li>
            <li class="round" data-index="3"></li>
            <li class="round" data-index="4"></li>
        </ul>
        <button class="btn" id="btnPex"> < </button>
        <button class="btn" id="btnNext"> > </button>
    </div>

    <script>
        var items=document.getElementsByClassName(‘item‘);
        var rounds=document.getElementsByClassName(‘round‘);
        var goNextBtn=document.getElementById(‘btnNext‘);
        var goPexBtn=document.getElementById(‘btnPex‘);
        var index=0;
        
        //清除列表的 cur样式
        var clearCur=function(){
            for(var i=0;i<items.length;i++){
                items[i].className=‘item‘;
            }
            for(var i=0;i<rounds.length;i++){
                rounds[i].className=‘round‘
            }
        }
        //移动图片 相当于移动cur类 (给图片添加cur类)
        var goIndex=function(){
            clearCur();
            items[index].className=‘item cur‘
            rounds[index].className=‘round cur‘
        }
        //下一张
        var goNext=function(){
            if(this.index<items.length-1){
                index++;
            }else{
                index=0
            }
            goIndex();
        }
        //上一张
        var goPex=function(){
            if(index==0){
                index=items.length-1;
            }else{
                index--;
            }
            goIndex();
        }

        //添加小圆点
        for( var i=0;i<rounds.length;i++){
            rounds[i].addEventListener(‘click‘,function(){
                var roundIndex=this.getAttribute(‘data-index‘);//getAttribute获取标签属性 data-index
                index=roundIndex; //将小圆点列表获取的data-index赋值给图片列表以便找到相对应的图片
                goIndex();
            })
        }


        goNextBtn.addEventListener(‘click‘,function(){
            goNext();
        })
        goPexBtn.addEventListener(‘click‘,function(){
            goPex();
        })
        
    </script>
</body>
</html>

  

js小案例

原文:https://www.cnblogs.com/aomeng/p/12122690.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!