JavaScript---轮播图片完整代码

JS代码注释清晰明了，一看就懂！

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>最简单的轮播效果</title><style>* {margin: 0;padding: 0}.box {width: 500px;height: 300px;border: 1px solid #ccc;margin: 100px auto;padding: 5px;}.inner {width: 500px;height: 300px;position: relative;overflow: hidden;}.inner img {width: 500px;height: 300px;vertical-align: top}ul {width: 1000%;position: absolute;list-style: none;left: 0;top: 0;}.inner li {float: left;}ol {position: absolute;height: 20px;right: 20px;bottom: 20px;text-align: center;padding: 5px;}ol li {display: inline-block;width: 20px;height: 20px;line-height: 20px;background-color: #fff;margin: 5px;cursor: pointer;}ol .current {background-color: red;}</style></head><body><div class="box" id="box"><div class="inner"><!--轮播图--><ul><li><div><img src="img/001.png" alt=""></div></li><li><div><img src="img/1.png" alt=""></div></li><li><div><img src="img/6.png" alt=""></div></li><li><div><img src="img/3.png" alt=""></div></li><li><div><img src="img/4.png" alt=""></div></li></ul></div></div><script>/**** @param id  传入元素的id* @returns {HTMLElement | null}  返回标签对象，方便获取元素*/function my$(id) {return document.getElementById(id);}//获取各元素，方便操作var box = my$("box");var inner = box.children[0];var ulObj = inner.children[0];var list = ulObj.children;var olObj = inner.children[1];var imgWidth = inner.offsetWidth;var right = my$("right");var pic = 0;//根据li个数，创建小按钮for(var i = 0; i < list.length; i++) {var liObj = document.createElement("li");//olObj.appendChild(liObj);liObj.innerText = (i + 1);liObj.setAttribute("index", i);//为按钮注册mouseover事件liObj.onmouseover = function() {//先清除所有按钮的样式for(var j = 0; j < olObj.children.length; j++) {olObj.children[j].removeAttribute("class");}this.className = "current";pic = this.getAttribute("index");animate(ulObj, -pic * imgWidth);}}//设置ol中第一个li有背景颜色//olObj.children[0].className = "current";//克隆一个ul中第一个li,加入到ul中的最后=====克隆ulObj.appendChild(ulObj.children[0].cloneNode(true));var timeId = setInterval(onmouseclickHandle, 4000);function onmouseclickHandle() {//如果pic的值是5,恰巧是ul中li的个数-1的值,此时页面显示第六个图片,而用户会认为这是第一个图,//所以,如果用户再次点击按钮,用户应该看到第二个图片if(pic == list.length - 1) {//如何从第6个图,跳转到第一个图pic = 0; //先设置pic=0ulObj.style.left = 0 + "px"; //把ul的位置还原成开始的默认位置}pic++; //立刻设置pic加1,那么此时用户就会看到第二个图片了animate(ulObj, -pic * imgWidth); //pic从0的值加1之后,pic的值是1,然后ul移动出去一个图片}//设置任意的一个元素,移动到指定的目标位置function animate(element, target) {clearInterval(element.timeId);//定时器的id值存储到对象的一个属性中element.timeId = setInterval(function() {//获取元素的当前的位置,数字类型var current = element.offsetLeft;//每次移动的距离var step = 10;step = current < target ? step : -step;//当前移动到位置current += step;if(Math.abs(current - target) > Math.abs(step)) {element.style.left = current + "px";} else {//清理定时器clearInterval(element.timeId);//直接到达目标element.style.left = target + "px";}}, 10);}</script></body></html>

JavaScript---轮播图片完整代码相关推荐

HTML轮播图完整代码 (原生Javascript）
HTML轮播图完整代码 (原生Javascript) <!DOCTYPE html> <html><head><meta charset="utf- ...
html 无缝轮播图完整代码
1,实现轮播效果 2,实现代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht ...
JS原生实现简单的轮播图(完整代码,一看就懂)
实现完后的效果图: 实现思路: 先实现能左右箭头点击能实现图片的更换,也就是五张图片先隐藏然后看一下当前要现在第几张就让它显示,其他四张隐藏. 需要注意的地方是当前图片是第一张或第五张的时候我们要加判 ...
原生js+css 实现轮播图完整代码
利用原生的js实现轮播图,可以添加到自己的UI库中,在以后的项目中对其进行修改然后添加到已有项目中. 先写出css部分和html部分,直接上代码 <!DOCTYPE html> <h ...
html中轮播图片js代码怎么写,js+html+css实现轮播图
首先先把轮播图的结构搭建起来(html),代码如下: 结构可自行搭建,结构搭建完接着就是用css去进行修饰美化此时的ul是没有给它设置固定的宽和高的,高可以先设置,宽不能,等下让图片一张接一张一的动 ...
微信小程序swiper组件真机模拟时疯狂轮播问题解决完整代码
公司个人家庭社会国家张伯礼院士:除湖北外,全国其他省市4月底应可恢复正常秩序个人内容列表家庭内容列表社会内容列表国家内容列表国家内容列表国家内容列表国家内容列表国家内容列表 ...
html图片自动切换的幻灯片效果的,js带点自动图片轮播幻灯片特效代码分享
本文实例讲述了javascript带点自动图片轮播幻灯片特效.分享给大家供大家参考.具体如下: 这是一款基于javascript实现带点自动图片轮播幻灯片特效代码,实现过程很简单. 运行效果图:--- ...
web大二实训作业：校园运动会网站设计——运动会图片轮播图片遮罩特效(4页)体育 HTML+CSS+JavaScript HTML5期末大作业...
常见网页设计作业题材有个人. 美食. 公司. 学校. 旅游. 电商. 宠物. 电器. 茶叶. 家居. 酒店. 舞蹈. 动漫. 明星. 服装. 体育. 化妆品. 物流. 环保. 书籍. 婚纱. 军 ...
js图片轮播效果实现代码
这篇文章主要介绍了js图片轮播效果实现代码,文章对每一步进行了详细阐述,标注注意事项,为顺利实现js图片轮播效果做好铺垫,对轮播效果感兴趣的朋友可以参考一下首先给大家看一看js图片轮播效果,如下图 ...
JavaScript轮播图代码
JavaScript轮播图代码 <html><head><meta charset="utf-8"><title>轮播图</t ...

JavaScript---轮播图片完整代码

JavaScript---轮播图片完整代码相关推荐

最新文章

热门文章