JavaScript实现简易轮播图最全代码解析(ES5)
本文实例为大家分享了JavaScript实现简易轮播图效果的具体代码，供大家参考，具体内容如下
全部代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ES5轮播图</title>
<style>
* {padding: 0;margin: 0;}
#wrapper {
position: relative;
margin: 50px auto;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper .content {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
#wrapper>.content>.imgs {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 0;
width: 6000px;
/*多留出一张图片的宽度！*/
list-style: none;
}
#wrapper>.content>.imgs li {
float: left;
margin: 0;
padding: 0;
width: 1000px;
height: 300px;
}
#wrapper>.content>.imgs>li img {
width: 100%;
height: 100%;
}
#wrapper>.content>.dots {
width: 163px;
position: absolute;
right: 0;
left: 0;
margin: auto;
bottom: 10px;
list-style: none;
}
#wrapper>.content>.dots li {
float: left;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
border-radius: 50%;
margin-left: 10px;
cursor: pointer;
}
li.active {
background-color: white;
}
li.quiet {
background-color: #5a5a58;
}
.btns {
display: none;
}
.btns span {
position: absolute;
width: 25px;
height: 40px;
top: 50%;
margin-top: -20px;
line-height: 40px;
text-align: center;
font-weight: bold;
font-family: Simsun;
font-size: 30px;
border: 1px solid #fff;
opacity: 0.5;
cursor: pointer;
color: #fff;
background: black;
}
.btns .left {
left: 5px;
}
.btns .right {
left: 100%;
margin-left: -32px;
}
</style>
</head>
<body>
<div id="wrapper">
<div class="content">
<ul class="imgs">
<li><img src="img/s1.jpg" /></li>
<li><img src="img/s2.jpg" /></li>
<li><img src="img/s3.jpg" /></li>
<li><img src="img/s4.jpg" /></li>
<li><img src="img/s5.jpg" /></li>
</ul>
<ul class='dots'></ul>
</div>
<div class="btns">
<span class="left"><</span>
<span class="right">></span>
</div>
</div>
</body>
</html>
<script>
var wrapper = document.getElementById("wrapper");
var imgs = document.getElementsByClassName("imgs")[0];
var dots = document.getElementsByClassName("dots")[0];
var btns = document.getElementsByClassName("btns")[0];
var dotss = dots.children;
var len = imgs.children.length; //图片张数
var width = wrapper.offsetWidth; //每张图片的宽度
var rate = 15; //一张图片的切换速度， 单位为px
var times = 1; //切换速度的倍率
var timer = null; //初始化一个定时器
var imgSub = 0; //当前显示的图片下标
var dotSub = 0; //当前显示图片的小圆点下标
var temp;
// 创建一个文档片段，此时还没有插入到 DOM 结构中
const frag = document.createDocumentFragment()
// 根据图片数量添加相应的小圆点到文档片段中
for (let i = 0; i < len; i++) {
const dot = document.createElement("li");
dot.className = 'quiet';
// 先插入文档片段中
frag.appendChild(dot);
}
// 将小圆点片段统一插入到 DOM 结构中
dots.appendChild(frag)
// 第一个小圆点高亮显示
dots.children[0].className = "active";
// 滑动函数
function Roll(distance) { //参数distance：滚动的目标点（必为图片宽度的倍数）
clearInterval(imgs.timer); //每次运行该函数必须清除之前的定时器！
//判断图片移动的方向
var speed = imgs.offsetLeft < distance ? rate : (0 - rate);
//设置定时器，每隔10毫秒，调用一次该匿名函数
imgs.timer = setInterval(function() {
//每一次调用滚动到的地方 (速度为 speed px/10 ms)
imgs.style.left = imgs.offsetLeft + speed + "px";
//距目标点剩余的px值
var leave = distance - imgs.offsetLeft;
/*接近目标点时的处理，滚动接近目标时直接到达， 避免rate值设置不当时不能完整显示图片*/
if (Math.abs(leave) <= Math.abs(speed)) {
clearInterval(imgs.timer);
imgs.style.left = distance + "px";
}
}, 10);
}
/*克隆第一个li到列表末*/
imgs.appendChild(imgs.children[0].cloneNode(true));
function autoRun() {
imgSub++;
dotSub++;
if (imgSub > len) { //滚动完克隆项后
imgs.style.left = 0; //改变left至真正的第一项处
imgSub = 1; //从第二张开始显示
}
// 调用滚动函数，参数为该下标的滚动距离
Roll(-imgSub * width);
// 如果圆点下标已滚动到最后，则将下标重置为0
if (dotSub > len - 1) { //判断是否到了最后一个圆点
dotSub = 0;
}
// 循环修改所有圆点默认样式
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
// 给当前滚动到的圆点添加高亮样式
dotss[dotSub].className = "active";
}
// 创建定时器，开始自动滚动
timer = setInterval(autoRun,2000);
// 循环添加小圆点的触发事件
for (var i = 0; i < len; i++) {
dotss[i].index = i;
dotss[i].onmouseover = function() {
for (var j = 0; j < len; j++) {
dotss[j].className = "quiet";
}
this.className = "active";
temp = dotSub;
imgSub = dotSub = this.index;
times = Math.abs(this.index - temp); //距离上个小圆点的距离
rate = rate * times; //根据距离改变切换速率
Roll(-this.index * width);
rate = 15;
}
}
// 添加事件：鼠标移动到wrapper上，左右切换按钮显示
wrapper.onmouseover = function() {
clearInterval(timer);
btns.style.display = 'block';
}
// 添加事件：鼠标移出wrapper，左右切换按钮隐藏
wrapper.onmouseout = function() {
timer = setInterval(autoRun,2000);
btns.style.display = 'none';
}
// 点击上一张按钮 触发事件
btns.children[0].onclick = function() {
imgSub--;
dotSub--;
if (imgSub < 0) { //滚动完第一项后
imgs.style.left = -len * width + "px"; //改变left至克隆的第一项处
imgSub = dotSub = len - 1;
}
Roll(-imgSub * width);
if (dotSub < 0) {
dotSub = len - 1;
}
for (var i = 0; i < len; i++) {
dotss[i].className = "quiet";
}
dotss[dotSub].className = "active";
}
// 点击下一张按钮 触发事件
btns.children[1].onclick = autoRun;
</script>
图片：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
原生js实现轮播图的示例代码
很多网站上都有轮播图,但却很难找到一个系统讲解的,因此这里做一个简单的介绍,希望大家都能有所收获,如果有哪些不正确的地方,希望大家可以指出. 原理: 将一些图片在一行中平铺,然后计算偏移量再利用定时器实现定时轮播. 步骤一:建立html基本布局 如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>轮播图</title> </hea
-
js实现轮播图的完整代码
今天写一个完整的轮播图,首先它需要实现三个功能: 1.鼠标放在小圆点上实现轮播 2.点击焦点按钮实现轮播 3.无缝自动轮播 轮播图的原理: 一系列的大小相等的图片平铺,利用CSS布局只显示一张图片,其余隐藏.通过计算偏移量(封装一个动画函数)自动播放,或通过手动点击事件切换图片. html布局: <div id="box" class="all"> <div class="inner"> <!-- 相框-->
-
JS实现多重选项卡切换轮播图
轮播动画来提升页面的颜值和交互性能,下面我们将一起学习利用html , css和Javascript等前端开发基础知识来制作一个简单的轮播图. 轮播图简介:在一个网站的某一特定模块,通过电脑上鼠标点击或鼠标移入.手机上手指滑动后,可以分别展示不同的图片,这个模块就叫做轮播模块. (做的不好的地方欢迎各位大佬批评指正,感觉有帮助的同学麻烦给颗星星哦~) html布局部分: <div id="box"> <div class="scenery pic"
-
原生JavaScript实现轮播图效果
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 一.功能: 1.每隔2.5s自动切换下一张轮播图: 2.底部按钮切换对应轮播图: 3.鼠标移入暂停自动切换,移出开始: 4.鼠标移入,左右切换按钮出现,并可左右切换轮播图. 二.效果(GIF): 三.代码: 结构层(HTML) <div class="box"> <img src="./image/banner1.jpg" /> <div cla
-
JS轮播图实现简单代码
本文实例为大家分享了js轮播图实现代码,供大家参考,具体内容如下 思路: 1.首先要有个盛放图片的容器,设置为单幅图片的宽高,且overflow:hidden,这样保证每次可以只显示一个图片 2.Container内有个放图片的list进行position的定位 ,其中的图片采用float的方式,同时当图片进行轮播时,改变list的Left值使得其显示的图片发生变化. 3.图片的轮播使用定时器,通过定时器改变list的Left值是的图片循环展示 4.当鼠标滑动到图片上时,清除定时器,图片停止轮播
-
js实现点击左右按钮轮播图片效果实例
本文实例讲述了js实现点击左右按钮轮播图片效果的方法.分享给大家供大家参考.具体实现方法如下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(".citemss"); var $v_show = $v_citemss.find("ul"); v_width = $v_citemss.width();//图片展示区外围div的大小 //注:若为整数,前边不能再加var,否则会被提示un
-
js实现简单轮播图效果
本文实例为大家分享了js实现简单轮播图效果的具体代码,供大家参考,具体内容如下 使用transform = translateX()实现的图片切换 <style> .box { position: relative; overflow: hidden; margin: 200px auto; width: 600px; height: 400px; } .img { width: 3000px; height: 400px; } img { float: left; width: 600px;
-
JavaScript实现轮播图案例
本文实例为大家分享了JavaScript实现轮播图效果的具体代码,供大家参考,具体内容如下 运用定时器所写成的一个简单的轮播图,直接看代码,如下: 1.css代码 <style> *{ margin: 0; padding: 0; box-sizing: border-box; } body{ font-size: 14px; font-family: Arial, Helvetica, sans-serif; } .slider-box{ width: 1226px; height: 460
-
js实现支持手机滑动切换的轮播图片效果实例
本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu
-
JavaScript实现简易轮播图最全代码解析（ES6面向对象）
本文实例为大家分享了JavaScript实现简易轮播图的具体代码,供大家参考,具体内容如下 完整代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>ES6轮播图</title> <script></script> <style> * { margin: 0; padding: 0; } .box { wi