原生js实现仿京东淡入淡出轮播图
一. 实现功能简述
图片自动轮播，切换图片淡入淡出，鼠标放在图片上停止轮播，鼠标移开恢复，触碰轮播指标点切换到相应图片，JSON储存图片数据，相对来讲图片数据独立一点，能够根据图片数量控制轮播图的数量
二. 思路
三个div装图片的盒子绝对定位叠在一起，通过修改z-index属性，在每次切换时把顶层图片放在底层 (这里使用双向链表进行循环) 。
三. 代码
部分代码概述:
class :
| class | 简述 |
|---|---|
| shuffling | 轮播需要的功能按钮 |
| leftToward | 左箭头 |
| rightToward | 右箭头 |
| transpunction | 轮播指标点 |
| shufflingImg | 轮播图 |
函数：
| function | 参数简述 | 功能简述 |
|---|---|---|
| imgInitial | 无参数 | 初始化图片 |
| punct_Initial | 无参数 | 初始化指标点 |
| arrowToward | 无参数 | 左右箭头初始化 |
| imgOnMouseOver | 无参数 | 当鼠标放在图片上的事件 |
| autoShuffling | 无参数 | 自动轮播 |
| imgShift | element : 待切换的图片对应的盒子 | 图片切换操作 |
| punctOne | prassLayer : 压盖图层 | 调整指标点的状态 |
| indesivery | 无参数 | 调整轮播图的堆叠顺序(z-index) |
| createDot | imgName : 图片的名称 | 生成一个指标点DOM元素 |
| node_Initial | 无参数 | 初始化轮播链表 |
轮播图对象(shufflingInfo)：
| 变量 | 简述 |
|---|---|
| imgList | 图片列表 |
| punctList | 指标点列表 |
| locality | 当前的轮播位置 |
| length | 图片列表总长度 |
| nodes | 轮播图链表 |
| chron | 自动轮播定时器 |
| primary | 第一张轮播图 |
| secondary | 第二张轮播图 |
| ternary | 第三张轮播图 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>轮播图</title>
</head>
<style>
*{
padding: 0;
border: 0;
margin: 0;
}
a{
text-decoration: none;
color: inherit;
}
.shuffling{
position: relative;
width: 700px;
}
.leftToward{
z-index: 1000;
position: absolute;
background-color:rgba(0, 0, 0, 0.425);
width: 25px;
height: 35px;
border-radius: 0px 35px 35px 0px;
text-align: center;
font-size: 20px;
color: white;
left: 0px;
top: 179.175px;
}
.rightToward{
z-index: 1000;
position: absolute;
background-color:rgba(0, 0, 0, 0.418);
width: 25px;
height: 35px;
border-radius: 35px 0px 0px 35px ;
text-align: center;
font-size: 20px;
color: white;
left: 675px;
top: 179.175px;
}
.transpunction{
z-index: 1000;
position: absolute;
display: flex;
flex-wrap: nowrap;
top: 340px;
left: 30px;
list-style: none;
}
.shufflingPoint{
position: relative;
width: 15px;
height: 15px;
margin-right: 5px;
border-radius: 15px;
background-color: rgba(211, 211, 211, 0.253);
}
.shufflingPoint .pressLayer{
position: absolute;
left: 0px;
top: 0px;
width: 15px;
height: 15px;
border-radius: 15px;
background-color: rgba(255, 31, 31, 0);
}
.shufflingPoint .intrapoint{
margin: 3px auto;
width: 9px;
height: 9px;
border-radius: 10px;
background-color: rgba(255, 255, 255, 0.78);
}
.shufflingImg{
position: relative;
}
.shufflingImg img{
position: absolute;
left: 0px;
top: 0px;
width: 700px;
opacity: 1;
transition: opacity ease-in 0.2s;
}
</style>
<body>
<div class="f_shuffling">
<div class="shuffling">
<div id="leftToward" class="leftToward">
<a href="javascript:void(0)"><</a>
</div>
<div id="rightToward" class="rightToward">
<a href="javascript:void(0)">></a>
</div>
</div>
<div id="transpunction" class="transpunction">
<!-- 在这里加小点 -->
<!-- <li class="shufflingPoint" info="默认元素">
<div class="intrapoint"></div>
<div class="pressLayer"></div>
</li> -->
</div>
<div id="shufflingImg" class="shufflingImg">
<img id="ternary" style="opacity: 1; z-index: 4;" src="./windows_img/10.jpg" alt="">
<img id="secondary" style="opacity: 1; z-index: 5;" src="./windows_img/10.jpg" alt="">
<img id="primary" style="opacity: 0; z-index: 6;" src="./windows_img/10.jpg" alt="">
</div>
</div>
</body>
<script>
var imgList = [//在这里动态新增图片
img1 = {name:"img1",address:"./windows_img/9.jpg"},
img2 = {name:"img2",address:"./windows_img/10.jpg"},
img3 = {name:"img3",address:"./windows_img/11.jpg"},
img4 = {name:"img4",address:"./windows_img/12.jpg"},
img5 = {name:"img5",address:"./windows_img/13.jpg"},
img6 = {name:"img6",address:"./windows_img/14.jpg"},
img7 = {name:"img7",address:"./windows_img/15.jpg"}
];
var shufflingInfo = new ShufflingInfo(imgList);
var node = shufflingInfo.nodes[0];
window.onload = function(){
Initial();//初始化
autoShuffling();//自动轮播
}
function Initial(){//初始化
imgInitial();//图片初始化
punct_Initial();//小点点初始化
arrowToward();//左右箭头初始化
imgOnMouseOver();//当鼠标放在图片上面时
}
function autoShuffling(){//自动轮播
var length = shufflingInfo.length;
var punctList = shufflingInfo.punctList;
shufflingInfo.chron = setInterval(function(){
var index = shufflingInfo.locality;
index = index < length-1 ? index+1 : 0;
imgShift(punctList[index].children[1]);
},2000);
}
function imgInitial(){//图片初始化
shufflingInfo.primary.src = imgList[0].address;
shufflingInfo.secondary.src = imgList[0].address;
shufflingInfo.ternary.src = imgList[0].address;
}
function imgOnMouseOver(){//当鼠标放在图片上面时
var shufflingImg = document.getElementById("shufflingImg");
shufflingImg.onmouseover = function(){
clearInterval(shufflingInfo.chron);
}
shufflingImg.onmouseout = function(){
autoShuffling();
}
}
function punct_Initial(){//小点点初始化
var transpunction = document.getElementById("transpunction");
for(var i = 0; i < imgList.length ; i++){
var point = createDot(imgList[i].name);
var pressLayer = point.children[1];
pressLayer.onmouseover = function(){//小点点添加事件
clearInterval(shufflingInfo.chron);
imgShift(this);
}
pressLayer.onmouseout = function(){
autoShuffling();
}
transpunction.insertBefore(point,null);
}
imgShift(shufflingInfo.punctList[shufflingInfo.locality].children[1]);
}
function arrowToward(){//左右箭头初始化
var leftToward = document.getElementById("leftToward");
var rightToward = document.getElementById("rightToward")
leftToward.onclick = function(){//左箭头添加事件
var index = shufflingInfo.locality;
clearInterval(shufflingInfo.chron);//先清除定时器
if(index > 0 && index < shufflingInfo.length){
var punctList = shufflingInfo.punctList;
imgShift(punctList[index-1].children[1]);
}
autoShuffling();//切完图片激活定时器
}
rightToward.onclick = function(){//右箭头添加事件
var index = shufflingInfo.locality;
clearInterval(shufflingInfo.chron);//先清除定时器
if(index >= 0 && index < shufflingInfo.length - 1){
var punctList = shufflingInfo.punctList;
imgShift(punctList[index+1].children[1]);
}
autoShuffling();//切完图片激活定时器
}
}
function imgShift(element){//统一图片切换操作
if(punctOne(element) != null){
indesivery();
var imgSrc = eval(element.getAttribute("data")+".address");
node.element.style.zIndex = node.element.style.zIndex - 3;//顶层图片放在底层
node.element.style.opacity = 1;//底层图片设置透明度为1
node.element.style.opacity = 1;
node.pre.element.src = imgSrc;
node.next.element.style.opacity = 0;//下一层图片设置成0,在这tranform
node = node.next;//
}
}
function punctOne(pressLayer){//调整小点点的状态
var point = pressLayer.parentNode;
var intrapoint = point.children[0];
var punctList = document.getElementById("transpunction").children;
if(intrapoint.style.display == "block")
return null;
for(var i = 0 ; i < punctList.length; i++){
punctList[i].children[0].style.display = "none";
if(punctList[i].children[0] == intrapoint){
shufflingInfo.locality = i;
}
}
point.children[0].style.display = "block";
return pressLayer;
}
function indesivery(){//初始化轮播图的z-index属性
var priIndex = parseInt(shufflingInfo.primary.style.zIndex);
var dubIndex = parseInt(shufflingInfo.secondary.style.zIndex);
var trindex = parseInt(shufflingInfo.ternary.style.zIndex);
if((priIndex+dubIndex+trindex)<= 6){
shufflingInfo.primary.style.zIndex = parseInt(3+priIndex);
shufflingInfo.secondary.style.zIndex = parseInt(3+dubIndex);
shufflingInfo.ternary.style.zIndex = parseInt(3+trindex);
}
}
function createDot(imgName){//创建轮播小点点
var point = document.createElement("li");
var pressLayer = document.createElement("div");
var intrapoint = document.createElement("div");
point.className = "shufflingPoint";
pressLayer.id = imgName;
pressLayer.className = "pressLayer";
pressLayer.setAttribute("data",imgName);
intrapoint.className = "intrapoint";
intrapoint.style.display = "none";
point.insertBefore(intrapoint,null);
point.insertBefore(pressLayer,null);
return point;
}
function ShufflingInfo(imgList){//自定义轮播图对象
//储存轮播图的系列信息
this.imgList = imgList;//图片列表
this.punctList = document.getElementById("transpunction").children;//点列表
this.locality = 0;//当前轮播位置
this.length = imgList.length;//图片列表长度
this.nodes = node_Initial();//轮播链表
this.chron = null;//轮播定时器
this.primary = document.getElementById("primary");//轮播图1
this.secondary = document.getElementById("secondary");//轮播图2
this.ternary = document.getElementById("ternary");//轮播图3
}
function node_Initial(){
//初始化轮播图链表
//注意这里只有3个元素，因为我只用了三个图
var nodes = [
new Node(this.primary),
new Node(this.secondary),
new Node(this.ternary),
];
nodes[0].pre = nodes[2];
nodes[0].next = nodes[1];
nodes[1].pre = nodes[0];
nodes[1].next = nodes[2];
nodes[2].pre = nodes[1];
nodes[2].next = nodes[0];
return nodes;
}
function Node(element){//自定义双向链表对象
this.element = element;
this.pre = null;
this.next = null;
}
</script>
</html>
1732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
