zoukankan      html  css  js  c++  java
  • js图片轮播

    <html>
    <head>
    <meta charset="utf-8"/>
    <title>图片滚动</title>
    <style>
    *{margin:0px;padding:0px;font-size:14px;}
    .tpLunbo{position:relative;list-style-type:none;height:240px;922px;}
    .tpLunbo ul li{position:absolute;heiht:240px;withd:922px;left:0px;top:0px;display:none;}
    .LunBo ul li.CurrentPic { display: block;}
    .tpLunbo img{922px;;height:240px;}
    .lunboPage {position: absolute;right:1px;bottom:1px; 50px;text-align:right;background-color: #006058;padding-left:10px;float:right;}
    .lunboPage span {height: 15px; 10px;display: block;line-height: 20px;text-align: center;margin-top: 5px;margin-bottom: 5px;float: left;cursor:pointer;}
    .CurrentPage { background-color: #009991;}
    </style>
    <script src="jquery-1.8.3.min.js"></script>
    </head>
    <body>
    <div class="tpLunbo">
    <ul>
    <li class="CurrentPic"><img src="1.jpg"/></li>
    <li><img src="2.jpg"/></li>
    <li><img src="3.jpg"/></li>
    </ul>
    <div class="lunboPage">
    <span class="CurrentPage">1</span>
    <span>2</span>
    <span>3</span>
    </div>
    </div>
    </body>
    <script type="text/javascript" language="javascript">
    var PicTotal = 5;
    var CurrentIndex;
    var ToDisplayPicNumber = 0;
    $(".lunboPage span").click(DisplayPic);
    function DisplayPic() {
    CurrentIndex = $(this).index();// 测试是父亲的第几个儿子
    $(this).parent().children().removeClass("CurrentPage")// 删除所有同级兄弟的类属性
    $(this).addClass("CurrentPage");// 为当前元素添加类
    var Pic = $(this).parent().parent().children("ul");
    $(Pic).children().hide();// 隐藏全部图片
    $(Pic).children("li").eq(CurrentIndex).show();// 显示指定图片
    }
    function PicNumClick() {
    $(".lunboPage span").eq(ToDisplayPicNumber).trigger("click");
    ToDisplayPicNumber = (ToDisplayPicNumber + 1) % PicTotal;
    setTimeout("PicNumClick()",1000);
    }
    setTimeout("PicNumClick()",1000);
    </script>
    </html>

         </body>

    </html>

  • 相关阅读:
    websocket协议解决消息发送问题 Could not decode a text frame as UTF-8.
    成功解决internal/modules/cjs/loader.js:596 throw err; ^ Error: Cannot find module 'minimatch'
    FastDFS客户端与自定义文件存储系统
    fastdfs 中client.conf 文件
    centos 中 redis 的安装
    redis安装成功后get: command not found
    Shell基础知识(二)
    Shell基础知识(一)
    binary search模板总结
    配置远程jupyter notebook
  • 原文地址:https://www.cnblogs.com/hcw136156133/p/4065502.html
Copyright © 2011-2022 走看看