html

最新推荐文章于 2024-11-12 11:19:19 发布

anshan9676

最新推荐文章于 2024-11-12 11:19:19 发布

阅读量128

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/hehehehehe/p/7092315.html

版权

1.动态切换图片(布局)

2.动态切换图片---（单击切换图片）// lis.onmouseover = liclick;//鼠标移到目标上；鼠标移进时

3.图片轮换加强版

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #bodDIv {
            margin:50px auto;
            width:460px;
            border:1px solid #000;
        }
        #pageUL{
             list-style-type:none;
            border:0px solid #808080;
            margin:0px;
            position:relative;/*位置：相对位置*/  
            left:350px;
            width:200px;
            top:-30px;
        }
     #pageUL li{
         display:inline-block;/*显示：内联的块元素*/
         width:10px;height:20px;
         border:1px solid #000000;
         background-color:#b6ff00;
     }
    </style>
    <script  type="text/javascript">
        function gel(id) { return document.getElementById(id); }
        window.onload = function () {

        };
    </script>
</head>
<body>
    <div id="bodDIv">
        <img src="image/t019b430cacfc2e1f04.jpg" width="460px"/>
        <ul id="pageUL">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
</html>

2.动态切换图片

    <style type="text/css">
        #bodDIv {
            margin:50px auto;
            width:460px;
            border:1px solid #000;
        }
        #pageUL{
             list-style-type:none;
            border:0px solid #808080;
            margin:0px;
            position:relative;/*位置：相对位置*/  
            left:310px;
            width:200px;
            top:-25px;
        }
     #pageUL li{
         display:inline-block;/*显示：内联的块元素*/
         width:20px;height:22px;
         border:1px solid #000000;
         background-color:#b6ff00;
         padding:0px 0px;
         text-align:center;
     }
    </style>
    <script  type="text/javascript">
        function get(id) { return document.getElementById(id); };
         //图片数组
        var imageList = [
            "t019b430cacfc2e1f04.jpg",
            "qq_icon.jpg",
            "icon_ts.png",
            "t019b430cacfc2e1f04.jpg",
            "icon_yq.png"];
        function gelButton()
        {
            var geluL = get("pageUL")
            for (var i = 0; i < imageList.length; i++) {
                var lis = document.createElement("li");
                lis.innerHTML = i + 1;
                geluL.appendChild(lis);
                //为li的onclick事件绑定方法
                //lis.onmouseover = liclick;//鼠标移到目标上；鼠标移进时
                lis.onclick = liclick;
            }
            //点击li的方法
            function  liclick() {
                var ds = this.innerHTML - 1;
               get("imgShow").src="image/"+  imageList[ds];
            }
        }
        window.onload = function () {
            //根据图片数组 动态生成 按钮
            gelButton();
         }
    </script>
</head>
<body>
    <div id="bodDIv">
        <img id="imgShow" src="image/t019b430cacfc2e1f04.jpg" width="460px" height="350px"/>
        <ul id="pageUL">
            <!--<li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>-->
        </ul>
        <div id="titDIv">标题在这里...</div>
    </div>
</body>
</html>

3.图片轮换加强版

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        #imgBox {
            border:1px solid #000;
            width:442px;
            margin:20px auto;
        }
        #imgBox ul {
            list-style-type:none;
            padding:0px;
            float:right;
            position:relative;
            top:-50px;
            right:10px;
        }
        #imgBox ul li {
            display:inline;
            color:#fff;
            border:1px solid #fff;
            padding:2px 5px;
            cursor:pointer;
        }
        #msgBox {
        text-align:center;
        }
        .redBg {
            background-color:red;
        }
        .normalBg {
            background-color:#000;
        }
    </style>
    <script type="text/javascript">
        var btns;
        var btnIndexNow;
        var timer;

        window.onload = function () {
            //新式浏览器语法：获取 ulBtns 对象的子节点里的 所有 li 对象
            btns = document.getElementById("ulBtns").getElementsByTagName("li");
            //var btns = document.getElementById("ulBtns").childNodes;
            for (var i = 0; i < btns.length; i++)
            {
                //alert(btns[i].nodeType);
                btns[i].onclick = changeImg;
            }
            btns[0].onclick();
            //开启计时器
            timer = setInterval(timeChange, 4000);
            //关闭计时器
            //clearInterval(timer);
        };

        function timeChange() {
            btnIndexNow++;
            if (btnIndexNow >= 4) btnIndexNow = 0;
            //alert(btnIndexNow);
            btns[btnIndexNow].onclick();
        }

        //切换 图片
        function changeImg() {
            btnIndexNow = parseInt(this.innerHTML) - 1;
            //修改 图片 路径
            document.getElementById("imgShow").src = "imgs/" + this.innerHTML + ".jpg";
            document.getElementById("msgBox").innerHTML = this.getAttribute("title");
            //设置 被点击 li标签的 class属性（注意：写做 className）
            this.className = "redBg";
            for (var i = 0; i < btns.length; i++)
            {
                if (this != btns[i])
                {
                    btns[i].className = "normalBg";
                }
            }
        }
    </script>
</head>
<body>
    <div id="imgBox">
        <img width="442" id="imgShow" src="imgs/1.jpg" />
        <ul id="ulBtns">
            <li title="刘德华35岁就挂了~~">1</li>
            <li title="刘德华36岁又复活了~~">2</li>
            <li title="我爱广州小蛮腰~~">3</li>
            <li title="it人要学会锻炼身体啊~~~~">4</li>
        </ul>
        <div id="msgBox"></div>
    </div>
</body>
</html>