1. Um den Karusselleffekt des folgenden Bildes auf der Webseite zu erzielen, gibt es vier Bilder, jedes Bild hat einen eigenen Titel und dann gibt es ein kleines Kästchen in der unteren rechten Ecke. Bewegen Sie die Maus über das kleine Kästchen im Rahmen, um zum entsprechenden Bild zu wechseln.
2. Die äußerste Ebene ist der gesamte Container des Karussellbilds „slideShowContainer“ und die innere ist „picUl“. Wird zum Speichern von Bildern verwendet. Und „dotUl“ wird zum Anzeigen des kleinen Felds verwendet, und „titleDiv“ wird zum Speichern des Titels verwendet.
<em><div id="slideShowContainer"><br> <ul id="picUl"><br> <li><a href="#"><img src="img/lunbo1.jpg" alt=""/></a></li><br> <li><a href="#"><img src="img/lunbo2.jpg" alt=""/></a></li><br> <li><a href="#"><img src="img/lunbo3.jpg" alt=""/></a></li><br> <li><a href="#"><img src="img/lunbo4.jpg" alt=""/></a></li><br> </ul><br> <ul id="dotUl"><br> <li class="selected">1</li><br> <li class="unselected">2</li><br> <li class="unselected">3</li><br> <li class="unselected">4</li><br> </ul><br> <div id="titleDiv"><br> <span class="show"><a href="#">党政机关公务用车有了统一标识</a></span><br> <span class="hide"><a href="#">“洛阳创新”亮相第52届巴黎航展</a></span><br> <span class="hide"><a href="#">中国河洛乡愁摄影主题公园揭牌</a></span><br> <span class="hide"><a href="#">洛阳机场建成生态停车场</a></span><br> </div><br></div><br><br>3.然后是css中的样式<br></em>
#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;
}<em>4.通过js控制，动态修改相应的样式，达到图片轮播的效果<br></em>
/*图片轮播*/
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)
}
}Das obige ist der detaillierte Inhalt vonBeispielcode für die Verwendung von JS zur Implementierung eines Bildkarussells in HTML. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
