小程序开发定制方案_JavaScript完成轮播图片完好代码

JavaScript实现轮播图片完整代码       这篇文章主要为大家介绍了JavaScript实现轮播图片的完整代码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文实例为大家分享了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 id="box" 
 div 
 !--轮播图-- 
 div img src="img/001.png" alt="" /div 
 /li 
 div img src="img/1.png" alt="" /div 
 /li 
 div img src="img/6.png" alt="" /div 
 /li 
 div img src="img/3.png" alt="" /div 
 /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=0
 ulObj.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 

精彩专题分享:

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持凡科。


相关阅读