前端案例分享：京东电梯式轮播

来源：互联网发布：php头部编码编辑：程序博客网时间：2024/05/20 18:49

前端案例分享：京东电梯式轮播

效果知识点：企业布局技巧，如何高效的编写CSS样式，常用选择器，基本标签，盒子模型，jquery类库调用，JS特效编写，JS编程思维等。

京东电梯式轮播源码：

<!doctype html><htmllang="en"><head><!--网站编码格式，UTF-8 国际编码，GBK或 gb2312 中文编码--><metacharset="UTF-8"><metaname="Keywords"content="关键词一，关键词二"><metaname="Description"content="网站描述内容"><title>Document</title><!--引用css js 文件的引入--><styletype="text/css">*{margin:0px;}/* 属性:值; 身高:1.7m; 颜色:红色; px像素*/#flash{width:670px;/*宽*/height:240px;/*高*/background:#cc99cc;/*背景颜色*/        margin:200pxauto 0px;        position:relative;/*相对定位*/overflow:hidden;/*超出部分隐藏*/}#flash .scroll{width:670px;height:2400px;                position:absolute;/*绝对定位*/left:0px;top:0px;}#flash .scroll img{display:block;/*块级*/}#flash ul.button{height:20px;width:144px;position:absolute;                bottom:20px;right:10px;}#flash ul.button li{list-style-type:none;/*去掉圆点*/width:20px;height:20px;background:#666;float:left;/*左浮动*/margin:0px2px;        color:#fff;text-align:center;/*水平距中*/font-size:12px;        line-height:20px;/*行高 文字竖直距中*/border-radius:10px;/*圆半径*/        box-shadow:2px2px 5px #000; }#flash ul.button li.hover{background:#cc3300;}</style></head><body><!--div 盒子模型，高度，宽度，放内容的长方形容器 姓名=“张三”--><divid="flash">    <!--图片滚动开始-->    <divclass="scroll">        <imgsrc="images/1.jpg" />        <imgsrc="images/2.jpg" />        <imgsrc="images/3.jpg" />        <imgsrc="images/4.jpg" />        <imgsrc="images/5.jpg" />        <imgsrc="images/6.jpg" />    </div>    <!--图片滚动结束-->    <!--按扭开始-->    <ulclass="button">        <liclass="hover">1</li>        <li>2</li>        <li>3</li>        <li>4</li>        <li>5</li>        <li>6</li>    </ul>    <!--按扭结束--></div><!--引用 jqeury　文件--><scripttype="text/javascript"src="js/jquery.js"></script><scripttype="text/javascript">    var_index=0;    varsetTime=null;    $("ul.button li").hover(function(){        clearInterval(setTime);//清处定时播放器        _index=$(this).index();        //alert(_index);        // 给添加　class="hover"        $(this).addClass("hover").siblings("li").removeClass("hover");        $(".scroll").animate({top:-(_index*240)},1000);    },function(){        autoPlay();//鼠标移开，调用自动播放    });    //自动轮播    functionautoPlay(){        setTime=setInterval(function(){            _index++;//序列号加 1            if(_index>5){_index=0;}//当播到最后一张时，回到第一张            $("ul.button li").eq(_index).addClass("hover").siblings("li").removeClass("hover");            $(".scroll").animate({top:-(_index*240)},1000);        },2000);            }    autoPlay();</script><!--    1、如何在页面当中构建一个有宽度，高度的长方形 （div盒子模型）    2、讲到了外边距的概念 margin, 解决了外边距的兼容型问题 *{margin:0px;}    3、利用外边距来控制长方形的位置 margin:上(200px) 左右(auto) 下(0px);    4、分析了动画实现原理（在 #flash)长方形里，构建了一个宽度一样大小，高度无限高的长方      形) 然后利用相对和绝对定位来实现他的动画原理    5、如何在页面当中插入一张图 <img src="地址"/>    6、处理了图片之间产生间隙的问题（display:block;） 超出部分内容隐藏 overflow:hidden;    7、讲ul无序列表标签 （去掉li的圆点，给li添加宽度和高度 利用把小长方形从竖直变成水平      控制文字大小，颜色　水平距中，竖直距中，利最新技术css3 把正方形变成圆形              border-radius:10px; 利用外边距产生兼距）--></body></html>

web前端学习群：575308719，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。

关注公众号→‘学习web前端’跟大佬一起学前端！

阅读全文

0 0