JavaScript实现轮播图片完整代码
更新时间：2020年03月07日 10:07:30 作者：最爱松露巧克力
这篇文章主要为大家介绍了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 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=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>
精彩专题分享：jQuery图片轮播 JavaScript图片轮播
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要为大家详细介绍了js实现菜单跳转效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-12-12
在JavaScript中,如何准确获取变量的类型名是一个经常使用的问题。但是常常不能获取到变量的精确名称,或者必须使用jQuery 中的方法,这里通过 typeof ,jQuery.type 和 通过构造函数来获取变量类型这三种方法详细介绍一遍。有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要介绍了JS学习笔记之闭包,结合具体案例形式分析了javascript实现与使用闭包的相关操作技巧,需要的朋友可以参考下2019-05-05
关于layui 实现点击按钮添加一行(方法渲染创建的table)
今天小编就为大家分享一篇关于layui 实现点击按钮添加一行(方法渲染创建的table)，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要为大家详细介绍了layui实现数据分页功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-07-07
这篇文章主要为大家详细介绍了微信通过页面(H5)直接打开本地app的解决方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-09-09
这篇文章主要为大家详细介绍了微信小程序实现手机获取验证码后倒计时60s，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-05-05
JavaScript encodeURI 和encodeURIComponent
encodeURI和encodeURIComponet函数都是javascript中用来对URI进行编码，将相关参数转换成UTF-8编码格式的数据。URI在进行定位跳转时，参数里面的中文、日文等非ASCII编码都会进行编码转换2015-12-12
这篇文章主要和大家分享了一些JavaScript中异常与错误处理的正确方法，文中的示例代码讲解详细，具有一定的借鉴价值，感兴趣的小伙伴可以参考一下2023-04-04
这篇文章主要为大家详细介绍了bootstrap提示标签、提示框的实现代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
最新评论