简单轮播图

来源：互联网发布：jira mac 破解版下载编辑：程序博客网时间：2024/06/04 19:09
<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <meta name="Keywords" content="关键字">    <meta name="Description" content="描述">    <title>T搜狐轮播图</title>    <script src="jquery.min.js"></script>    <style>        *{ margin: 0px; padding: 0px;}        div{ width: 930px; height:340px; position: relative; margin:60px  auto  0px; position: relative; }        div img{position: absolute; top: 0px; left: 0px; display: none; width: 100%; height: auto; }        .box img.dis{display: block}        .des{position: absolute; left: calc(50% - 200px);; bottom: 0px; width: 400px; height: 130px;background-color: #CC0000; opacity: 0.7;}        .des span{color: #fff; font-size: 12px; font-family: 微软雅黑; line-height: 20px;position: absolute; top: 0px; left: 0px;height: 100%; width: 100%; }        .des span.on{display: block}        .btn{            position: absolute;            bottom: -28px;            left: calc(50% - 200px);            width: 400px;            height: 28px;        }        .btn span{            width: 66px;            height: 28px;            color: #fff;            float: left;            background: #000;            margin-right: 1px;            text-align: center;            line-height: 28px;            font-family: 微软雅黑;            cursor: pointer;        }        .btn .bs{            width: 131px;            background:#C00;        }    </style>    <script>        $(function(){            //当鼠标滑入时将div的class换成divOver            var index;            $('.btn span').hover(function(){                index  = $(this).index();                $(this).addClass('bs').siblings().removeClass('bs');                $('.box img').eq(index).addClass('dis').siblings().removeClass('dis');                $('.des span').eq(index).addClass('on').siblings().removeClass('on');            });        });    </script></head><body><div class="box">    <img class="dis" src="image/1.jpg">    <img src="image/2.jpg">    <img src="image/3.jpg">    <img src="image/4.jpg">    <img src="image/1.jpg">    <div class="dic"></div>    <div class="des">        <span class="on">奥运会对于世界来说从1</span>        <span>奥运会对于世界来说从2</span>        <span>奥运会对于世界来说从3</span>        <span>奥运会对于世界来说从4</span>        <span>奥运会对于世界来说从5</span>    </div>    <div class="btn">        <span class="bs">1</span>        <span>2</span>        <span>3</span>        <span>4</span>        <span>5</span>    </div></div></body></html>
0 0