js~点击轮播

首先先写个HTML

div.second
        div
            p 合作机构
            div.hezuo
                div.tupian
                    ul
                        li
                            img(src="/images/mechanism1.png")
                        li
                            img(src="/images/mechanism2.png")
                        li
                            img(src="/images/mechanism3.png")
                        li
                            img(src="/images/mechanism4.png")
                        li
                            img(src="/images/mechanism5.png")
                        li
                            img(src="/images/mechanism6.png")
                        li
                            img(src="/images/mechanism7.png")
                        li
                            img(src="/images/mechanism1.png")
                        li
                            img(src="/images/mechanism2.png")
                        li
                            img(src="/images/mechanism3.png")
                        li
                            img(src="/images/mechanism4.png")
                        li
                            img(src="/images/mechanism5.png")
                        li
                            img(src="/images/mechanism6.png")
                        li
                            img(src="/images/mechanism7.png")
            span.dayu &gt
        div

然后给它一些布局

.second{
	width:1230px;
	height: 300px;
	background: white;
	position: absolute;
	left:10%;
	top: 820px;
}
.second p{
	width:60px;
	position: absolute;
	left:60px;
	top: 60px;
}
.hezuo{
	height:50px;
	line-height: 50px;
	width:960px;
	color: #65707a;
	position: absolute;
	top:45px;
	left:173px;
	overflow: hidden;
}
.tupian{
	width:12880px;
	height:50px;
	float:left;
	position: absolute;
}
.tupian li img{
	width:150px;
	float: left;
	margin-left:10px;
}

.dayu{
	display: block;
	font-size: 20px;
	position: absolute;
	right:62px;
	top:57px;
}

前面的html和css比较简单,主要的是js部分.

首先我们获取点击和移动的对象

var dianji=document.querySelector(".dayu");
var box=document.querySelector(".tupian");

然后定义一些变量
var width是移动元素的父级的宽度,定义一个定时器timer,n是速度,i是对象元素的距离

var width = 160*7;
var n=0;
var i =0;
var timer =null;

然后写个点击事件,并做个判断,当i大于等于移动元素时停止,当n大于父级宽度的时候返回。

dianji.onclick=function(){
    clearInterval(timer);
    timer=setInterval(function(){
        n+=4;
        i++;
        if( i == 40){
            clearInterval(timer);
            i=0;
        }

        if(n >= width){
            n=0
        }
        box.style.left =-n +'px' ;

    },5)
};

ok 点击向左移动就完成了 ,向右移,同理

最后的效果是这样的