zoukankan      html  css  js  c++  java
  • js交互轮播图

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport"
    content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>js轮播图</title>
    <style>
    *{margin:0;padding:0;}
    .wrap{
    590px;
    height:470px;
    background-color:red;
    position:relative;
    margin:50px auto;
    }
    .wrap ul{
    590px;
    height:470px;
    }
    .wrap ul li{
    960px;
    height:470px;
    list-style:none;
    float:left;
    position:absolute;
    opacity:0;
    transition:all 2s;
    -moz-transition: all 2s; /* Firefox 4 */
    -webkit-transition: all 2s; /* Safari 和 Chrome */
    -o-transition: all 2s; /* Opera */
    }
    .wrap .left{
    display:inline-block;
    80px;
    height:60px;
    position:absolute;
    top:205px;
    left:0;
    font-size:30px;
    z-index:10;
    }
    .wrap .right{
    display:inline-block;
    80px;
    height:60px;
    position:absolute;
    top:205px;
    right:0;
    font-size:30px;
    z-index:10;
    }
    .wrap .pointList{
    96px;
    height:15px;
    position:absolute;
    bottom:22px;
    right:40px;
    z-index:100;
    }
    .wrap .pointList .point{
    12px;
    height:12px;
    border:1px solid black;
    float:left;
    margin-right:10px;
    border-radius:100%;
    background-color:#fff;
    }
    .wrap ul .show{
    display:block;
    z-index:10;
    opacity:1;
    }
    .pointList .point.show{
    background:green;
    z-index:10
    }
    </style>
    </head>
    <body>
    <div class="wrap">
    <ul>
    <li class="show"><img src="https://img20.360buyimg.com/babel/s590x470_jfs/t1/143671/13/779/56208/5ee77a4eE2c43007a/e208f572863d3384.jpg.webp" alt=""></li>
    <li><img src="https://img11.360buyimg.com/pop/s590x470_jfs/t1/123133/28/4643/80761/5ee19e5bEdfb3b988/a4c9f91f8c9ed6a2.jpg.webp" alt=""></li>
    <li><img src="https://img14.360buyimg.com/pop/s590x470_jfs/t1/118475/13/9913/31481/5ee1e6bcE3f86cb18/3e771d066e7f349b.jpg.webp" alt=""></li>
    <li><img src="https://img30.360buyimg.com/pop/s590x470_jfs/t1/126222/14/4583/71641/5ee19bafE3c50e9ea/09feb9f8da0402f3.jpg.webp" alt=""></li>
    </ul>
    <button class="left"><</button>
    <button class="right">></button>
    <div class="pointList">
    <div class="point show" data-index="0"></div>
    <div class="point" data-index="1"></div>
    <div class="point" data-index="2"></div>
    <div class="point" data-index="3"></div>
    </div>
    </div>
    <script>
    //获取元素 图片li 两个按钮 几个小圆点
    var lis = document.getElementsByTagName('li');
    var leftBtn = document.getElementsByClassName('left')[0];
    var rightBtn = document.getElementsByClassName('right')[0];
    var points = document.getElementsByClassName('point');
    // console.log(lis)
    // console.log(leftBtn)
    // console.log(rightBtn)
    // console.log(points)
    //制作一个索引数
    var index = 0;
    //清除所有show
    var clearShow = function(){
    for(var i=0;i<lis.length;i++){
    lis[i].className = ''
    }
    for(var i=0;i<points.length;i++){
    points[i].className = "point"
    }
    }
    //实现一个跳转图片函数
    var goIndex = function(){
    clearShow();
    lis[index].className = "show"
    points[index].className = "point show"
    }
    //按钮向右切换
    var goRight = function(){
    if(index < 3){
    index ++;
    }else{
    index = 0;
    }
    goIndex();
    }
    //按钮向左切换
    var goLeft = function(){
    if(index == 0){
    index = 3;
    }else{
    index --;
    }
    goIndex();
    }
    //添加监听事件
    rightBtn.addEventListener('click',function(){
    goRight()
    })
    leftBtn.addEventListener('click',function(){
    goLeft()
    })

    for(var i=0;i<points.length;i++){
    points[i].addEventListener('click',function(){
    var pointIndex = this.getAttribute('data-index');
    console.log(pointIndex);
    index = pointIndex;
    goIndex();
    })
    }
    </script>
    </body>
    </html>
  • 相关阅读:
    一个小时前,美国主流媒体,头条,谷歌两位创始人突然宣布退下来,把万亿美元的帝国交给Sundar Pichai
    Fox新闻报道,帮助北朝鲜使用加密货币专家被捕
    看新闻,说墨西哥政府发起了一个军事行动,抓住了11月杀死9位美国人的三名嫌疑犯
    黑五千万不要去商场,就像打仗一样。
    Facebook 一个热搜帖,美国一个老人癌症不治最后的心愿是跟儿子喝啤酒。
    这周末又参加班里同学生日party,同学父母包场2小时花费大约1000美金左右。
    Google谷歌总部员工家庭活动
    800年没有写博客了,今天重新开始。
    iOS image processing with the accelerate framework(透明玻璃效果)
    Custom View Controller Transitions and Storyboard
  • 原文地址:https://www.cnblogs.com/studyh5/p/13142019.html
Copyright © 2011-2022 走看看