首頁  >  文章  >  web前端  >  教你寫出京東電梯式輪播

教你寫出京東電梯式輪播

一个新手
一个新手原創
2017-09-09 10:21:581417瀏覽

效果知識點:企業佈局技巧,如何高效的編寫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>
<!--p 盒子模型,高度,宽度,放内容的长方形容器 姓名=“张三”-->
<pid="flash">
    <!--图片滚动开始-->
    <pclass="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" />
    </p>
    <!--图片滚动结束-->
    <!--按扭开始-->
    <ulclass="button">
        <liclass="hover">1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
    </ul>
    <!--按扭结束-->
</p>
<!--引用 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、如何在页面当中构建一个有宽度,高度的长方形 (p盒子模型)
    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>

 

最後給程式員幾點建議:

1、沒有所謂的「最好的語言」某些語言和工具只是在解決特定對應的問題時比其它的要好一點。當學習新的語言的時候,不要試著把你過去的思考模式帶到新的語言系統。相應地,我們應該學會如何更「地道」用新語言程式設計。

 

2、放鬆心態、保持「單純」程式設計是一個巨大的樂高積木集合,充滿了各種需要被解決的有趣的問題。為了深入弄清楚其中的構造,花時間去編寫有趣的程序,將比給你任何任命都要有趣的多。

 

3、最棒的程式設計師總是在工作之外自己也一直嘗試程式設計。如果你真的非常喜歡且擅長這樣,你將永遠不會失業。

 

4、卡殼的時候,在紙上寫下你的程式。我是認真的。這非常神奇,是在程式設計競賽中的標準訓練模式。 (我認為這個方法有效的原因是,當你不必花費精力去考慮文法的時候,你會有更多的精力去思考問題的本質和如何解決它)。

以上是教你寫出京東電梯式輪播的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn