Example code for using JS to implement image carousel in html

1. The first is the rendering. To achieve the carousel effect of the following picture on the web page, there are four pictures, each picture has its own title, and then there is a small box in the lower right corner. Hover the mouse over the small box. On the frame, it will switch to the corresponding picture.

2. The first is the content in HTML. The outermost layer is the entire container of the carousel image "slideShowContainer", and the inside is "picUl" used to hold pictures. And "dotUl" is used to display the small box, and "titleDiv" is used to hold the title.

<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)
    }
}

The above is the detailed content of Example code for using JS to implement image carousel in html. For more information, please follow other related articles on the PHP Chinese website!