资讯专栏INFORMATION COLUMN

JS实现轮播图思路整理

keithyau / 2736人阅读

摘要:结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左

html结构层


css表现层

.index-banner  {
    position: relative; 
    width:1610px;
    height: 461px;
    margin:0 auto; 
    overflow: hidden; 
}
.index-banner .banner-list{
    position: absolute;
    width:8050px; 
    height: 461px;
    z-index: 1;  
}
.index-banner .banner-list a{ 
    display: block; 
    float: left;
    width:1610px;
    height:461px; 
}
.banner1{  
    background: url("../images/banner1.jpg") no-repeat; 
} 
.banner2{  
    background: url("../images/banner2.jpg") no-repeat; 
} 
.banner3{  
    background: url("../images/banner3.jpg") no-repeat; 
}
.index-banner .slide{
    position: absolute;
    z-index: 2; 
    left:50%;
    margin-left:-5px;
    bottom: 20px;
}
.index-banner .slide span{
    display: inline-block;
    cursor: pointer;
    margin-right: 10px; 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #fff;
}
.index-banner .slide .active{
    background-color: #000;
}
.arrow { 
    cursor: pointer; 
    position: absolute;
    z-index: 2; 
    top: 180px; 
    display: none; 
    line-height: 70px; 
    text-align: center; 
    vertical-align: middle;
    font-size: 35px; 
    font-weight: bold; 
    width: 50px; 
    height: 70px;  
    background-color: RGBA(0,0,0,.3); 
    color: #fff;
}
.arrow:hover { background-color: RGBA(0,0,0,.7);}
.index-banner:hover .arrow { display: block;}
 #prev { left: 20px;}
 #next { right: 20px;}

JS实现原理:通过改变图片的偏移量来实现图片的切换
实现步骤:1、通过documnet.getElementById()获取页面需要操作的元素

window.onload=function(){

var banner=document.getElementById("banner");//获取轮播图父容器;
var list=document.getElementById("banner_list");//获取图片列表;
var buttons=document.getElementById("slideBtn").getElementsByTagName("span");//获取图片切换圆点按钮;
var pre=document.getElementById("prev");//获取向左切换箭头
var next=document.getElementById("next");//获取向右切换箭头; 

2、实现左右箭头的切换:给左右箭头绑定点击事件;
问题:在左右切换过程中会在图片切换完会显示空白?
解决方法:使用无限滚动的技巧,即实现循环无缝切换:
1)在页面图片列表的开始加上最后一张图片的附属图,在最后加上第一张图片的附属图
2)每次切换时判断切换后的位置是否大于-1610px或是小于-4830px(即是否切换到附属图的位置):
如果大于-1610px,就把图片重新定位到真正的最后一张图的位置:-4830px;
如果小于-4830px,就把图片重新定位到真正的第一张图的位置:-1610px;

var index=1;//用于存放当前要显示的图片,初始值为第一张图片
var animated=false;//优化动画执行效果,只有当前切换动画未执行时,才能被执行。解决当前动画执行未完成时,多次点击切换按钮导致的页面卡图现象,初始值为false

pre.onclick=function(){
        //切换到当前图片左边的图片,如果当前是第一张,会切换到最后一张
        if(index==1){
            index=3;
        }
        //否则会切换到前一张,即index-1
        else{
            index-=1;    
        }
        //每次点击时,判断animated为false时执行切换
        if(!animated){
            animate(1610);    
        }
        
        //设置当前圆点按钮样式切换到选中状态,其他圆点为未选中状态
        showBtn();
    }
next.onclick=function(){
        //切换到当前图片右边的图片,如果当前是最后一张,会切换到第一张
        if(index==3){
            index=1;
        }
        //否则会切换到下一张,即index+1
        else{
            index+=1;    
        }
        //每次点击时,判断animated为false时执行动画
        if(!animated){
            animate(-1610);    
        }
        //设置当前圆点按钮样式切换到选中状态,其他圆点为未选中状态
        showBtn();
    }
    
    
//将偏移的动作封装到函数animate()中
function animate(offset){ 
    animated=true;//调用animate()切换时设置为true;
    var newleft=parseInt(list.style.left)+offset;//偏移之后的位置
    var time=500;//位移总时间
    var interval=10;//位移间隔时间
    var speed=offset/(time/interval);//每次位移量 =总偏移量/次数

function go(){//递归,在函数内部调用自身实现入场图片500ms淡入的效果            
   //判断偏移量是否达到了目标值,如果没有,在原来的基础上继续移动
        if((speed<0 && parseInt(list.style.left)>newleft)||(speed>0 && parseInt(list.style.left) -1610 ){
                list.style.left="-4830px";
            }
            if( newleft < -4830){
                list.style.left="-1610px";
            }
        }
    } 
    go();//调用animate()时执行go()函数 

}

