2018-10-30

轮播图2.0

QQ图片20181030233504.jpg

添加了滚动效果
让所有图片排成一排进行滚动，当滚到最后一张或者最开始一张跳转到首页或尾页
html代码

1
2
3
4

css代码
*{
padding: 0;
margin: 0;
}
.head{
height: 300px;
}

container{

height: 313px;
width: 500px;
position: relative;
margin: 0 auto;
overflow: hidden;

}
.banner{
height: 313px;
width: 3000px;
position: absolute;
left: -500px;
z-index: 1;
}

banner img{

float: left;

}

btn{

position: absolute;
top: 40%;
z-index: 2;
width: 500px;
height: 313px;
opacity: 0;

}

btn:hover{

opacity: 0.7;

}

btn #next{

background-image: url(img/button.jpg);
background-size: 50px 50px;
width: 50px;
height: 50px;
z-index: 2;
position: absolute;
left: 450px;
cursor: pointer;

}

btn #prve{

background-image: url(img/button.jpg);
background-size: 50px 50px;
width: 50px;
height: 50px;
z-index: 2;
position: absolute;
transform: rotate(180deg);
cursor: pointer;

}

dog{

position: absolute;
z-index: 2;
top: 85%;
left: 40%;

}
.active{
background-color: orange;
}
span{
background: black;
}
.dog span{
width: 20px;
height: 20px;
border: 1px solid black;
border-radius: 50%;
color: #e0e0e0;
z-index: 2;
float: left;
text-align: center;
cursor: pointer;
}

js代码
function byId(id) {
return typeof(id) === "string"?document.getElementById(id):id; //判断id是否为字符串
}//封装一个代替getElementById()的方法

var container = byId("container");
var next = byId("next");
var prve = byId("prve");
var banner = byId("banner");
var dog = byId("dog").getElementsByTagName("span");
var len = dog.length;
var index = 0;
var timer = null;

next.onclick=function(){
var newLeft = banner.offsetLeft-500;
var time=300; //位移时间;
var interval=10; //位移次数
var speed = 500/(time/interval);
index++;
if(index>len-1){
index = 0;
}
function go(){
if (newLeft banner.style.left=banner.offsetLeft-speed+'px';
setTimeout(go,interval);
}
else{
banner.style.left=newLeft+'px';
if (parseInt(banner.style.left)<-2000) {
banner.style.left=-500+'px';
}
}
}
showbtn();
go();
}
prve.onclick=function(){
index--;
var newPrve=banner.offsetLeft+500;
var time=300; //位移时间;
var interval=10; //位移次数
var speed = 500/(time/interval);
if(index<0){
index = len-1;
}
function go(){
if (newPrve>banner.offsetLeft) {
banner.style.left=banner.offsetLeft+speed+'px';
setTimeout(go,interval);
}
else{
banner.style.left=newPrve+'px';
if (parseInt(banner.style.left)>-500) {
banner.style.left=-2000+'px';
}
}
}
showbtn();
go();
}
function slideImg(){
container.onmouseover = function(){
if (timer) {
clearInterval(timer);
}
}
container.onmouseout=function(){
timer = setInterval(function(){
next.onclick();
showbtn();

    },3000);
}
container.onmouseout(); //自动播放

}
function showbtn(){
for(var i =0;i if(dog[i].className="active"){
dog[i].className="";
}
dog[index].className="active";
}
}
for(var i =0;i dog[i].id = i;
}
for(var i =0;i dog[i].onclick = function(){
var myindex = parseInt(this.id);
var re = -500*(myindex-index);
var newNext = banner.offsetLeft+re;//小圆点距离
var time=300; //位移时间;
var interval=10; //位移次数
var speed = re/(time/interval);
index = myindex;
function go(){
if ((newNext>banner.offsetLeft&&speed>0) ||(newNext banner.style.left=banner.offsetLeft+speed+'px';
setTimeout(go,interval);
}
else{
banner.style.left=newNext+'px';
if (parseInt(banner.style.left)<-2000) {
banner.style.left=-500+'px';
}
if (parseInt(banner.style.left)>-500) {
banner.style.left=-2000+'px';
}
}
}
go();
showbtn();
}
}
slideImg();