欧美成人AA一区二区,人妻丝袜在线

輪播圖是一種如此美麗的存

——來自一只小白的一次記錄
··· 有人說，知道的越多，生活也就越?jīng)]意思？就像你學(xué)了html/css/js等等以后，當(dāng)你看到網(wǎng)頁，你首先想到的是它的結(jié)構(gòu)，用什么樣的方法敲出來的，而不再是細(xì)細(xì)感受它的美，也就失去很多樂趣。我卻不這樣想。
··· 一直以來都覺得輪播圖是一種多么美麗的存在，或清新或萌寵，總能一下子吸引到我。學(xué)了幾天輪播圖，有點(diǎn)愛上它。有迷一樣的自信覺得不久的將來自己也能寫一波輪播圖，讓自己成為那種為創(chuàng)造美的并具有技能的人。未來也有曾經(jīng)似我一般的迷妹迷弟深深迷戀我的作品（哇咔咔~）
···好了言歸正傳：

總體結(jié)構(gòu)

首先是一個(gè)大的框架，用相對(duì)定位、絕對(duì)定位把它們的位置都固定下來，注意前后關(guān)系，可以在樣式中設(shè)置z-index值

<div>  大的div
       <div>左右按鈕</div>
       <div>圖片</div>
       <div>小圓圈</div>
</div>

這里要說一下，輪播圖里主要用到的知識(shí)。
（1）動(dòng)畫：輪播主要肯定就是動(dòng)，這里用到的是左右線性移動(dòng)，可以通過數(shù)學(xué)公式控制，我們把動(dòng)畫過程封裝成函數(shù)，操作起來就很方便了。
（2）定時(shí)器：用于自動(dòng)輪播，想你在逛某寶首頁的時(shí)候見得最多啦不需要人為操作他會(huì)給你自動(dòng)播放，時(shí)間多長你說了算。
（3）鼠標(biāo)事件：實(shí)現(xiàn)鼠標(biāo)點(diǎn)擊，離開等等一系列操作時(shí)，頁面按照你的想法來操作，比如某寶首頁自動(dòng)輪播你看到感興趣的可以鼠標(biāo)放上去讓它停下，不想看了放開讓它繼續(xù)輪播等等。

各部分簡單說明

1.主題圖片

這是輪播圖比較難也是最重要的部分，我們輪播的就是圖片嘛。主要通過控制圖片div的 left值，來移動(dòng)，一次性移動(dòng)的距離即一張圖片的寬度。為了實(shí)現(xiàn)無縫輪播，我們會(huì)把最后一張克隆放到末尾。要注意，動(dòng)畫時(shí)間應(yīng)該小于定時(shí)器的時(shí)間間隔，防止出現(xiàn)混輪，這又稱為間歇輪播，有一個(gè)停頓的時(shí)間

2.左右按鈕

實(shí)現(xiàn)點(diǎn)擊事件，點(diǎn)擊之后，先讓原來的圖片淡出，下一張圖片淡入（淡入淡出用透明度控制），與此同時(shí)讓小圓圈也左（右）移一個(gè)，實(shí)現(xiàn)同步。這里需要注意的是，點(diǎn)擊之后先用函數(shù)截流做判斷如 if(lis[idx].isanimated) return; 防止出現(xiàn)混亂。

小圓圈

小圓圈的實(shí)現(xiàn)則通過遍歷每一個(gè) li 節(jié)點(diǎn)，每一次點(diǎn)擊，先用排他模型，將所有的圓圈變暗，再將點(diǎn)擊的圈圈變亮即可。這里我們通過css樣式控制比較方便。在css中設(shè)置2個(gè)class名對(duì)應(yīng)2種樣式，一個(gè)隱藏，一個(gè)顯示。排他的將class名更改就輕松很多啦。這里同樣需要用函數(shù)截流。

