1.首先是效果圖，要在網頁中實現下圖的輪播效果，有四張圖片，每張圖片有自己的標題，然后還有右下角的小方框，鼠標懸浮在小方框上，會切換到對應的圖片中去。

2.先是HTML中的內容，最外層是輪播圖整個的容器“slideShowContainer”，里邊是用來裝圖片的“picUl”和用來顯示小方框的“dotUl”，以及用來裝標題的“titleDiv”。

<div id="slideShowContainer"><ul id="picUl"><li><a href="#"><img src="img/lunbo1.jpg" alt=""/></a></li><li><a href="#"><img src="img/lunbo2.jpg" alt=""/></a></li><li><a href="#"><img src="img/lunbo3.jpg" alt=""/></a></li><li><a href="#"><img src="img/lunbo4.jpg" alt=""/></a></li></ul><ul id="dotUl"><li class="selected">1</li><li class="unselected">2</li><li class="unselected">3</li><li class="unselected">4</li></ul><div id="titleDiv"><span class="show"><a href="#">黨政機關公務用車有了統一標識</a></span><span class="hide"><a href="#">“洛陽創新”亮相第52屆巴黎航展</a></span><span class="hide"><a href="#">中國河洛鄉愁攝影主題公園揭牌</a></span><span class="hide"><a href="#">洛陽機場建成生態停車場</a></span></div> </div>3.然后是css中的樣式 #slideShowContainer{width: 425px;height: 325px;margin-top: 10px;margin-left: 10px;overflow: hidden;position: relative; } #slideShowContainer img{width: 425px;height: 325px;transition: all 0.6s; } #slideShowContainer img:hover{transform: scale(1.07); } #picUl{list-style: none; } #dotUl{　　　　list-style: none;display: flex;flex-direction: row;position: absolute;　　//使用絕對布局，固定于左下角right: 21px;bottom: 15px;z-index: 2;　　//通過設置z-index的值大于#titleDiv中z-index的值，使其浮在標題欄的上方 } #titleDiv{position: absolute;width: 100%;height: 42px;bottom: 0px;left: 0px;background-color: #000000;opacity:0.6;　　//設置透明度，實現標題欄半透明效果z-index: 1; } #titleDiv>span{line-height: 42px;color: #FFFFFF;margin-left: 20px;width: 270px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap; } #titleDiv>span>a{color: #FFFFFF; } .selected{width: 12px;height: 12px;background-color: #FFFFFF;color: transparent;margin-left: 9px; } .unselected{width: 12px;height: 12px;background-color: #0069AD;color: transparent;margin-left: 9px; } .hide{display: none; } .show{display: block; } 4.通過js控制，動態修改相應的樣式，達到圖片輪播的效果 /*圖片輪播*/ var slideShowContainer = document.getElementById("slideShowContainer"); var pic = document.getElementById("picUl").getElementsByTagName("li"); var dot = document.getElementById("dotUl").getElementsByTagName("li"); var title = document.getElementById("titleDiv").getElementsByTagName("span"); var index = 0; var timer = null; /*定義圖片切換函數*/ function changePic (curIndex) {for(var i = 0;i < pic.length;++i){pic[i].style.display = "none";dot[i].className = "unselected";title[i].className = "hide"}pic[curIndex].style.display = "block";dot[curIndex].className = "selected";title[curIndex].className = "show"; } /*index超出圖片總量時歸零*/ function autoPlay(){if(+index >= pic.length){index = 0;}changePic(index);index++; } /*定義并調用自動播放函數*/ timer = setInterval(autoPlay,1500); /*鼠標劃過整個容器時停止自動播放*/ slideShowContainer.onmouseover = function(){clearInterval(timer); } /*鼠標離開整個容器時繼續播放下一張*/ slideShowContainer.onmouseout = function(){timer = setInterval(autoPlay,1500); } /*遍歷所有數字導航實現劃過切換至對應的圖片*/ for(var i = 0;i < dot.length;i++){dot[i].onmouseover = function(){clearInterval(timer);index = this.innerText-1;changePic(index)} }

?

轉載：https://www.cnblogs.com/wangxinqiang1995/p/7085120.html

總結

以上是生活随笔為你收集整理的html中使用JS实现图片轮播效果的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。