如何设计开发一个图片轮播组件？简述要点或写代码。_京东笔试题

推荐

hakz

给出一个比较通用的方法。

① 整个组件采用ViewPager

② 适配器继承自PagerAdapter

③ 重写getCount()，isViewFromObject(View arg0, Object arg1)，destroyItem(ViewGroup container, int position, Object object)，instantiateItem(ViewGroup container, int position)四个方法。

④ getCount代表返回的条目，要实现无限轮播，这里就要给出一个很大的值，我们可以采Integer.MAX_VALUE。其他的和普通ViewPager开发一样，在isViewFromObject返回arg0 == arg1，在

destroyItem中摧毁滑出的View,container.removeView((View) object),在instantiateItem中添加对应的item,记得添加item,container.addView(child)。里面的postion都要做取余处理，避免数组越界。

⑤ 在一开始展示的时候，把item定位到较中间的位置，这里我采用vp.setCurrentItem(10000 * ids.length)。当然这样只是一个滑不到边界的轮播，并不是真正的首尾相连的轮播。

⑥ 最后，可以使用一个handler实现自动轮播，重写onTouchEvent来对自动轮播控制。还可以将这些全部封装起来，当一个自定义view使用。

推介一个GitHub，个人觉得写得很好的一个轮播。

https://github.com/youth5201314/banner

编辑于 2017-05-22 15:26:22 回复(0)

爱到荼蘼_却不肯回头

用js实现简单的图片轮播功能：
//forTese.js

'use strict'

//自动轮播功能
    var count=0,
        timer,
        isgo = true;
    var ul_img = document.getElementsByClassName("ul_img");
    var li_img = document.getElementsByClassName("li_img");
    function showtime() {
        timer = setInterval(function(){
            if(isgo){
                count++;
                ul_img[0].style.transform = "translateX("+ -400*count +"px)";
                if(count >= li_img.length-1){
                    count=li_img.length-1;
                    isgo = false;
                }
            }else{
                count--;
                ul_img[0].style.transform = "translateX("+ -400*count +"px)";
                if(count <= 0){
                    count =0;
                    isgo = true;
                }
            }
        },4000);
    }
    showtime();
//点击左右切换功能
    var arrow = document.getElementsByClassName("arrow");
    for(var i = 0; i<arrow.length; i++){
        arrow[i].onmouseover = function () {
            clearInterval(timer);
        }
        arrow[i].onmouseout = function () {
            showtime();
        }
        arrow[i].onclick = function(){
            //点击向右
            if(this.title == "1") {
                if (count == 0) count = 3;
                else count--;
            }else{
                if(count == 3) count = 0;
                else count ++;
            }
            ul_img[0].style.transform = "translateX("+ -400*count +"px)";
        }
    }
//下面标签条对应图片功能
    var div_btn = document.getElementsByClassName("div_btn");
    div_btn[0].style.backgroundColor="aqua";
    for(var i = 0;i<div_btn.length;i++){
        div_btn[i].index = i;
        div_btn[i].onmouseover = function () {
            clearInterval(timer);
            for( var j = 0;j<div_btn.length;j++){
                div_btn[j].style.backgroundColor="aquamarine";
            }
            div_btn[this.index].style.backgroundColor="aqua";
            count = this.index;
            if(count == 3) isgo=false;
            if(count == 0) isgo=true;
            ul_img[0].style.transform = "translateX("+ -400*count +"px)";
        }
        div_btn[i].onmouseout = function () {
            showtime();
        }
    }

forTest.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="./jquery-3.2.1.js"></script>
    <link rel="stylesheet" href="./forTest.css" type="text/css">
    <title>Title</title>

</head>
<body>

<div class="main_div">
    <div class="arrows">
        <span title="1" class="arrow"><</span>
        <span title="0" class="arrow" style="float:right;">></span>
    </div>
    <ul class="ul_img">
        <li class="li_img"><img src="./img/1.jpg" ></li>
        <li class="li_img"><img src="./img/2.jpg" ></li>
        <li class="li_img"><img src="./img/3.jpg" ></li>
        <li class="li_img"><img src="./img/4.jpg" ></li>
    </ul>
</div>
<div style="margin-left:550px;">
    <div class="div_btn"></div>
    <div class="div_btn"></div>
    <div class="div_btn"></div>
    <div class="div_btn"></div>
</div>

</body>
<script src="forTest.js" type="text/javascript"></script>
</html>

forTest.css


.main_div{
    width:400px;
    overflow:hidden;
    position:relative;
    left:500px;
    top:30px;
}
.ul_img{
    width:6000px;
    padding:0px;
    margin:0px;
    transition:all 2s;
}
.li_img{
    width:400px;
    height:550px;
    float:left;
    list-style:none;
}
img{
    width:100%;
}
.arrows {
    z-index: 9999;
    position: absolute;
    padding-top: 250px;
    width: 400px;
}

