使用js製作一般網站首頁圖片輪播效果

-Advertisement-

具體效果我是仿照hao123導航頁面圖片輪播的效果，大家可以去那個網站參考 ...

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>圖片輪播</title>
    <style>
        .warp{
            width: 600px;
            height: 750px;
            position: relative;
            margin:30px auto 0;
            overflow: hidden;
        }
        #box{
            width: 600px;
            height: 750px;
            position: absolute;
            top: 0px;
            left: 0px;
            overflow: hidden;
            /*overflow-x:auto;*/
        }
        #box #con{
            width: 6000px;
            height: 750px;
            overflow: hidden;
        }
        #con img{
            float: left;
            width: 600px;
            height: 750px;
        }
        #btnL{
            position: absolute;
            left: 0px;
            top: 366px;
            width: 36px;
            height: 36px;
            background: url(images/btnL.png) 0 0 no-repeat;
            cursor: pointer;
        }
        #btnR{
            position: absolute;
            right: 0px;
            top: 366px;
            width: 36px;
            height: 36px;
            background: url(images/btnR.png) 0 0 no-repeat;
            cursor: pointer;
        }
        #num{
            position: absolute;
            bottom: 10px;
            left: 148px;
            overflow: hidden;
            list-style: none;
        }
        #num li{
            float: left;
            margin:0 5px;
            font-size: 16px;
            line-height: 25px;
            height: 25px;
            width: 25px;
            background: #ccc;
            text-align: center;
            cursor: pointer;
        }
        #num li.select{
            background-color: green;
            color: white;
        }
    </style>
</head>
<body>
    <div class="warp">
        <div id="box">
            <div id="con">
                <img src="images/meinv1.jpg" alt="">
                <img src="images/meinv2.jpg" alt="">
                <img src="images/meinv3.jpg" alt="">
                <img src="images/meinv4.jpg" alt="">
                <img src="images/meinv5.jpg" alt="">
                <img src="images/meinv6.jpg" alt="">
            </div>
        </div>
        <div id="btnL"></div>
        <div id="btnR"></div>
        <ul id="num">
            <li class="select">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
    <script>
        var box=document.getElementById('box');
        var con=document.getElementById('con');
        var imgs=con.getElementsByTagName('img');
        var btnL=document.getElementById('btnL');
        var btnR=document.getElementById('btnR');
        var num=document.getElementById('num');
        var lis=num.getElementsByTagName('li');
        var timer1=null,timer2=null;
        var imgw=imgs[0].clientWidth;
        var x=0;
        function imgScroll(){//圖片切換
          var start=box.scrollLeft;
            var end=imgw*x;
            var change=end-start;
            var minstep=0;
            var maxstep=30;
            var stepLength=change/maxstep;
                clearInterval(timer2);
                timer2=setInterval(function(){
                    minstep++;
                    // console.log(minstep);
                    if (minstep>=maxstep) {
                        clearInterval(timer2);
                    }
                    start+=stepLength;
                    box.scrollLeft=start;
                },20)    
                for (var i = 0; i < lis.length; i++) {
                    lis[i].className='none';
                }
                lis[x].className='select';
        }
        function move(){//預設向左每隔3s滾動
            clearInterval(timer1);
            timer1=setInterval(function(){
                x++;
                if (x>=imgs.length) {
                    x=0;
                }
              imgScroll();
              for (var i = 0; i < lis.length; i++) {
                  lis[i].className='none';
                  lis[x].className='select';
              }
                },3000);
            }
        move();//啟動預設滾動函數；
        btnR.onclick=function(){
            clearInterval(timer1);
            x++;
            if (x>=imgs.length) {
                x=0;
            }
          imgScroll();
          move();
        }
        btnL.onclick=function(){
            clearInterval(timer1);
            x--;
            if (x<0) {
                x=imgs.length-1;
            }
          imgScroll();
            move();
        }
        for (var i = 0; i < lis.length; i++) {
            lis[i].index=i;
            lis[i].onclick=function(){
                x=this.index;
                imgScroll();
                move();
            }
        }

    </script>
</body>
</html>

具體效果我是仿照hao123導航頁面圖片輪播的效果，大家可以去那個網站參考

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

tomcat中的URL參數為中文，servlet接收後顯示亂碼

URL中參數的值為中文時，servlet接收後顯示為亂碼，如下圖：這時候需要修改tomcat的中的server.xml文件。該文件路徑為 tomcat安裝目錄下的conf文件夾。為修改前的server.xml文件。修改後的server.xml文件。增加了一行： URIEncoding="UTF ...
css判斷不同解析度顯示不同寬度佈局實現自適應寬度

一、CSS DIV網頁佈局中當解析度小於等於1024px（像素）時，DIV佈局對象顯示1000px寬度，當解析度大於1024px時候顯示1200px寬度等需求。使用CSS實現改變瀏覽器顯示寬度從而實現佈局的網頁寬度動態改變變化（網頁寬度自動隨瀏覽器顯示寬度而變寬變窄）。隨著發展，越來越多的電腦用戶顯 ...
sass高級語法

github地址:https://github.com/lily1010/sass/tree/master/course03 用到的sass語法是: sass --watch test.scss:test.css --style expanded 如下圖: 1 導入外部文件,預設文件尾碼預設是sas ...
簡單的使用鍵盤控制方塊移動

...
簡單的碰壁反彈效果

可以使用js來實現簡單的碰壁反彈效果，具體的內容請大家參考代碼部分。其中movex和movey兩個變數是判斷運動的方向。 ...
HTML <a> 標簽

一，定義和用法所有瀏覽器都支持 <a> 標簽。 <a> 標簽定義超鏈接，用於從一張頁面鏈接到另一張頁面。 <a> 元素最重要的屬性是 href 屬性，它指示鏈接的目標。在所有瀏覽器中，鏈接的預設外觀是：未被訪問的鏈接帶有下劃線而且是藍色的已被訪問的鏈接帶有下劃線而且是紫色的活動鏈接帶有下劃 ...
將一串字元串轉變為駝峰樣式（字元串練習）

一些簡單的字元串操作，歡迎大家參考學習。 ...
js控住DOM實現發佈微博簡單效果

這段代碼的效果具體是輸入標題和內容，點擊發佈把消息發佈出去，並使最新的消息始終在內容的最上面，代碼為：這段代碼主要運用了一些DOM節點操作的知識，純屬學習之餘練手作品，大家可以參考參考。 ...