html实现横向轮播,js实现横向轮播效果

html:

js横向轮播

body {

margin: 0;

}

#container {

position: relative;

width: 100%;

height: 300px;

overflow: hidden;

z-index: -1;

}

#list {

position: absolute;

width: 4200px;

height: 300px;

}

#list .img {

float: left;

/* width: 375px; */

height: 300px;

}

window.onload = function() {

var container = document.getElementById('container'),

list = document.getElementById('list'),

index = 1;

$('#list').css('left', -screen.width + 'px');

var timer;

var imgList = [{

src: 'img/1.jpg'

},

{

src: 'img/2.jpg'

},

{

src: 'img/3.jpg'

},

{

src: 'img/4.jpg'

},

{

src: 'img/5.jpg'

}

],

l = imgList.length - 1,

len = imgList.length,

w = screen.width,

string = '';

string = makeStr(imgList, l);

$('#list').append(string);

var j = 0;

while (j < imgList.length) {

string = makeStr(imgList, j);

$('#list').append(string);

j++;

}

string = makeStr(imgList, 0);

$('#list').append(string);

$('#list .img').css('width', screen.width + 'px');

function makeStr(arr, i) {

string = "

";