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

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

fa213d5605ebf3436748de1ed80a7d58.png

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

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)

}

}

  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

表情包
插入表情
评论将由博主筛选后显示,对所有人可见 | 还能输入1000个字符
©️2021 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值