首页>案例集

JavaScript案例7:有小圆点导航和缩略图的幻灯片切换(两个版本)

很多幻灯片切换的时候,下面有一个对应的小圆点导航条。

这种案例的关键点是各自的下标传递,依然要用到自定义属性。

功能有:

1、点击下一张和上一张切换大图。

2、下面导航的小圆点的active高亮状态随着大图的切换跟着发生对应的变化。

3、点击小圆点的时候,大图跟着切换成对应的图片。

4、鼠标经过小圆点的时候,出现缩略图。

5、点击缩略图的时候,切换到对应的大图。

第一个版本,带小圆点导航的切换。

封装函数,使用精准的传递下标值实现图片切换和小圆点的active高亮切换效果。

带小圆点的幻灯片切换.gif

具体效果点击查看

一、html代码

<div id="banner">
    <img src="images/loading.gif" id="pic"/>
<ul id="nav">
</ul>
<a href="#" class="btn" id="prev"><i class="iconfont icon-left"></i></a>
<a href="#" class="btn" id="next"><i class="iconfont icon-right"></i></a>
</div>

二、css代码

body,ul{
    padding:0;
    margin:0;}
body{
    background:#e1e1e1;}
li{
    list-style:none;}
a{
    text-decoration:none;}
#banner{
    width:600px;
    height:375px;
    position:relative;
    margin:30px auto 0;
    background:#FFF1CE;
    text-align:center;
    }
#nav{
    position:absolute;
    width:100%;
    left:0;
    bottom:20px;
    }
#nav li{
    position:relative;
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:#fff;
    font-size:0;
    cursor:pointer;
    margin-right:8px;
    }
#nav li.active{
    background-color:#FF0;}
.slt{
    display:none;
    position:absolute;
    left:-45px;
    top:20px;
    border:3px solid #fff;
    }
.slt:before{
    content:"";
    position:absolute;
    border-bottom:6px solid #fff;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    left:50%;
    margin-left:-8px;
    top:-9px;
    }
.btn{
    position:absolute;
    width:50px;
    height:50px;
    line-height:50px;
    background:rgba(0,0,0,.2);
    border-radius:50%;
    top:50%;
    margin-top:-25px;
    transition:0.2s;
    }
.btn:hover{
    background:rgba(255,255,0,.7);}
#prev{
    left:20px;}
#next{
    right:20px;}
.iconfont{
    font-size:2rem;
    color:#fff;
    }

三、js代码

window.onload=function(){
    var oBanner=document.getElementById("banner");
    var oPic=document.getElementById("pic");
    var oUl=document.getElementById("nav");
    var aLi=oUl.getElementsByTagName("li");
    var aSmallPic=oUl.getElementsByClassName("slt");
    var oPrev=document.getElementById("prev");
    var oNext=document.getElementById("next");
    
    var aUrl=["images/org/1.jpg","images/org/2.jpg","images/org/3.jpg","images/org/4.jpg","images/org/5.jpg"];
    var aSlt=["images/slt/1.jpg","images/slt/2.jpg","images/slt/3.jpg","images/slt/4.jpg","images/slt/5.jpg"];
    
    var len=aUrl.length;
    var oldIndex=null; //定义一个null对象用来存放有active的li。
    
    //根据图片的多少加载小圆点导航列表
    for(var i=0;i<len;i++){
        oUl.innerHTML+='<li></li>'
        }
        
    //初始化   
    var num=0;
    oldIndex=aLi[num];
    tabPic();
    
    //上一张
    oPrev.onclick=function(){
        num--;
        if(num==-1){
            num=len-1;
            }
        tabPic();
        }
    //下一张
    oNext.onclick=function(){
        num++;
        if(num==len){
            num=0;
            }
        tabPic();
        }
    //小圆点点击切换class和图片。  
    for(var i=0;i<len;i++){
        aLi[i].index=i;
        aLi[i].onclick=function(){
            num=this.index;//把圆点的下标值赋值给num。
            tabPic();
            }
        }
        
    //图片切换函数,需要获得num值,就可以执行对应图片的显示和对应li的active高亮效果。 
    function tabPic(){
        oPic.src=aUrl[num];
        oldIndex.className='';
        aLi[num].className='active';
        oldIndex=aLi[num]; //把当前下标对应的li更新进oldIndex对象。
        }

    
        
    
    }

