zoukankan      html  css  js  c++  java
  • 页面图片切换DEMO

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>✨✨✨✨✨✨</title>
        <style>
            .boss{
                width: 80%;
                height: 700px;
                margin: auto;
                background-color: #ddcc21;
                text-align: center;
            }
            li{
                list-style: none;
                font-size: 30px;
                padding: 15px;
                display: inline-block;
            }
            .img{
                width: 70%;
                height: 500px;
                border: 5px solid cyan;
                margin:50px auto 0;
                font-size: 40px;
                text-align: center;
                line-height: 500px;
            }
            img{
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div class="boss">
            <ul>
                <li><a href="http://tupian.aladd.net/2014/6/37.jpg">图片1</a></li>
                <li><a href="http://image.l99.com/401/1456924431713_wm6se2.jpg">图片2</a></li>
                <li><a href="http://cdn.duitang.com/uploads/item/201512/06/20151206111919_xecNr.png">图片3</a></li>
            </ul>
            <div class="img"><img class="image"></div>
        </div>
    </body>
    <script>
        var btn = document.getElementsByTagName('a');
        var img = document.getElementsByClassName('image')[0];
    
        for (var i=0;i<btn.length;i++){
            btn[i].onclick = function(event){
                var add = this.getAttribute('href');
                img.setAttribute('src',add);
                return false;
                // e.preventDefault();
            }
        }
            
    </script>
  • 相关阅读:
    前端一些词汇的缩写
    github上值得关注的前端项目
    window注册表
    注册表删除chrome插件
    js二维码扫描
    git push --no-thin
    mac下app store 无法完成您的购物操作
    git终端提示符
    mac 下 apache设置
    windows 下 apache设置
  • 原文地址:https://www.cnblogs.com/webarn/p/6909500.html
Copyright © 2011-2022 走看看