js轮播图

用js实现图片轮播的效果

之前拿css3的动画实现了一次轮播图,但是还是有很多地方不能完善,比如说不能左右按键切换


js实现轮播图的准备

1:若干张图片
2:用html构建大致的界面
3:用css样式进行渲染
4:js的DOM操作


一:用html构建出轮廓

a:先构建一个大盒子,用来确定整体轮播图的位置等要素
b:对图片和下标数字分别放两个小盒子
c:准备左右箭头的超链接

<div id="dahezi">
            <div id="tphz" style= "left:-600px">
                <img src=5.jpg alt="1" />
                <img src=1.jpg alt="1" />
                <img src=2.jpg alt="2" />
                <img src=3.jpg alt="3" />
                <img src=4.jpg alt="4" />
                <img src=5.jpg alt="5" />
                <img src=1.jpg alt="5" />
            </div>
            <div id="szhz">
                <span index="1" class="on"></span>
                    <span index="2"></span>
                    <span index="3"></span>
                    <span index="4"></span>
                    <span index="5"></span>
             </div>
            <a href="javascript:;" id="prev" class="arrow">&lt;</a>
            <a href="javascript:;" id="next" class="arrow">&gt;</a>
        </div>

二:css添加样式

a:设置html和body的border和padding以获取更好的观赏效果
b:利用overflow把多与的图片隐藏,只显示一张图
c:图片盒子绝对定位,便于操作(同理数字盒子也是一样)

 #dahezi {
            width: 600px;
            height: 400px;
            border: 3px;
            overflow: hidden;  
            position: relative;

这里的图片盒子宽度=(每一个图片宽度)*(用于轮播的图片数+2)(+2的原因是开头末尾各一个假图衔接)

#tphz {
            width: 4200px;
            height: 400px;
            position: absolute;
            z-index: 1;
        }

每一张图片的样式采用左浮动定位(从左往右播)便于计算和操作

 #tphz img {
            width: 600px;
            height: 400px;
            float: left;
        }

数字盒子主要是设置的层级要大于图片盒子,不然只能显示但是不能操作,定位方式也是绝对定位

#szhz {
            position: absolute;
            height: 10px;
            width: 100px;
            z-index: 2;
            bottom: 20px;
            left: 500px;
        }

三:js操作让盒子动起来

a:通过document获取图片、数字盒子和左右键的id

var tphz = document.getElementById('tphz');
var szhz = document.getElementById('szhz').getElementsByTagName('span');
var prev = document.getElementById('prev');
var next = document.getElementById('next');

b:给左右键添加onclick属性,点击左右键的时候使图片跟着动(数字盒子也是同样的道理)
c:图片盒子的移动,相当与是在一整个盒子的最左边,运动到视野的最右边的时候,然后把整个盒子拉回到初始位置,这样就可以实现轮播的效果,那么就只需要做一个判断,就是当盒子的左边界恰好等于宽度,就把盒子拉回去,然后这时候要移动的距离就是(盒子的宽度-假图的宽度),然后给盒子加一个计时器,就可以实现自由无线轮播了。

function animate(offset) {
    var newLj = parseInt(tphz.style.left) + offset;
    tphz.style.left = newLj + 'px';
    if (newLj > -600) {
        tphz.style.left = -3000 + 'px';
    }
    if (newLj < -3000) {
        tphz.style.left = -600 + 'px';
    }
}
function play() {
    timer = setInterval(function() {
    next.onclick();/*这个执行无限次*/
    }, 2000)
}

但是在定时器的使用的时候,不能点击太过于频繁,那样的话浏览器会现鬼畜,这个就是函数节流/函数防抖的知识,加以相对的处理,这里不过多说。
d:然后添加特效,使鼠标移入的时候轮播停止,移除的时候正常轮播。实现这个就需要一个timer变量来监控定时器,在鼠标移入的时候清楚定时器,移除恢复

function play() {
    timer = setInterval(function() {
        next.onclick();
    }, 2000)
}
function stop() {
    clearInterval(timer);
}
dahezi.onmouseover = stop;
dahezi.onmouseout = play;

上面的操作就可以实现图片的轮播效果了

总结一下js和css的轮播图的区别

1:让图片动起来,js是靠定时器把图片隔一段时间往前拉一定的距离,css是图片一直在偏移(js是图片盒子整体动,css是图片单个动)
2:css的轮播图更加的符合这个名字(在运动的时候很明显的看到是一张接着一张),js的感觉是闪现的(一张结束感觉瞬间消失新图瞬间出现)
3:从制作成本来说,css更好一些,从维护角度来说,加图片什么的,js更方便一些

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值