html中用JS实现图片轮播的实例代码

1.首先是效果图，要在网页中实现下图的轮播效果，有四张图片，每张图片有自己的标题，然后还有右下角的小方框，鼠标悬浮在小方框上，会切换到对应的图片中去。

2.先是HTML中的内容，最外层是轮播图整个的容器“slideShowContainer”，里边是用来装图片的“picUl”和用来显示小方框的“dotUl”，以及用来装标题的“titleDiv”。

DK企业网站管理系统1.1

后台路径网址+admin（请修改更安全）后台用户名密码admin产品定位：中小型企业，本系统简单实用，无冗余功能,无功能限制。后台功能：一、网站基本信息此功能允许您从后台设置网站的名称、联系人、电话、公司地址、版权、第三方统计代码等等常用信息。二、导航栏设置可以从后台调整导航栏显示项目，可以进行增加删除排序隐藏导航栏等操作三、幻灯设置可以从后台设置前台动画轮播图片，支持排序。四、单页功能用来设置公

下载

    

        
@@##@@

        
@@##@@

        
@@##@@

        
@@##@@

    

    

        
1

        
2

        
3

        
4

    

    

        党政机关公务用车有了统一标识
        “洛阳创新”亮相第52届巴黎航展
        中国河洛乡愁摄影主题公园揭牌
        洛阳机场建成生态停车场
    



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