//将圆点按钮样式切换封装到showBtn()函数中
    function showBtn(){
        //遍历圆点按钮数组
        for(var i=0;i

3、实现圆点按钮点击切换:遍历底部圆点按钮数组,为每个按钮添加点击事件

for(var i=0;i

4、实现图片自动切换:实现每5s切换图片,图片循环播放;

 var timer;//设置自动播放的定时器
    function play(){
            //设置定时器,每隔5s点击右键头切换按钮
            timer=setInterval(function(){ 
                next.onclick(); 
            },5000);
        }
        function stop(){
            //暂停自动播放
            clearInterval(timer);
        }
    
        banner.onmouseover=stop;//鼠标悬停某张图片,则暂停切换;
        banner.onmouseout=play;//鼠标移除时,继续自动切换;
    
        play();//初始化时执行自动播放
        
    }//window.onload加载完成
    
使用jquery实现如下,思路不变:
 $(function () {
            var banner= $("#banner");
            var list = $("#banner_list");
            var buttons = $("#slideBtn span");
            var prev = $("#prev");
            var next = $("#next");
            var index = 1; 
            var interval = 5000;
            var timer;


            function animate (offset) {
                var left = parseInt(list.css("left")) + offset;
                if (offset>0) {
                    offset = "+=" + offset;
                }
                else {
                    offset = "-=" + Math.abs(offset);
                }
                list.animate({"left": offset}, 500, function () {
                    if(left > -1610){
                        list.css("left",-4830);
                    }
                    if(left < 4830) {
                        list.css("left",-1610);
                    }
                });
            }

            function showButton() {
                buttons.eq(index-1).addClass("active").siblings().removeClass("active");
            }

            function play() {
                timer = setTimeout(function () {
                    next.trigger("click");
                    play();
                }, interval);
            }
            function stop() {
                clearTimeout(timer);
            }

            next.bind("click", function () {
                if (list.is(":animated")) {
                    return;
                }
                if (index == 3) {
                    index = 1;
                }
                else {
                    index += 1;
                }
                animate(-1610);
                showButton();
            });

            prev.bind("click", function () {
                if (list.is(":animated")) {
                    return;
                }
                if (index == 1) {
                    index = 3;
                }
                else {
                    index -= 1;
                }
                animate(1610);
                showButton();
            });

            buttons.each(function () {
                 $(this).bind("click", function () {
                     if (list.is(":animated") || $(this).attr("class")=="active") {
                         return;
                     }
                     var myIndex = parseInt($(this).attr("index"));
                     var offset = -1610 * (myIndex - index);

                     animate(offset);
                     index = myIndex;
                     showButton();
                 })
            });

            banner.hover(stop, play);

            play();

        });

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/49987.html

相关文章

  • JS实现播图思路整理

    摘要:结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

    Anonymous1 评论0 收藏0
  • JS实现播图思路整理

    摘要:结构层表现层实现原理通过改变图片的偏移量来实现图片的切换实现步骤通过获取页面需要操作的元素获取轮播图父容器获取图片列表获取图片切换圆点按钮获取向左切换箭头获取向右切换箭头实现左 html结构层 ...

    Meathill 评论0 收藏0
  • 写jquery插件【播图】历程

    摘要:轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的。 轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图 首先,轮播图插件其实并不是我第一次写,之前也写过,不过那时候是按照别人的思路写下来的,算起来大概有一年了,这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1...

    khlbat 评论0 收藏0
  • 写jquery插件【播图】历程

    摘要:轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的。 轮播图插件的任务已经接近尾声,在书写轮播图期间确实有一些小的感触的。感兴趣的可以访问我的轮播图的线上地址:轮播图 首先,轮播图插件其实并不是我第一次写,之前也写过,不过那时候是按照别人的思路写下来的,算起来大概有一年了,这次又一次开始轮播图是因为拜读了《单页面Web应用 JavaScript从前端到后端》的这本书的1...

    snowLu 评论0 收藏0
  • 用CSS3 transition属性实现淡入淡出播图

    摘要:最近想自己写下轮播图,在网上发现一个网友用属性实现的轮播,赶脚超简单哦,自己学习了后整理如下。如果我们用给加上类,的就要变成对吧,由于有属性,所以要等,才能完全变为,实现了淡入。最近想自己写下轮播图,在网上发现一个网友用CSS transition属性实现的轮播,赶脚超简单哦,自己学习了后整理如下。(找不到原网址了-.-...就不贴了...)(如果不了解transition,先去这里(点我,...

    Heier 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<