用JS实现图片轮播效果代码(一)

时间:2021-05-18

一.实现原理

(1)将所有图片放在一个父容器div里面,通过display属性来设置图片的出现与隐藏;

(2)轮播图分为手动轮播和自动轮播;

手动轮播的重点是每次点击图片下方的小圆圈,获得它的索引号,并让与之对应索引号的图片显示,并且此时的小圆圈为高亮显示;
自动轮播:利用定时器setInterval(),来每隔一定的时间来播放一次图片。

(3)所有的基础知识:dom操作,定时器,事件运用。

二.轮播图页面布局:

<div id="content"> <!-- 总的父容器 --><div class="carousel-inner"> <!-- 包含图片的容器 --><div class="item "><img src="./img/lunbo1.jpg" alt="第一张图片"></div><div class="item"><img src="./img/lunbo2.jpg" alt="第二张图片"></div><div class="item"><img src="./img/lunbo3.jpg" alt="第三张图片"></div></div><!-- 图片下方的指示圆圈--><ul class="carousel-indicators"><li id='pic1'>●</li><li id='pic2'>●</li><li id='pic3'>●</li></ul><!-- 图片左右方来回滚动图片的左右箭头--><a href="#" class="carousel-control prev"><span><</span></a><a href="#" class="carousel-control next"><span>></span></a></div>

三.轮播图的css样式:

#content{width: 100%;height:500px;position: relative;}.carousel-inner{position: relative;width: 100%;overflow: hidden; height:500px; }.carousel-inner>.item>img{display: block; line-height: 1; z-index: 1;}.carousel-indicators{position: absolute;bottom:10px;left:45%;z-index: 2;list-style-type: none;}.carousel-indicators li{display:inline-block;padding: 0 15px;font-size: 24px;color:#999; cursor: pointer;z-index: 2;}.active1{font-size: 28px;color:#fff;}.carousel-control{position: absolute;text-decoration:none;color: #999;font-weight: bold;opacity: .5;font-size: 40px;z-index: 3;}.carousel-control:hover{color:fff;text-decoration: none;opacity: .9;outline: none;font-size: 42px;}.prev{top: 30%; left:20px; }.next{top:30%;right: 20px;}

四.轮播图的js实现代码:

window.onload = function(){//轮播初始化var lunbo = document.getElementById('content');var imgs = lunbo.getElementsByTagName('img'); var uls = lunbo.getElementsByTagName('ul');var lis = lunbo.getElementsByTagName('li');//初始状态下,一个圆圈为高亮模式lis[0].style.fontSize = '26px';lis[0].style.color = '#fff';//定义一个全局变量,用来进行自动轮播图片顺序的变化var pic_index = 1;//自动轮播.使用pic_time记录播放,可以随时使用clearInterval()清除掉。var pic_time = setInterval(autobofang,3000);//手动轮播for(var i=0;i<lis.length;i++){ lis[i].addEventListener("mouseover",change,false);}function change(event){ var event=event||window.event;var target=event.target||event.srcElement; var children = target.parentNode.children; for(var i=0;i<children.length;i++){if(target == children[i]){ picChange(i); } }} //图片切换函数function picChange(i){ //让所有图片都不显示,所有圆圈都为普通样式 for(var j=0;j<imgs.length;j++){imgs[j].style.display = 'none'; lis[j].style.fontSize = '24px';lis[j].style.color = '#999';}//让选中的索引的图片显示,对应的圆圈高亮 imgs[i].style.display = 'block'; lis[i].style.fontSize = '26px';lis[i].style.color = '#fff'; }//自动播放的事件处理function autobofang(){if(pic_index >= lis.length){pic_index = 0;}change1(pic_index);pic_index++;}//自动播放的图片转化中的事件function change1(index){ picChange(index);//鼠标移入ul标签,自动播放图片暂停uls[0].addEventListener("mouseover",pause,false);//鼠标移出ul标签,自动播放图片继续uls[0].addEventListener("mouseout",go,false);}//自动播放暂停函数function pause(event){var event=event||window.event;var target=event.target||event.srcElement;switch(target.id){case "pic1":clearInterval(pic_time); break;case "pic2":clearInterval(pic_time);break;case "pic3":clearInterval(pic_time);break;}}//自动播放图片继续函数function go(event){var event=event||window.event;var target=event.target||event.srcElement; switch(target.id){case "pic1":pic_index = 1; pic_time = setInterval(autobofang,3000);break;case "pic2":pic_index = 2; pic_time = setInterval(autobofang,3000);break;case "pic3":pic_index = 3; pic_time = setInterval(autobofang,3000); break;}}}

五.效果图:

六.遇到的问题与不足

问题:当鼠标第一次移入ul标签时,自动轮播图片停止,鼠标移出,自动轮播继续,但是随着运行,轮播图片的变化速度越来越快,而且这时点击ul标签已经不起作用了。

问题原因:在后面停止轮播后再次轮播开始使用定时器的时候,没有给赋值给pic_time来记录,也就没有再次鼠标移到ul标签而清除定时器,因此导致再次点击ul标签不能暂停自动轮播播放,而且速度 越来越快。
不足:没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果,左右箭头的指示作用也没有完成。这些在后期会继续学习,继续来完善,来分享.

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章