用js写图片轮播效果
轮播效果有两种,位移轮播(位移又分为上下和左右)和渐变轮播。两种轮播的HTML是一样的结构,只是css和js有一点点区别。
1、先分析页面结构(两种轮播方式都可以用着一个结构)
(1)由两部分组成,一个是轮播所用的图片,另一个是图片右下方的小圆点。
(2)用什么标签,层级结构是什么?当然这个界面比较简单先用一个大的div将图片和圆点都装起来,在用一个ul将图片装起来,圆点用span标签。
这样结构就写好了,再将图片放进去。(当然也可以用其他结构)
<!--图片轮播-->
<div class="big">
<!--内容部分-->
<ul class="pic" id="pic">
<li><img src="images/1.jpg" alt=""></li>
<li><img src="images/2.jpg" alt=""></li>
<li><img src="images/3.jpg" alt=""></li>
<li><img src="images/4.jpg" alt=""></li>
</ul>
<!--内容部分 end-->
<!--点-->
<div class="dian" id="dian">
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<!--点 end-->
</div>
<!--图片轮播 end-->
2、结构搭建好了,接下来就是样式了。(左右、上下轮播)
(1)连接样式表
(2)然后写公共样式
/*公共样式*/
*{margin:0 auto; padding:0;}
ul,li,ol{ list-style: none;}
img{border: none;}
/*公共样式*/
(3)写图片的样式,因为用的li标签,li是块级元素,让li标签左浮动,超出的部分隐藏。在设置一下宽高。
/*图片样式*/
.big{ width: 500px; height: 500px; overflow: hidden;position: relative; }
.pic{ width: 3000px;transition:all 0.5s;}
.pic>li{ float: left; width: 500px; height: 500px; overflow: hidden;}
/*图片样式 end*/
(4)点的样式
/*点的样式*/
.dian{height: 20px; right:20px; bottom:20px; position: absolute;}
.dian span{ display: inline-block; width: 20px; height: 20px; background: #666; border-radius: 20px; margin-right: 10px; cursor: pointer;}
.dian .on{background: #ff0;}
/*点的样式 end*/
3、接下来就是js的部分了。其实样式设置好了,js做的很简单,就是通过元素的id获取元素,不断地改变图片元素的位置。并给圆点添加点击的样式。(左右、上下轮播)
{
/*
* findSiblings : 找所有的兄弟节点
* 参数:tag 目标。找目标的所有的兄弟节点
* 举例:let xd = findSiblings("xID");
* 找指定标签的所有兄弟,返回一个数组
* */
let findSiblings = function( tag ){
let parent = tag.parentNode;
let childs = parent.children;
let Sibling = []; // 用来存储找到的兄弟们。
for( let i = 0 ; i <= childs.length-1; i++){
if( childs[i] !== tag ){
Sibling[ Sibling.length ] = childs[i];
}
}
return Sibling;
};
let d = document.getElementById('dian');
let p = document.getElementById('pic');
let lis = d.children;
for(let i = 0;i < lis.length;i++){
lis[i].addEventListener('click',function () {//添加点击监听事件
console.info(i);
//p.style.marginLeft = "-"+ 1200*i +"px";//左右轮播
p.style.marginTop = "-"+ 500 * i +"px";//上下轮播
lis[i].className = 'on';
let liSibing = findSiblings(this);
for (let j = 0 ;j<liSibing.length;j++){
liSibing[j].className = "";
}
});
}
}
4、渐变轮播的css样式
/*公共样式*/
*{margin:0 auto; padding:0;}
ul,li,ol{ list-style: none;}
img{border: none;}
/*公共样式*/
/*图片样式*/
.big{ width: 1200px;height: 500px;position: relative; }
.pic{ transition:all 0.5s;}
.pic>li{width: 1200px; height: 500px; display: none;overflow: hidden; /* 内容超出隐藏 */position: absolute; /*绝对定位,相互覆盖*/}
.pic > .showLi{display: block; animation: myAni 1s both;}
@keyframes myAni { 0%{opacity: 0;} 100%{opacity: 1;} }
/*图片样式 end*/
/*图标样式*/
.dian{height: 81px; right:38px; bottom:20px; position: absolute;}
.dian div{width: 81px; height: 81px;float: left; margin-right: 20px; cursor: pointer; border: 5px solid transparent;}
.dian .on{border: #fff solid 5px; border-radius: 5px;}
/*图标样式 end*/
5、渐变轮播的js样式
{
let dots = document.getElementById('small');
let picUl = document.getElementById("big");
let lis = picUl.children ;
let span = dots.children;
let Index = 0;
/*
* findSiblings : 找所有的兄弟节点
* 参数:tag 目标。找目标的所有的兄弟节点
* 举例:let xd = findSiblings("xID");
* 找指定标签的所有兄弟,返回一个数组
* */
let findSiblings = function( tag ){
let parent = tag.parentNode;
let childs = parent.children;
let Sibling = []; // 用来存储找到的兄弟们。
for( let i = 0 ; i <= childs.length-1; i++){
if( childs[i] !== tag ){
Sibling[ Sibling.length ] = childs[i];
}
}
return Sibling;
};
/*
* lunboFun : 轮播函数
* 功能:实现图片的滚动轮播;
* 参数:d 点所在的div id
* p 图片所在的 ul id
* 示例: lunboFun( "dotsId","ulId");
* 作者:XXX
* 时间:2019-3-26 v1
* */
let lunboFun = function(d,p){
let dots = document.getElementById(d);
let picUl = document.getElementById(p);
let lis = picUl.children ;
let span = dots.children;
for(let i=0 ; i <= lis.length-1 ; i++){
span[i].addEventListener("click",function(){
console.info(i); // 索引
//picUl.style.marginLeft = "-"+ 1200 * i +"px";
lis[i].className = 'showLi';
let lxd = findSiblings( lis[i] );
for(let j = 0 ; j <=lxd.length-1 ; j++){
lxd[j].className = "";
}
// 点的变化
this.className = "on";
let sxd = findSiblings( this );
for(let j = 0 ; j <=sxd.length-1 ; j++){
sxd[j].className = "";
}
console.info( sxd );
});
}// end for
};
lunboFun("dian","pic");
//实现图片自动播放
function toright() {
//已经是最后一张图(与第一张相同) 应下一次显示第二张
if(Index === lis.length){
picUl.style.left = “0px”;
Index = 0;
}
picUl.style.marginLeft = “-”+ 1200 * Index +“px”;
span[Index].className = “on”;
let xd = findSiblings( span[Index] );
for(let j = 0 ; j <=xd.length-1 ; j++){
xd[j].className = “”;
}
Index++;
console.info(Index);
}
let setAuto;
function auto(){
setAuto = setInterval(function () {
toright();
},1000);}
auto();
picUl.addEventListener('mouseenter',function () {
clearInterval(setAuto);
});
picUl.addEventListener('mouseleave',function () {
auto();
});
}
6、这样就完成了两种轮播方式,但是不足的是还不能让图片自动播放,等待后续学习后,在实现。