基于jquery的轮播焦点图图-尊龙凯时

轮播焦点图

——仿淘宝尊龙凯时首页jquery轮播焦点图，我特意去taobao尊龙凯时首页看了下它的轮播，好像有点相似，我不保证是我写的这样。

本例来源：站长之家

我仿照这个，自己完全写了一遍。

最近在研究banner轮播的共同点，前面已经写了2篇了

一、首先按照惯例，写好静态的布局。

其实去掉overflow:hidden，本质就是横向排列的一排图片，依次进行位移。我用 7 张 520x280 的图片。故轮播盒子也就是520*280这么大，如下截图：

这是我写的html代码：

    
    
    
    created-20181024

view code

下面是css代码，直接在html中嵌入即可：

其中prev、next的箭头图标，我用的是网上这个精灵图 http://gtms01.alicdn.com/tps/i1/t1sznbfzlmxxx8qsdi-400-340.png

view code

二、用js编写轮播的动画。需要自己引入jquery库。

我注释比较详细，我写的有一点和原例不同，就是原来的是把自动播放和手动播放都写在一个方法里了，而我则是拆开了。

view code

另：自动播放、手动播放合并的方法

 //自动播放、手动播放合并的方法
    function play(obj, clasname) {
        if (!$('.piclist').is(":animated")) {
            if (classname == 'prevbtn') {  //当传递了play()方法classname时且=prevbtn,即点击“上一张"按钮
                if (currentpic == 1) {
                    $('.piclist').animate({ left: "-"   (picnumber - 1) * view_width},'slow');
                    currentpic = picnumber;
                } else {
                    $('.piclist').animate({  left: " ="   view_width},'slow');
                    currentpic--;
                }
            } else {     //当play()方法没有传参数、或者参数=nextbtn,都执行else中语句，即"自动播放"和"next"都是else语句
                if (currentpic == picnumber) {
                    $(".piclist").animate({ left: 0},'slow');
                    currentpic = 1;
                } else {
                    $(".piclist").animate({ left: "-="   view_width},'slow');
                    currentpic  ;
                }
            }
        }
    }

view code

最终效果：

如果视频效果加载不了，只能看图了