首页新闻找找看学习计划

轮播图 循环轮播

0
悬赏园豆:50 [待解决问题]
<div class="slide">
    <div class="slide-list" id="slidet">
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">00000000</span>
    </div>
    <div class="block">
            <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">11111111</span>
    </div>
    <div class="block">
            <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">22222222</span>
        </div>
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">33333333</span>
    </div>
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">44444444</span>
    </div>
    <div class="block">
        <img src="img/drawable-hdpi/16-jp.png"/>
        <span style="position: absolute;top: 10px;left: 10px;color: red;">55555555</span>
    </div>
    </div>
    <div class="dot-list">
        <div class="dot-wapper">
            <div class="dot dot-active"></div>
        </div>
        <div class="dot-wapper">
            <div class="dot"></div>
        </div>
        <div class="dot-wapper">
            <div class="dot"></div>
        </div>    
        <div class="dot-wapper">
                <div class="dot"></div>
        </div>    
    </div>
</div>        

这是html 代码

.slide{position: relative; width: 100%;height: 153px;}
.slide-list{position: absolute;width: 600%;left: -100%;transform: translate3d(0px,0px,0px);transition-duration: 300ms;}
.block{position:relative;float: left; width: 16.66%;}

.dot-list{position: absolute;right: 5%;bottom: 8%;}
.dot-wapper{position: relative; float: left;width: 20px;height: 20px;}
.dot{width: 50%;height: 50%;border-radius: 50%;background: #DDDDDC;
             margin: 0 auto; /*水平居中*/
          position: relative;  /*垂直居中*/
        top: 50%;
        transform: translateY(-50%)}