代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        .carousel{
            width: 560px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #333;
            position: relative;
        }
        .carousel ul{
            list-style: none;
        }
        .carousel ul li{
            position: absolute;
            top: 0;
            left: 0;
            opacity: 0;
            filter:alpha(opacity = 0);
        }
        .carousel ul li.first{
            opacity: 1;
            filter:alpha(opacity = 0);
        }
        .btns a{
            position: absolute;
            width: 40px;
            height: 40px;
            top: 50%;
            margin-top: -20px;
            background-color: orange;
            font-size: 30px;
            line-height: 40px;
            text-align: center;
            border-radius: 50%;
            font-weight: bold;
            cursor: pointer;
            z-index: 999;
        }
        .btns a:hover{
            background-color: gold;
        }
        .leftBtn{
            left: 10px;
        }
        .rightBtn{
            right: 10px;
        }
        .circles{
            position: absolute;
            width: 150px;
            height: 16px;
            bottom: 10px;
            right: 10px;
        }
        .circles ol{
            list-style: none;
        }
        .circles ol li{
            float: left;
            width: 16px;
            height: 16px;
            background-color: orange;
            margin-right: 6px;
            border-radius: 50%;
            cursor: pointer;
        }
        .circles ol li.cur{
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="carousel" id="carousel">
        <div class="btns">
            <a class="leftBtn"  id="leftBtn"></a>
            <a class="rightBtn" id="rightBtn"></a>
        </div>
        <div class="imageslist" id="imageslist">
            <ul>
                <li class="first"><a>![](images/0.jpg)</a></li>
                <li><a>![](images/1.jpg)</a></li>
                <li><a>![](images/2.jpg)</a></li>
                <li><a>![](images/3.jpg)</a></li>
                <li><a>![](images/4.jpg)</a></li>
            </ul>
        </div>
        <div class="circles" id="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
    
    <script type="text/javascript" src="animate-2.0.1.js"></script>
    <script type="text/javascript">
        //得到carousel
        var carousel = document.getElementById("carousel");
        //得到li
        var lis = document.getElementById("imageslist").getElementsByTagName("li");
        //得到按鈕
        var leftBtn = document.getElementById("leftBtn");
        var rightBtn = document.getElementById("rightBtn");
        //得到小圓點(diǎn)
        var circlesLi = document.getElementById("circles").getElementsByTagName("li");
        //圖片數(shù)量
        var imgLength = lis.length;
        //圖片寬度
        var width = 560;
        //滾動(dòng)速度
        var animatetime = 300;
        //緩沖描述
        var tween = "Linear";
        //間隔時(shí)間
        var interval = 2000;
         
        var idx = 0;


        //自動(dòng)輪播
        var timer = setInterval(rightBtnHandler,interval);
        //鼠標(biāo)進(jìn)入停止
        carousel.onmouseover = function(){
            clearInterval(timer);
        }
        //鼠標(biāo)離開開始
        carousel.onmouseout = function(){
            timer = setInterval(rightBtnHandler,interval);
        }
        
        //右按鈕的監(jiān)聽
        rightBtn.onclick = rightBtnHandler;

        function rightBtnHandler(){
            //函數(shù)截流
            if(lis[idx].isanimated) return;

            //原來的信號(hào)量的圖片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信號(hào)量改變
            idx++;
            if(idx > imgLength - 1){
                idx = 0;//到最后一張（不包括克隆用于過渡的）時(shí)跳到第一張
            }
            //新信號(hào)量的圖片淡入
            animate(lis[idx],{"opacity" : 1},1000);

            changeCircle();
        }

        //左按鈕的監(jiān)聽
        leftBtn.onclick = function(){
            //函數(shù)截流：讓一個(gè)函數(shù)無法在很短的時(shí)間間隔內(nèi)連續(xù)調(diào)用,只有當(dāng)上一次函數(shù)執(zhí)行后過了你規(guī)定的時(shí)間間隔
            if(lis[idx].isanimated) return;

            //原來的信號(hào)量的圖片淡出
            animate(lis[idx],{"opacity" : 0},1000);
            //信號(hào)量改變
            idx--;
            if(idx < 0){
                idx = imgLength - 1;
            }
            //新信號(hào)量的圖片淡入
            animate(lis[idx],{"opacity" : 1},1000);

            changeCircle();
        }

        //批量添加小圓點(diǎn)的監(jiān)聽
        for(var i = 0 ; i <= imgLength - 1 ; i++){
            circlesLi[i].index = i; //先編號(hào)
            circlesLi[i].onclick = function(){
                //截流
                if(lis[idx].isanimated) return;
                
                //原來的信號(hào)量的圖片淡出
                animate(lis[idx],{"opacity" : 0},1000);
                //信號(hào)量改變
                idx = this.index;
                //新信號(hào)量的圖片淡入
                animate(lis[idx],{"opacity" : 1},1000);

                changeCircle();
            }
        }


        //更換小圓點(diǎn)函數(shù)
        function changeCircle(){
            //去掉所有小圓點(diǎn)的cur（排他模型）
            for (var i = 0; i < circlesLi.length; i++) {
                circlesLi[i].className = "";
            }
            //第idx信號(hào)量這個(gè)小圓點(diǎn)加cur
            circlesLi[idx].className = "cur";
        }
    </script>
</body>
</html>

是不是驚到了？小小的一組輪播圖，居然要碼這么多的代碼哈哈哈
這里也可以簡化，把所以css代碼也封裝到css文件，那么代碼可以簡化。
說明：
連接css代碼：
<link rel="stylesheet" type="text/css" href="allcss.css"></style>

連接js代碼：
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript" src="all.js"></script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>Document</title>
<link rel="stylesheet" type="text/css" href="allcss.css"></style>
</head>
<body>
    <div class="carousel" id="carousel">
        <div class="btns">
            <a class="leftBtn"  id="leftBtn"></a>
            <a class="rightBtn" id="rightBtn"></a>
        </div>
        <div class="imageslist" id="imageslist">
            <ul>
                <li class="first"><a>![](images/0.jpg)</a></li>
                <li><a>![](images/1.jpg)</a></li>
                <li><a>![](images/2.jpg)</a></li>
                <li><a>![](images/3.jpg)</a></li>
                <li><a>![](images/4.jpg)</a></li>
            </ul>
        </div>
        <div class="circles" id="circles">
            <ol>
                <li class="cur"></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
        </div>
    </div>
<script type="text/javascript" src="animate-2.0.1.js"></script>
<script type="text/javascript" src="all.js"></script>   
</body>
</html>

這樣看起來是不是簡單多了？
把代碼封裝起來，方便管理維護(hù)，并且可以多次使用，多次使用時(shí)只需要加載一次。建立自己的一個(gè)代碼庫是我最近開始做，并且希望能堅(jiān)持做下去的事情，用得多了，不就的將來也許就可以分分鐘get的封裝代碼的技能！
I am coming!

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

輪播圖是一種美麗的存在

輪播圖是一種美麗的存在

輪播圖是一種如此美麗的存

總體結(jié)構(gòu)

各部分簡單說明

1.主題圖片

2.左右按鈕

小圓圈

代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

輪播圖是一種美麗的存在

輪播圖是一種如此美麗的存

總體結(jié)構(gòu)

各部分簡單說明

1.主題圖片

2.左右按鈕

小圓圈

代碼

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av