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>
  • 相关阅读:
    %
    【收藏】Javascript调用后台代码的方法
    C++Builder2010中配置OpenCV2.2
    【收藏】Visual studio 2008 && 2010 快捷键大全
    队列的练习
    哈希表
    poj 3750 链表
    C/C++内存存储 mark在此
    二叉树,深搜,广搜
    链表的练习
  • 原文地址:https://www.cnblogs.com/webarn/p/6909500.html
Copyright © 2011-2022 走看看