html js 无限循环,JS简单实现CSS列表无限循环

/p>

无限轮换图片

* {

margin: 0;

padding: 0

}

li {

list-style: none

}

a {

color: #0a8cd2;

text-decoration: none;

cursor: pointer

}

#wrapper {

overflow: hidden;

position: relative;

width: 800px;

height: 210px;

margin: 0px auto;

text-align: center

}

#scroll-list li {

float: left;

width: 800px

}

#scroll-list img {

width: 800px;

height: 210px

}

.ico-box {

position: absolute;

left: 0;

bottom: 20px;

width: 100%;

text-align: center

}

.ico-box a {

display: inline-block;

width: 10px;

height: 10px;

margin-right: 8px;

border-radius: 50%;

background-color: #AEB4BA;

opaticy: 0.5

}

.ico-box .active {

display: inline-block;

width: 10px;

height: 10px;

border-radius: 50%;

background-color: #fff

}

.left-btn,

.right-btn {

position: absolute;

top: 50%;

width: 50px;

height: 50px;

margin-top: -25px

}

.left-btn {

background: url(data/attachment/album/201512/22/213711aflr9n49loj9f4so.png) 0 0 no-repeat;

left: 0

}

.right-btn {

background: url(data/attachment/album/201512/22/213711aflr9n49loj9f4so.png) -50px 0 no-repeat;

right: 0

}

• 

• 

• 

• 

• 

“use strict”;

(function () {

var ul = document.getElementById(‘scroll-list’);

ul.innerHTML += ul.innerHTML;

var wrap = document.getElementById(‘wrapper’),

li = ul.getElementsByTagName(‘li’),

prev = document.getElementById(‘prev’),

next = document.getElementById(‘next’),

ico = document.getElementById(‘ico’),

ico_a = document.getElementById(‘ico’).getElementsByTagName(‘a’),

l = li.length,

len = li.length / 2,

li_w = li[0].offsetWidth,

timer = null,

curr = 0;

(function () {

/*

for (var i = 0; i < len; i += 1) {

if (i === curr) {

ico.innerHTML += “”;//每次改变一次浏览器都要重复渲染

} else {

ico.innerHTML += “”;

} else {

str += “