.dot-active{background: #999898;}

这是css 

function $id(id){
    return document.getElementById(id);
}
function $className(name){
    return document.getElementsByClassName(name);
}
function $tagName(name){
    return document.getElementsByTagName(name);
}


/**
 * 轮播图
 */
window.onload = sliderShow;


function sliderShow(){ 
    var stop;
    var index=0;
    var bd=document.documentElement.clientWidth;
    console.log("sss")
    autoPage();
    //自动 下一页
    function autoPage(){
        stop=setInterval(function(){
                nextimg();
            },5000);
    }    
    
    
    function trans(val){
        $id("slidet").style.transform="translate3d("+val+"px,0px,0px)";
    }
    
    //下一页
    function nextimg(){
        index++;
        if(index==$className("block").length-2){
            index=0;
        } 
        trans(-index*bd);
        //调用圆点移动  
        dotMove();
    }
    //上一页 
    function upimg(){
        index--;
        if(index==-1){
            index=$className("block").length-3;
        } 
        trans(-index*bd);
        //调用圆点移动  
        dotMove();
    }
    
    //右下角圆点 移动
    function dotMove(){
        console.log(index);
        for(var i=0;i<$className("dot").length;i++){
            $className("dot")[i].className="dot";
        }
        //设置活动 圆点
        console.log("sss"+index);
        $className("dot")[index].className="dot dot-active";
    }
    
    /**
     * 触摸事件
     */
    var startY;
    var startX;
    var startLeft;
    $id("slidet").ontouchstart=function(e){
        clearInterval(stop);
        $id("slidet").style.transitionDuration="0ms";
        //touchs 是一个长度为1 的数组
        var touch=e.touches[0];
        startX=touch.clientX;
    }
    $id("slidet").ontouchmove=function(e){
        e.preventDefault();
        var touch=e.touches[0];
        moveX=touch.clientX;
        var endX=-index*bd+moveX-startX;
        trans(endX);
    }
    $id("slidet").ontouchend=function(e){
        var val;
        var touch=e.changedTouches[0];
        endX=touch.clientX;
        val=startX-endX;
        $id("slidet").style.transitionDuration="300ms";
        if(Math.abs(val)>=bd/2){
            if(val>0){
                nextimg();
            }
            if(val<0){
                upimg();
            }
        }else{
            trans(-index*bd);
        }
        
        autoPage();
    }
}

这里是js 的代码

 

问题:本人新手,这是我自己写的,但是这个轮播图,从最后一张到第一张的效果是,最后一张平移到第一张,1秒的过渡效果。我希望能循环轮播。

我在下一页里面,当

if(index==$className("block").length-2){
//设置过渡时间为0ms 不起作用
    $id("slidet").style.transitionDuration="0ms";
//平移到第0张 也不起作用
trans(-bd); index
=0; }

但是,如果在一页里面

if(index==$className("block").length-2){
    //停止自动播
clearInterval(stop);
//设置过渡时间为0ms 这样就能实现效果,但没办法继续轮播了。
    $id("slidet").style.transitionDuration="0ms";
//平移到第0张图片
trans(-bd); index=0;
    //结束 函数
    return ;
}
因为不想用插件,插件代码又看不懂,而且只会用html css js 。
希望帮忙 改改 或者 提供一下 思路我自己改,也可以。实在是想不出办法了,卡了两天了。
warmsimle9的主页 warmsimle9 | 初学一级 | 园豆:156
提问于:2018-07-23 13:58
< >
分享
所有回答(3)
0

你发现没有,你的轮播不能轮播完全部的图片。

下面是你实现轮播思路的一些问题:

你每次轮播的时候,都把<div class="slide-list" id="slidet"></div>元素往左移动浏览器窗口的尺寸大小。如果轮播的的图片多,窗口尺寸大,移动的距离就越长(你的代码,出现从最后一张到第一张往右平移的效果原因 也在这里。)

你可以参考如下思路改进:

1.每次只显示一张图片(其他图片隐藏起来)

2.轮播时,隐藏当前这张图片,并且设置显示下一张图片为可见的(并且使用从右到左的动画滑入)。

3.圆点的数量应该和图片的数量保持一致,这样的话,用户可以选择查看某一张图片。

4.如果用户点击某个圆点,其实现思路和轮播的思路差不多。

5.如果鼠标移动进入图片,停止动画,如果鼠标移动离开图片,开始动画。

 

你还可以继续丰富轮播的功能,有什么问题可以发出现来大家讨论讨论。

HDWK | 园豆:206 (菜鸟二级) | 2018-07-23 15:37

1.我知道不能轮播完全部的图片,我特意留着第0张和第五张的,移动的距离是根据图片的多少来定的。

2.每次只能显示一张:这个我是为了看着方便,所以body里面没用设置overflow-x:hidden

3.圆点的问题,因为是只播1至4张,所以只有4个点。

4.圆点,不用事件,能保证对应每张图就行了。

问题,我只想,当图片移动到最后一张后,回到第一张,轮播能串联起来。无缝轮播。

我上面代码的效果,是到第四张图片后,会从4-3-2-1,而不是从4-1,。

.....................................................

支持(0) 反对(0) warmsimle9 | 园豆:156 (初学一级) | 2018-07-23 15:49

@warmsimle9:你可以让每次移动的距离为direction*db,direction可以通过是否是在第一张或是最后一张,来改变方向。

支持(0) 反对(0) HDWK | 园豆:206 (菜鸟二级) | 2018-07-23 16:02

@HDWK: 你的意思是 来回播吗? 就是 从1-2-3-4,再从4-3-2-1

支持(0) 反对(0) warmsimle9 | 园豆:156 (初学一级) | 2018-07-23 16:04

@warmsimle9: 刚才没理解到你的意思,你的意思是从1-2-3-4-1-2-3-4-1...这样循环吗?你上面的代码之所以会从4-3-2-1是因为你移动距离的原因?你每次移动是-index*db,假如db为100,也就是-100,-200,-300,-400,然后index会变成0,就是从-400移动到0,当然会经过-300,-200,-100的图片咯。

支持(0) 反对(0) HDWK | 园豆:206 (菜鸟二级) | 2018-07-23 16:10

@HDWK: 你说对啦,就是从-400移动到0,会经过-300,-200,-100的图片。但是,如果过度时间设置为0 // $id("slidet").style.transitionDuration="0ms";//就可以瞬移过去的,只是好像设置为0ms后,再设置成300ms,0ms 这个效果就没了- -!!!

支持(0) 反对(0) warmsimle9 | 园豆:156 (初学一级) | 2018-07-23 16:18

@warmsimle9: 这样能不能符合要求:

    function nextimg(){
        index++;
        if(index==$className("block").length-2){
            $id("slidet").style.transitionDuration="0ms";
            trans(-bd);
            index=0;
        }
        console.log("length:"+$className("block").length);
        trans(-index*bd);
        //调用圆点移动  
        dotMove();
        if(index==0){
            $id("slidet").style.transitionDuration="300ms";
        }
    }

支持(0) 反对(0) HDWK | 园豆:206 (菜鸟二级) | 2018-07-23 16:36

@HDWK: 还是一样,轮播效果没变

支持(0) 反对(0) warmsimle9 | 园豆:156 (初学一级) | 2018-07-23 19:32

@warmsimle9: 你说0ms的效果没了,指的是什么?

支持(0) 反对(0) HDWK | 园豆:206 (菜鸟二级) | 2018-07-24 09:18

@HDWK: 就是不会出现,从4瞬移到第0张的效果,我试了,但是在页面的style里面 transitionDuration

有变化

支持(0) 反对(0) warmsimle9 | 园豆:156 (初学一级) | 2018-07-24 11:52
0

兄弟,可以找个插件吗?

DanBrown | 园豆:1496 (小虾三级) | 2018-07-24 11:16

我知道有 插件,swiper,能用,但不知道怎么实现的。。。

支持(0) 反对(0) warmsimle9 | 园豆:156 (初学一级) | 2018-07-24 11:50
0

实现的思路

1:假设你有四张图片,你要将第一张图片克隆,作为第五张图片,放在最后;

2:然后计算父盒子宽度,每次移动的宽度就是子元素自身的offsetwidth;

3:计划一个值,命名为now,now为索引。由0开始;

4:当now到达第五张图时,也就是now==length-1时;将父容器距离左边的位置改为0;再将now赋值为1;此时就相当于把本来应该从第四张到第一张的过程转化成了第五张到第二张。

如:父盒子为ul;子元素为li;主要代码:

var li = oUl.children[0].cloneNode(true);
oUl.appendChild(li);
oUl.style.width = aLi.length*aLi[0].offsetWidth+'px';

 

if(now == aLi.length-1){(到最后一张图)
oUl.style.left = 0;//父盒子距离左边的位置变为0(也就是到了第一张图,而第一张图和最后一张图是一样的)
now = 1;//将索引变为1(跳到第二张图)
}else{
now++;
}

根据距离左边的位置-now*ali[0].offsetwidth进行移动,将其放在条件之后即可。

心悠魂然 | 园豆:2080 (老鸟四级) | 2018-07-31 16:55
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册