文章标题

来源：互联网发布：淘宝男装店名大全编辑：程序博客网时间：2024/06/02 04:02

网页顶部和图片轮播

html页面

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>        <link rel="stylesheet" href="css/new_file.css" />    </head>    <body>        <div class='hide'>            <div class="content clearfix">                <div class="fr">                    <div class="h-fr">                        <a class="h-fr-top" href=''>登陆</a>                        <a class="h-fr-top2" href=''>注册</a>                    </div>                    <span class='line'></span>                    <div class="fr-downlond">                        <a class="fr-downlond-more">                            <span class='fr-downlond-more-icon'></span>                            下载 APP                        </a>                    </div>                </div>            </div>        </div>    <div class='content daohline'>        <div class='dah-logo line-block'>            <img width="123" height="45" src="img/下载.png"/>        </div>            <div class="line-block all-icon">                <div class="sos-icongo line-block"><img width="26" height="30" src="img/shop.png" /></div>                  <div class="sos-input line-block"><input type="text" placeholder="有双12 6点爆抢活动" /></div>                <div class="sos-iconso line-block"><img width="33" height="30" src="img/sou.png" /></div>                <div class="br"></div>            </div>    </div>        <div class="content img" id='img'>            <div class="all-img">                <div class="img-all">                    <a class="img-more" index='1'><img width="1080px" src="img/img1.jpg" /></a>                    <a class="img-more" index='2'><img width="1080px" src="img/img2.jpg" /></a>                    <a class="img-more" index='3'><img width="1080px" src="img/img3.jpg" /></a>                </div>                <button class='img_button1'><</button>                <button class='img_button2'>></button>            </div>        </div>        <script type="text/javascript" src="js/jquery.js"></script>        <script type="text/javascript" src="js/new_file.js"></script>    </body></html>

css样式

*{    margin: 0;    padding: 0;}.content{    width: 1080px;    margin: 0 auto;}.hide{    width:100%;    height: 48px;    background: #333;}.clearfix{    clear: both;}.fr-downlond,.h-fr,.head ul li,.img-more{    display: inline-block;}.fr{    font-family: "微软雅黑";    font-size: 15px;    float: right;}.h-fr{    height: 48px;    line-height: 48px;}.h-fr-top,.h-fr-top2{    padding-right:7px;    color: #e7e7e7;    text-decoration: none;}.line{    width: 1.5px;    margin: 6px;    height: 14px;    border-right:1px solid #666;}.fr-downlond{    margin-left:7px ;    color: #E7E7E7;}.head ul{    margin:24px auto;    margin-left: 10px;}.head ul li{    color: #333333;    font-size: 14px;    width: 63px;}.dis-more{    background: #E7E7E7;    position: absolute;    z-index:21;    height: 150px;    display: none;}.all-img{    overflow: hidden;    width: 1080px;    height: 450px;    position:relative;}.img_button1{    position: absolute;    top:225px;    left: 10px;    z-index: 11px;    display: inline-block;    margin: auto 0;}.img_button2{    position: absolute;    top:225px;    right:10px;    z-index: 11px;    display: inline-block;    margin: auto 0;}.img-all{    z-index: 10px;    overflow: hidden;    position:relative;    height:450px;    width: 3240px;}.img-more{    float: left;    width: 1080px;    height: 450px;    display: inline;}.dah-logo{    margin-top:26px;}.line-block{    display: inline-block;}.daohline{}

js文件

//图片轮播功能var changindex=0;        //定义图片数量及判断方法    var aa = setInterval(function (){        if(changindex<2){            changindex ++;        }else{            changindex = 0;        }        changTo(changindex);//进行图片显示传入移动值    },3000);$('.img_button2').click(function(){//左推进图片    console.log(changindex);    changindex = (changindex <2) ? (++changindex) : 0;    changTo(changindex);});$('.img_button1').click(function(){//又推进图片    console.log(changindex);    changindex = (changindex >0) ? (--changindex) : 2;    changTo(changindex);});//利用改变all-img的位置利用动画改变，和overflow属性。function changTo(num){    var leftgo=num*1080;    $(".img-all").animate({left:"-"+leftgo+"px"}, 500);} $('.head ul li').hover(show); $('.head ul li').mouseout(hide);

效果图
这里写图片描述

阅读全文

0 0