.arrows span {
    font-size: 3em;
    color: seashell;
}

.arrows span:hover {
    /*变小手*/
    cursor: pointer;
    background-color: rgba(192, 192, 192, 0.29);
}

.div_btn {
    float: left;
    border-radius: 100px;
    background-color: aquamarine;
    width: 60px;
    height: 10px;
    margin-left: 10px;
    margin-top: 40px;
}

.div_btn:hover {
    background-color: aqua;
}

发表于 2017-09-07 21:12:27 回复(0)

chenxd

首先是需要哪些html元素：

三个<img alt="description"

三个圆点<ul li

图片下方的标题<div id="title"

js：

首先初始化

init：function（）{

$('#banner img').css('display','none');

$('#banner img').eq(0).css('display','block');

$('#banner ul').css('color','grey');

$('#banner ul li').eq(0).css('color','black');

$('#banner #title').html($('#banner img').eq(0).attr('alt')); #此处省略自定义方法：eq获得第几个子节点，attr获得属性

}

然后实现轮播器

func:function（）{

#鼠标进入和鼠标离开

$('#banner ul li').hover(function（）{

$('#banner img').css('display','none');

$('#banner img').eq($(this).index()).css('display','block');

$('#banner ul').css('color','grey');

$('#banner ul li').eq($(this).index()).css('color','black');

$('#banner #title').html($('#banner img').eq($(this).index()).attr('alt')); #此处省略自定义方法：eq获得第几个子节点，attr获得属性

}，function（）{});

}

#重写方法index（）：获取某个节点在整个节点组中是第几个索引

