當(dāng)前位置：首頁(yè) > 编程资源 > 综合教程 >内容正文

综合教程

html轮播效果的实现

發(fā)布時(shí)間：2024/8/5 综合教程 38 生活家

生活随笔收集整理的這篇文章主要介紹了 html轮播效果的实现小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

要實(shí)現(xiàn)如下圖的效果

點(diǎn)擊可以選擇圖片；不點(diǎn)擊的時(shí)候自動(dòng)輪播；并且點(diǎn)擊完后再次自動(dòng)輪播。

思路：如同在房子里透過(guò)窗子看路過(guò)的火車一樣，窗子是不動(dòng)的，但火車是陸續(xù)經(jīng)過(guò)窗子的，所以透過(guò)窗子可以看到依次看完所有的火車。

1. 讓將圖片排成一列“火車”：ul中l(wèi)i（li中放著輪播圖片）漂浮起來(lái)后，就排列成一溜了

2. 要有一個(gè)“窗口”，把“火車”放到“窗口”里：設(shè)置div的固定長(zhǎng)度，使它寬度等于ul中一個(gè)li的寬度

3. 讓“火車”動(dòng)起來(lái)：利用margin-left樣式可以選擇要在“窗口”顯示的圖片。

代碼如下：

<!DOCTYPE html>
<html>
<head>
<title>圖片輪播效果</title>
<link rel="stylesheet" type="text/css" href="./css/reset.css" />
<style>
.container{
    width:100%;
    margin:0 auto;
}
/* 輪播容器 */
.img_wrap{
    width:440px;
    height:440px;
    margin:0 auto;
    position:relative;
}
.img_wrap ul li{
    float:left;
}
/* 輪播索引 */
.img_wrap .img_index{
    position:absolute;
    right:20px;
    bottom:20px;
}
.img_wrap .img_index ul li{
    width:16px;
    height:16px;
    background:gray;
    border-radius:8px;
    cursor:pointer;
    margin-right:4px;
}
.img_wrap .img_index ul li.on{
    background:#fd4b4b;    
}
/* 輪播圖片容器 */
.img_wrap .img_lunbo{
    width:440px;
    height:440px;
    overflow:hidden;

}
</style>

<script>
window.onload = function(){
    var currentIndex = 1; //當(dāng)前索引
    var time = 2000; //時(shí)間間隔
    var length = 5; //幾個(gè)索引
    var timer = null; //定時(shí)器
    indexBindClick();
    //自動(dòng)輪播
    autoPlay();
    
    //給索引綁定事件
    function indexBindClick(){
        var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");
        for(var i=0; i<lis.length; i++){
            lis[i].onclick = function(){
                //換圖片顯示
                currentIndex = getIndex(this);
                clearInterval(timer);
                showImg();
                autoPlay();
            };
        }
    }
    function autoPlay(){
        timer = setInterval(function(){
            showImg();
            currentIndex++;
        },time);
    }
    //顯示圖片
    function showImg(){
        if(currentIndex >= 5){
            currentIndex = 0;
        }
        //改變小圖標(biāo)樣式
        var lis = document.getElementsByClassName("img_index")[0].getElementsByTagName("li");
        for(var j=0; j<lis.length; j++){
            lis[j].className = "";
        }
        lis[currentIndex].className = "on";

        //顯示當(dāng)前圖片
        var ul = document.getElementsByClassName("img_lunbo")[0].getElementsByTagName("ul")[0];
        var li_width = ul.getElementsByTagName("li")[0].scrollWidth;
        var marginLeft = -currentIndex * li_width;
        ul.style.marginLeft = marginLeft + "px";
    }
    
    /* 獲取對(duì)象在父節(jié)點(diǎn)中索引 */
    function getIndex(obj){
        var children = obj.parentNode.children;
        for(var i=0; i<children.length; i++){
            if(children[i] == obj){
                return i;
            }
        }
    }
};
</script>
</head>

<body>
<div class="container">
<div class="img_wrap">
    <div class="img_index">
        <ul>
            <li class="on"></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div>
    <div class="img_lunbo">
        <ul>
            <li><img src="./images/lunbo1.jpg" /></li>
            <li><img src="./images/lunbo2.jpg" /></li>
            <li><img src="./images/lunbo3.jpg" /></li>
            <li><img src="./images/lunbo4.jpg" /></li>
            <li><img src="./images/lunbo5.jpg" /></li>
        </ul>
    </div>
</div>
</div>
</body>
</html>

reset.css初始化代碼和圖片要自己準(zhǔn)備。

總結(jié)

以上是生活随笔為你收集整理的html轮播效果的实现的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。

html
效果