原生js实现轮播图(两种方法)
2023-07-08 03:49
第一种：
这个是之前写的，比较草率，没有注释，如果这个看不懂就去看第二个，比较仔细，主要是了解他，后面都会有一些插件来使用，很方便，只要几行代码就可写出各种各样的代码，所以，不懂的话，不要太在意。
<script type="text/javascript">
var i = 0;
var images = new Array("500022.jpg","500023.jpg","500024.jpg","500025.jpg","500026.jpg");
function change(){
if(i>4){
i = 0;
}
document.getElementById("img").src = images[i];
if(i != 0){
document.getElementById(i-1).style.backgroundColor = "#fff";
}else{
document.getElementById(images.length-1).style.backgroundColor = "#fff";
}
document.getElementById(i).style.backgroundColor = "#99CCFF";
i++;
}
function getImage(index){
var obj = event.srcElement;
obj.style.backgroundColor= "#99CCFF";
i = index;
for(var i=0;i<images.length;i++){
if(i != index){
document.getElementById(i).style.backgroundColor = "#fff";
}
}
document.getElementById("img").src = images[index];
}
function out(){
var obj = event.srcElement;
obj.style.backgroundColor= "#fff";
}
setInterval("change()",2000);
function getInfo(obj){
window.showModalDialog("2.html",obj,"dialogWidth=450px;dialogHeight=250px;status = 0;scroll=no;");
}
</script>
第二种：
这个是最近刚写的，所以比较仔细，尽量多看看这个，跟步骤结合起来应该是能看懂的：
轮播图要实现的步骤和效果
1,显示和隐藏左右按钮
(1),鼠标移入，左右按钮显示
(2),鼠标离开，左右箭头隐藏
2,动态生成小圆点
(1)获取所有图片
(2)循环
(1),创建新的li
(2),把li添加到ol中
(3),给新的li设置索引号（自定义属性）
(4),给新的li注册点击事件
3,单击小圆点，小圆点呈现选中白色，移动图片
(1),排他样式
(1),去掉所有li的白色样式
(2),留下当前li(第一个默认为白色的小圆点)
(2),移动ul
（1),获取索引号（自定义属性的值）
（2),计算ul的移动位置（-索引号*图片的宽）
（3),使用动画函数，移动ul
4,单击右箭头，切换下一张图片
(1),切换下一张图片
(2),小圆点跟着变化
(3),无缝切换
(1),核心原理：复制了一个图片，放到ul的最后
(2),如果当前是最后一张，则瞬间回到第1张图片。
5,单击左箭头，切换上一张图片
6,自动轮播
(1),每隔2秒钟，触发右箭头的点击事件
7,节流阀，避免狂点右箭头
(1),定义一个全局变量（开关变量）
(2),把要锁住的代码放到if判断中
(3),if判断中，先锁开关。flag = false
(4),animate的回调函数中，打开开关。flag = true
里面有一些样式就需要自己引入了，像公共样式那些
<style>
.focus {
position: relative;
width: 721px;
height: 455px;
background-color: purple;
overflow: hidden;
}
.focus ul {
position: absolute;
top: 0;
left: 0;
width: 600%;
}
.focus ul li {
float: left;
}
.arrow-l,
.arrow-r {
display: none;
position: absolute;
top: 50%;
margin-top: -20px;
width: 24px;
height: 40px;
background: rgba(0, 0, 0, .3);
text-align: center;
line-height: 40px;
color: #fff;
font-family: 'icomoon';
font-size: 18px;
z-index: 2;
}
.arrow-r {
right: 0;
}
.circle {
position: absolute;
bottom: 10px;
left: 50px;
}
.circle li {
float: left;
width: 8px;
height: 8px;
/*background-color: #fff;*/
border: 2px solid rgba(255, 255, 255, 0.5);
margin: 0 3px;
border-radius: 50%;
/*鼠标经过显示小手*/
cursor: pointer;
}
.current {
background-color: #fff;
}
</style>
<!-- 引入facicon.ico网页图标 -->
<!-- <link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<!-- 引入css 初始化的css 文件 -->
<!-- <link rel="stylesheet" href="css/base.css"> -->
<!-- 引入公共样式的css 文件 -->
<!-- <link rel="stylesheet" href="css/common.css"> -->
<!-- 引入 首页的css文件 -->
<!-- 这个animate.js 必须写到 index.js的上面引入 -->
<script src="js/animate.js"></script>
<!-- 引入我们首页的js文件 -->
<script src="js/index.js"></script>
<div class="focus fl">
<!-- 左侧按钮 -->
<a href="javascript:;" class="arrow-l">
<
</a>
<!-- 右侧按钮 -->
<a href="javascript:;" class="arrow-r"> </a>
<!-- 核心的滚动区域 -->
<ul>
<li>
<a href="#"><img src="upload/focus.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus1.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus2.jpg" alt=""></a>
</li>
<li>
<a href="#"><img src="upload/focus3.jpg" alt=""></a>
</li>
</ul>
<!-- 小圆圈 -->
<ol class="circle">
</ol>
js代码
//页面加载事件
window.addEventListener('load', function() {
//获取元素
var focus = document.querySelector('.focus');
var arrowl = document.querySelector('.arrow-l');
var arrowr = document.querySelector('.arrow-r');
//-------------------------------
var focusWidth = focus.offsetWidth;
//--------------------------------
//鼠标移入显示按钮
focus.addEventListener('mouseenter', function() {
arrowl.style.display = 'block';
arrowr.style.display = 'block';
//--------------------------
//清除定时器
clearInterval(timer);
timer = null;
//--------------------------
})
focus.addEventListener('mouseleave', function() {
arrowl.style.display = 'none';
arrowr.style.display = 'none';
//-------------------------------
timer = setInterval(function() {
arrowr.click();
}, 2000)
//----------------------------------
})
//动态生成小圆圈
var ul = focus.querySelector('ul');
var ol = focus.querySelector('.circle');
for (var i = 0; i < ul.children.length; i++) {
//创建节点li
var li = document.createElement('li');
li.setAttribute('index', i);
//把li添加到ol里
ol.appendChild(li);
//排他思想，我们可以直接在生成小圆圈的同时直接点击绑定事件
li.addEventListener('click', function() {
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下自己
this.className = 'current';
//5.点击图片，移动图片，当然移动的是ul
//ul的移动距离 小圆圈的索引号乘以图片的宽度,注意是负值
//当我们点击了某个li，就拿到当前小li的索引号
var index = this.getAttribute('index');
// 当我们点击了某个小li 就要把这个li 的索引号给 num
num = index;
// 当我们点击了某个小li 就要把这个li 的索引号给 circle
circle = index;
// num = circle = index;
animate(ul, -index * focusWidth);
})
}
//把ol里面的第一个小li设置为类名current;
ol.children[0].className = 'current';
//---------------------------------------
// 6. 克隆第一张图片(li)放到ul 最后面
var first = ul.children[0].cloneNode(true);
ul.appendChild(first);
//--------------------------------------
//单击右按钮，切换下一张
//声明全局变量，记录切换的索引号
var num = 0;
// circle 控制小圆圈的播放
var circle = 0;
var flag = true; //节流阀开关
arrowr.addEventListener('click', function() {
if (flag) {
flag = false;
//判断当前图片是否是复制的最后一张
//ul设置为0，num重置为0
if (num == 4) {
ul.style.left = 0;
num = 0
}
num++;
//计算ul的移动距离
animate(ul, -num * focusWidth, function() {
flag = true; // 打开节流阀
});
//-----------------------------------------
//对应小圆点
circle++;
// 如果circle == 4 说明走到最后我们克隆的这张图片了 我们就复原
if (circle == 4) {
circle = 0;
}
//排他,干掉所有小圆点
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下当前小圆点
ol.children[circle].className = 'current';
}
})
//--------------------------------------------------------
//单击左按钮，切换上一张图片
arrowl.addEventListener('click', function() {
if (flag) {
flag = false;
//切换上一张图片
//判断当前是否时第1张图片
if (num == 0) {
num = 4;
//回到最后一张
ul.style.left = -num * focusWidth + 'px';
}
num--;
//计算ul的移动距离
animate(ul, -num * focusWidth, function() {
flag = true; // 打开节流阀
});
//小圆点跟着变化
if (circle == 0) {
circle = 4;
}
circle--;
//排他,干掉所有小圆点
for (var i = 0; i < ol.children.length; i++) {
ol.children[i].className = '';
}
//留下当前小圆点
ol.children[circle].className = 'current';
}
})
//--------------------------------------------------
//自动轮播
var timer = setInterval(function() {
arrowr.click();
}, 2000)
})
这里是引入的animate动画效果文件也是原生js
function animate(obj, target, callback) {
// console.log(callback); callback = function() {} 调用的时候 callback()
// 先清除以前的定时器，只保留当前的一个定时器执行
clearInterval(obj.timer);
obj.timer = setInterval(function() {
// 步长值写到定时器的里面
// 把我们步长值改为整数 不要出现小数的问题
// var step = Math.ceil((target - obj.offsetLeft) / 10);
var step = (target - obj.offsetLeft) / 10;
step = step > 0 ? Math.ceil(step) : Math.floor(step);
if (obj.offsetLeft == target) {
// 停止动画 本质是停止定时器
clearInterval(obj.timer);
// 回调函数写到定时器结束里面
// if (callback) {
// // 调用函数
// callback();
// }
callback && callback();
}
// 把每次加1 这个步长值改为一个慢慢变小的值 步长公式：(目标值 - 现在的位置) / 10
obj.style.left = obj.offsetLeft + step + 'px';
}, 15);
}
如果说需要那些公共样式或者哪里看不懂的地方的可以私聊我，我能帮你解答的一定帮你，希望可以一起进步，一起努力。