>  기사  >  웹 프론트엔드  >  JS를 사용하여 HTML에서 이미지 캐러셀을 구현하는 예제 코드

JS를 사용하여 HTML에서 이미지 캐러셀을 구현하는 예제 코드

零下一度
零下一度원래의
2017-06-28 09:38:574830검색

1. 첫 번째는 웹 페이지에 다음 그림의 회전식 효과를 구현하기 위한 그림 4개가 있고 각 그림에는 고유한 제목이 있으며 오른쪽 하단에 작은 상자가 있습니다. 을 작은 상자 위로 가져가면 해당 그림으로 전환됩니다.

2 그리고 "titleDiv"는 제목을 담습니다.

rreee
<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>

위 내용은 JS를 사용하여 HTML에서 이미지 캐러셀을 구현하는 예제 코드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.