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)
}
}
以上就是html中用js实现图片轮播的实例代码的详细内容。