Base.prototype.index = function（）{

var children = this.elements[0].parentNode.chidren;

for(var i=0;i<children.length;i++){

if(this.elements[0]==children[i]) return i;

}

发表于 2017-09-23 13:25:46 回复(0)

MFYNGUFD

function animate(obj,json,fn) {
    // 第一参数 动的对象   2  attr  动的那个属性   3   属性值少多少
    clearInterval(obj.timer);
    obj.timer = setInterval(function() {
        var flag = true;  //  用来判断是否停止定时器   定时器的里面
        //  每隔 30 毫秒就要运行一次
        for(var k in json) {  // k 属性     json[k] 是属性值
            // 第一 k 是 width
            // 第二 k     height
            //  leader  =  600 -  100
            // leader = leader + (target - leader )  /10 ;
            //  计算步长
            // target 目标位置    leader 不清楚，我们不知道用户改那个属性
            // 检测用户给我们了什么属性，  我们就用这个属性的值 来计算
            // 我们怎么知道用户给我们属性，我们怎么又能得到属性的值呢？
            //  var leader = obj.style[attr];  他只能得到行内式
            var leader = 0;
            // 因为透明度是 小数   取值 0~1 之间    第二个  它没有单位
            if(k == "opacity") {
                // 先解决小数的问题
                leader =  Math.round(getStyle(obj,k) * 100) || 100;
                // 如果没有opacity  默认当 1 看    1* 100  = 100
                // 我们去过来的是  0.3  但是小数不好计算 我们乘以100   30  好计算
            }
            else {
                leader = parseInt(getStyle(obj,k)) || 0;
                // 他本身有单位 所以要去掉    默认的默认是 0
            }
            //去掉px 的方法   parseInt(25px)   25
            /* alert(leader);*/
            var step = (json[k] - leader) / 10;
            step = step > 0 ? Math.ceil(step) : Math.floor(step);
            leader = leader + step;
            if( k == "opacity") {   // 记住我们的透明是不加单位的  不要加px
                obj.style.opacity = leader / 100;
//                    opacity: 0.4;
//                    filter: alpha(opacity = 40);     /*不能改只能是 40  不能是 0.4*/
                obj.style.filter = "alpha(opacity = "+leader+")";
            }
            // 设置层级
            else if(k == "zIndex") {
                obj.style.zIndex = json[k];    //  直接给值
            }
            else {
                obj.style[k] = leader + "px";   // 其他的要单位
            }
            if(leader != json[k]) {  //  只要三个属性有一个没有到达，我就取反
                // 这句话要写到 for in 里面   因为有三个属性，所以用 for in 才能遍历
                // 三个都到了 都不执行这句话了
                flag = false;
            }
        }
        // console.log(flag);
        if(flag) {
            clearInterval(obj.timer);
            if(fn){   // 如果有函数传递过来  ， 定时器结束了，说明动画结束  可以执行 回调函数
                fn();   // 执行函数  fn + ();
            }
        }
    },30)
}

发表于 2018-04-08 22:48:06 回复(0)

sq-zhou

图片轮播组件的主要思想：

主要有三个节点：父节点（position：relative），子节点（position：absolute），子子节点（一般有宽度的块级元素）

1、设置样式：可以通过设置父节点的宽度、高度确定（设置overflow为hidden），子节点确定高度和宽度。

2、设置回返轮播：主要可以设置定时器（setTimeout（函数里面包含setTimeout）），然后定时器每次改变都能改变子节点的left值，让left不断减少，为负数。如果到了尽头，就让子节点为left为0；

代码：

var childNodeLeft ;// 要获取实际的高度

var maxLeft = 10000, rollWidth=200;

setTimeout(function(){

if(childNodeLeft <10000) {

//子节点left-200

}else {

//子节点为left为0

}

},2000)

发表于 2018-04-08 11:15:33 回复(0)

杜小白

用css实现的一个简单轮播图。 <!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <title>简易轮播图效果</title>     <style type="text/css">         * {             margin: 0;             padding: 0;             font: normal 12px/1.5em Verdanda,Lucida, Arial, Helvetica, "宋体";         }         .wapper {             width: 500px;             height: 500px;             border: 1px solid #333333;             background: #CCCCCC;             text-align: center;         }         .content {             width: 480px;             height: 460px;             margin: 10px auto 0;             overflow: hidden;             border: 1px solid #999999;             background: #FFFFFF;         }         .box {             float: left;             width: 460px;             height: 450px;             margin-bottom: 10px;             padding: 10px;             overflow: auto;         }         .pagger {             width: 480px;             height: 20px;             margin: 5px auto;             text-align: right;         }         .pagger a {             padding: 2px 4px;             text-decoration: none;             color: #FFFFFF;             background: #FF0000;         }         .pagger a:hover {             color: #000000;             background: #FFFFFF         }     </style> </head> <body>     <div class="wapper">         <div class="content">             <div class="box" id="a1">                 <h2>幻灯片的简单模拟-使用CSS</h2>                 <p>第一屏</p>             </div>             <div class="box" id="a2">                 <p>第二屏</p>             </div>             <div class="box" id="a3">                 <p>第三屏</p>             </div>             <div class="box" id="a4">                 <p>第四屏</p>             </div>             <div class="box" id="a5">                 <p>第五屏</p>                 <p>第五屏</p>                 <p>第五屏</p>                 <p>第五屏</p>             </div>         </div>         <div class="pager">             <a href="#a1">1</a>             <a href="#a2">2</a>             <a href="#a3">3</a>             <a href="#a4">4</a>             <a href="#a5">5</a>         </div>     </div> </body> </html>

发表于 2018-03-20 10:04:22 回复(0)

刘晓媛

 function $( v ){ if( typeof v === 'function' ){
      window.onload = v;  } else if ( typeof v === 'string' ) { return document.getElementById(v);  } else if ( typeof v === 'object' ) { return v;  }
} function getStyle( obj, attr ){ return obj.currentStyle ? obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } function addZ(iNum){ return iNum<10 ? "0"+iNum : ""+iNum; } function doMove(obj,speed,end,attr,endFn){ var oldAttr = parseInt(getStyle(obj,attr));  oldAttr>end ? speed = -speed : speed = speed;  clearInterval(obj.timer);  obj.timer = setInterval(function(){ var newAttr = parseInt(getStyle(obj,attr)) + speed;  if(newAttr>=end&&speed>0||newAttr<=end&&speed<0){
         clearInterval(obj.timer);  obj.style[attr] = end+"px";  //if(endFn){endFn();}  endFn && endFn();  }else{
         obj.style[attr] = newAttr +"px";  }
   },30);

发表于 2017-09-08 11:39:56 回复(0)

W-ch

首先要有一组图片，给每个图片进行编号

在一个容器里边放图片，容器下方设置无序列表，标号用1开始增大，并绑定点击事件。每次点击时将容器里图片的地址改为对应序号的图片地址

发表于 2017-07-19 16:38:22 回复(0)

安安要做程序媛

1. 将所有图片并排放到一个div中然后再放到展示固定大少的窗口当中，让带所有图片的div左右来回切换达到图片滑动

2. 展示窗口的div设置overflow:hidden;只显示窗口的一张图片，把左右两边的都隐藏起来。

3. 利用循环实现。

发表于 2017-07-11 16:03:20 回复(0)

仰望嘞

首先需要有存放图片，小圆点和按钮的容器，然后对其进行添加相应的dom事件，（注意点：所有的元素需要一个根节点包尾）

发表于 2017-07-07 19:32:17 回复(0)

如何设计开发一个图片轮播组件？简述要点或写代码。

问题信息

热门推荐

相关试题