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 중국어 웹사이트의 기타 관련 기사를 참조하세요!