在網站建設中，焦點圖是非常常見的元素之一，它可以通過展示圖片或者文字的形式，吸引用戶的眼球，引導用戶瀏覽網站。然而，常規的焦點圖只能展示一張或者少量的圖片或文字，這顯然不能滿足用戶和網站管理者的需求。在本篇文章中，我們將介紹使用div+css實現多張焦點圖切換的方法。

首先，我們需要在頁面中創建一個div元素，用作整個焦點圖容器。在這個容器中，我們可以依次添加幾張圖片或文字元素，用于展示不同的內容。關于這些元素的布局和樣式，可以根據自己的需求進行調整。

<div class="slider">
<ul class="slider-wrapper">
<li class="slider-item"><img src="image1.jpg"></li>
<li class="slider-item"><img src="image2.jpg"></li>
<li class="slider-item"><img src="image3.jpg"></li>
<li class="slider-item"><img src="image4.jpg"></li>
</ul>
</div>

接下來，我們編寫css樣式，用于實現焦點圖的輪播效果。在這里，我們使用絕對定位和opacity屬性實現元素的交替顯示和隱藏。具體來說，我們定義一個slider-item類，用于對每個圖片（或文字）元素進行設置。我們通過設置position:absolute屬性和left/right/top/bottom值，將這些元素疊加在一起，并且將display:none屬性設置為默認值，使得每個元素都不可見。然后，我們借助slider-active類，用于顯示當前的元素，并通過設置opacity屬性，實現漸變效果。

.slider {
position: relative;
overflow: hidden;
width: 100%;
height: 500px;
}
.slider-item {
position: absolute;
left: 0;
top: 0;
opacity: 0;
transition: opacity ease-in-out 0.5s;
}
.slider-active {
opacity: 1;
z-index: 1;
transition: opacity ease-in-out 0.5s;
display: block;
}
.slider-item:not(.slider-active) {
z-index: 0;
display: none;
}

最后，我們編寫JavaScript代碼，用于實現焦點圖的自動切換。在這里，我們定義了一個變量index，用于記錄當前顯示的元素的下標。通過設置setInterval函數定時執行switchSlider函數，來實現對index變量的自增，并根據其值切換對應的元素。需要注意的是，我們需要對index進行取模操作，以避免index越界。

var sliderItems = document.querySelectorAll('.slider-item');
var index = 0;
setInterval(switchSlider, 3000);
function switchSlider() {
sliderItems[index].classList.remove('slider-active');
index = (index + 1) % sliderItems.length;
sliderItems[index].classList.add('slider-active');
}

如此，我們就能夠輕松地實現一個基于div+css的多張焦點圖切換效果了。當然，這只是一個簡單的示例，實際上，我們還可以根據自己的需求，對樣式和JavaScript代碼進行更加復雜和細致的優化。