第二个版本,有缩略图和小圆点的导航。

封装函数,使用for循环实现active高亮的切换。

带小圆点和缩略图的幻灯片切换.gif

具体效果点击查看

一、html代码

<div id="banner">
    <img src="images/loading.gif" id="pic"/>
<ul id="nav">
</ul>
<a href="#" class="btn" id="prev"><i class="iconfont icon-left"></i></a>
<a href="#" class="btn" id="next"><i class="iconfont icon-right"></i></a>
</div>

二、css代码

body,ul{
    padding:0;
    margin:0;}
body{
    background:#e1e1e1;}
li{
    list-style:none;}
a{
    text-decoration:none;}
#banner{
    width:600px;
    height:375px;
    position:relative;
    margin:30px auto 0;
    background:#FFF1CE;
    text-align:center;
    }
#nav{
    position:absolute;
    width:100%;
    left:0;
    bottom:20px;
    }
#nav li{
    position:relative;
    display:inline-block;
    width:14px;
    height:14px;
    border-radius:50%;
    background-color:#fff;
    font-size:0;
    cursor:pointer;
    margin-right:8px;
    }
#nav li.active{
    background-color:#FF0;}
.slt{
    display:none;
    position:absolute;
    left:-45px;
    top:20px;
    border:3px solid #fff;
    }
.slt:before{
    content:"";
    position:absolute;
    border-bottom:6px solid #fff;
    border-left:5px solid transparent;
    border-right:5px solid transparent;
    left:50%;
    margin-left:-8px;
    top:-9px;
    }
.btn{
    position:absolute;
    width:50px;
    height:50px;
    line-height:50px;
    background:rgba(0,0,0,.2);
    border-radius:50%;
    top:50%;
    margin-top:-25px;
    transition:0.2s;
    }
.btn:hover{
    background:rgba(255,255,0,.7);}
#prev{
    left:20px;}
#next{
    right:20px;}
.iconfont{
    font-size:2rem;
    color:#fff;
    }

三、js代码

window.onload=function(){
    var oBanner=document.getElementById("banner");
    var oPic=document.getElementById("pic");
    var oUl=document.getElementById("nav");
    var aLi=oUl.getElementsByTagName("li");
    var aSmallPic=oUl.getElementsByClassName("slt");
    var oPrev=document.getElementById("prev");
    var oNext=document.getElementById("next");
    
    var aUrl=["images/org/1.jpg","images/org/2.jpg","images/org/3.jpg","images/org/4.jpg","images/org/5.jpg"];
    var aSlt=["images/slt/1.jpg","images/slt/2.jpg","images/slt/3.jpg","images/slt/4.jpg","images/slt/5.jpg"];
    var len=aUrl.length;
    
    //导航小圆点
    for(var i=0;i<len;i++){
        oUl.innerHTML+="<li>"+i+"<span class='slt'><img src='"+aSlt[i]+"'></span></li>"
        }
//初始化       
    var num=0;
    showPic();
//点击上一张 
    oPrev.onclick=function(){
        num--;
        if(num==-1){
            num=len-1;}
        showPic();
        }
//点击下一张
    oNext.onclick=function(){
        num++;
        if(num%len==0){
            num=0;}
        showPic();
        }
//点击小圆点切换
    for(var i=0;i<aLi.length;i++){
        aLi[i].index=i;
        aLi[i].onclick=function(){
            num=this.index; //把当前的索引值赋值给num。
            showPic();
            }
        //鼠标经过出现缩缩略图
        aLi[i].onmouseover=function(){
            //alert(this.index);
            //alert(aSmallPic[this.index]);
            aSmallPic[this.index].style.display="block";
            }
        aLi[i].onmouseout=function(){
            aSmallPic[this.index].style.display="none";
            }   
        }
    //封装成函数 
    function showPic(){
        oPic.src=aUrl[num];
            for(var i=0;i<aLi.length;i++){
                aLi[i].className="";
            }
            aLi[num].className="active";
        }   
        
    
    }

案例下载地址:

链接: https://pan.baidu.com/s/1P1P_uqPcHhJRyd_FQ4gI4A 提取码: uxgy 

点赞


4
保存到:

相关文章

Top