用JS实现图片轮播效果代码(一)
更新时间:2016年7月1日 10:00 点击:2083
一.实现原理
(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标签不能暂停自动轮播播放,而且速度 越来越快。
不足:没有实现类似淘宝轮播图那样平滑过渡的无现滚动的效果,左右箭头的指示作用也没有完成。这些在后期会继续学习,继续来完善,来分享.
相关文章
使用PHP+JavaScript将HTML页面转换为图片的实例分享
这篇文章主要介绍了使用PHP+JavaScript将HTML元素转换为图片的实例分享,文后结果的截图只能体现出替换的字体,也不能说将静态页面转为图片可以加快加载,只是这种做法比较interesting XD需要的朋友可以参考下...2016-04-19- 本篇文章主要分享了通过window.navigator来判断浏览器及其版本信息的实例代码。具有一定的参考价值,下面跟着小编一起来看下吧...2017-01-23
- 这篇文章主要介绍了js如何实现浏览器打印功能,文中示例代码非常详细,帮助大家更好的理解和学习,感兴趣的朋友可以了解下...2020-07-15
- 下面小编就为大家带来一篇利用JS实现点击按钮后图片自动切换的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- 作为前端,一直以来都知道HTTP劫持与XSS跨站脚本、CSRF跨站请求伪造。防御这些劫持最好的方法是从后端入手,前端能做的太少。而且由于源码的暴露,攻击者很容易绕过防御手段。但这不代表我们去了解这块的相关知识是没意义的,本文的许多方法,用在其他方面也是大有作用。...2021-05-24
- 这篇文章主要给大家介绍了关于Nest.js参数校验和自定义返回数据格式的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28
- 那么今天我就用JavaScript代码来实现这个效果吧,那么首先介绍一下整个的思路,首先我们先将确定输入密码的位数,我的需求是5位,那么就用一个div标签包住5个input标签...2016-01-02
- 这篇文章主要为大家详细介绍了js实现上传图片及时预览的相关资料,具有一定的参考价值,感兴趣的朋友可以参考一下...2016-05-09
- 这篇文章主要为大家详细介绍了js+css实现回到顶部按钮back to top回到顶部按钮,感兴趣的小伙伴们可以参考一下...2016-03-03
- 这篇文章主要给大家介绍了一个关于JS正则匹配的踩坑记录,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-13
- 这篇文章主要介绍了如何使用JavaScript实现“无缝滚动 自动播放”轮播图效果,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-08-20
- 这篇文章主要介绍了js实现调用网络摄像头及常见错误处理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-07
- 这篇文章主要为大家详细介绍了JS实现随机生成验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-06
- 这篇文章主要为大家详细介绍了js实现列表按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-08-11
- 这篇文章主要介绍了js组件SlotMachine实现图片切换效果制作抽奖系统的相关资料,需要的朋友可以参考下...2016-04-19
- 这篇文章主要介绍了基于JavaScript实现文字超出部分隐藏 的相关资料,需要的朋友可以参考下...2016-03-01
- 有时候我们需要屏蔽客户端的F12,以防菜鸟也可以随意修改我们的代码,也处于源码的保护等操作,这里就为大家分享一下常见的代码...2020-10-03
- 这篇文章主要介绍了JS创建Tag标签的方法,结合具体实例形式分析了javascript动态操作页面HTML元素实现tag标签功能的步骤与相关操作技巧,需要的朋友可以参考下...2017-06-15
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
- 为了网站的安全性,很多朋友都把密码设的比较复杂,但是如何密码不能明显示,不知道输的是对是错,为了安全起见可以把密码显示的,那么基于js代码如何实现的呢?下面通过本文给大家介绍JavaScript实现表单密码的隐藏和显示,需要的朋友参考下...2016-03-03