html中使用JS实现图片轮播效果

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

转载：https://www.cnblogs.com/wangxinqiang1995/p/7085120.html

html中使用JS实现图片轮播效果相关推荐

JS实现图片轮播效果（自动和手动）
本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换 3.底下小按钮切换 ps:由于很多同志反馈无法总有各种奇怪的情况,所以有需要的直接下载整个工程:JS ...
html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果图片轮播效果: 会自动向左 || 向右切换图片能手动点击按钮切换图片多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
2个js实现图片轮播效果（用）
第一个(使用) 不过要注意在web.config中将该location的位置的访问权限设为allow user="*",设置了deny user="?"或&qu ...
纯js制作图片轮播效果
好久没有发博客了,最近都在复习,为了找工作做准备. 前段时间逛了下鼠绘漫画网追海贼王最新漫画,发现他们家的图片轮播效果跟其他网页的图片轮播效果效果不同,看起来更加有趣,于是我尝试了用js复写它. 前提 ...
前端原生js实现图片轮播效果，超级简单，备注详细
原生js实现简单轮播图,效果如下纯生js实现轮播图链接: link. 图片: 我们可以通过左右两边的箭头来播放图片,在我们的鼠标放在图片上时,自动播放结束,转化为手动播放,可以通过小圆点来点击切换 ...
js实现图片轮播效果
感觉这一周学的东西中,本菜鸡觉得轮播效果是最炫酷的哈哈哈. 要好好的纪念下这个东西,以后忘了再来这边看看!超赞, 当自己做出这个效果的时候,很有成就感的(ノω<.)ノ))☆.. <!DOC ...
php中实现图片自动轮播,基于vue.js实现图片轮播效果
轮播图效果: html {{sd.title}} js export default { components: { }, ready: function() { var _this=this; va ...
移动端实现文字轮播_使用原生JS实现移动端图片轮播效果(一)
PC端上实现图片轮播效果非常简单,只要通过使用click事件就可以非常简单的实现效果,但是在移动端上,就要通过核心的touch事件来实现.话不多说,现在我们就开始移动端轮播效果的实现. 首先就是原生J ...
html多图轮播淡入淡出js,原生JS实现图片轮播与淡入效果的简单实例
最近对css的兴趣提不起来,因为以前对图片轮播一直耿耿于怀苦于学艺不精,所以,花了点时间熟悉了一下js.然后一条道走到黑,用jquery和js写了一下轮播和图片淡入的效果.以后学习的路很长,希望自己在 ...

html中使用JS实现图片轮播效果

html中使用JS实现图片轮播效果相关推荐

最新文章

热门文章