有bug找不出來,求大神解救,雙擊或者快速點擊next或者prev的時候小圓點跟不上,對應不上圖片
window.onload = function(){
var index = 1;
var container = document.getElementsByClassName('container')[0];
var list = document.getElementsByClassName('list')[0];
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];
var bottons = document.getElementsByClassName('bottons')[0].getElementsByTagName('span');
var animated = false;
var timer ;
function animate (offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300;
var interval = 10;
var speed = offset/(time/interval);
function go() {
if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval);
}else{
animated = false;
list.style.left = newLeft + 'px';
if (newLeft > -1024) {
list.style.left = -5120 + 'px';
}
if (newLeft < -5120) {
list.style.left = -1024 + 'px';
}
}?
}
go();
}
function play(){
timer = setInterval(function(){
next.onclick();
},3000);
}?
function stop(){
clearInterval(timer);
}
function showbotton(){
for(var i = 0 ; i < bottons.length; i++){
if (bottons[i].className == 'on') {
bottons[i].className = '';
break;
}
}
bottons[index-1].className = 'on';
}
next.onclick = function(){
if (index == 5) {
index = 1;
}else{
index += 1;
}
if (!animated) {
animate(-1024);
}
showbotton();?
}
prev.onclick = function(){
if (index == 1) {
index = 5;
}else{
index -= 1;
}
if (!animated) {
animate(1024);
}
showbotton();
?
}
for (var i = 0; i < bottons.length; i++) {
bottons[i].onclick = function(){
// if (this.className == 'on') {
// return;
// }
var myIndex = parseInt(this.getAttribute('index'));
var offset = -1024 * (myIndex - index);
index = myIndex;
showbotton();
if (!animated) {
animate(offset);
}
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
2018-11-08
speed算的是當前圖片在該圖片可切換的時間(time)內(nèi)的每一時間段(interval)中移動的距離。因為你每張圖片的大小是1024，speed=1024/(300/10),結果為34.1333，圖片在移動的過程中實際移動距離34.133*30=1023.99和圖片實際長度1024不相等，每次移動少一點點，重復多次后，導致了你問題中描述的現(xiàn)象產(chǎn)生。解決方案，調(diào)整time的值，可以設置為var time = 320,這樣就可以避免你說的情況。
2018-11-08
應該是設置的自動播放時間和切換圖片的時間之間沒有設置好
2018-07-04
不是沒效果，而是有BUG，圓點跟不上圖片切換
2018-07-04
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.container{
width:1024px;
height: 768px;
overflow: hidden;
margin: 0 auto;
position:relative;
}
.container:hover .btn{
display: block;
}
.list{
width: 7168px;
position: absolute;
}
.list img{
width: 1024px;
float: left;
}
.container .bottons{
position: absolute;
bottom: 10px;
left: 410px;
width: 200px;
}
.container .bottons span{
background-color: #ff8800;
height: 15px;
width: 15px;
margin: 8px;
border-radius: 50%;
display: inline-block;
border: 1px solid #ccc;
}
.btn{
display: block;
height: 40px;
width: 30px;
background-color:rgba(0,0,0,0.3);
position:absolute;
top: 350px;
font-size:40px;
color: #ff8800;
font-weight:900;
text-align: center;
line-height: 40px;
display: none;
}
.btn:hover{
background-color:rgba(255,255,255,0.8);
transition: all 0.4s linear;
}
.prev{
left: 10px;
}
.next{
right: 10px;
}
.container .bottons .on{
background-color:#f00;
}
</style>
</head>
<body>
<div class="container">
<div class="list" style="left:-1024px;">
<img src="img/5.jpg">
<img src="img/1.jpg">
<img src="img/2.jpg">
<img src="img/3.jpg">
<img src="img/4.jpg">
<img src="img/5.jpg">
<img src="img/1.jpg">
</div>
<div class="bottons" id="btn">
<span index='1' class="on"></span>
<span index='2'></span>
<span index='3'></span>
<span index='4'></span>
<span index='5'></span>
</div>
<span class="prev btn" ><</span>
<span class="next btn">></span>
</div>
<script>
window.onload = function(){
var index = 1;
var container = document.getElementsByClassName('container')[0];
var list = document.getElementsByClassName('list')[0];
var prev = document.getElementsByClassName('prev')[0];
var next = document.getElementsByClassName('next')[0];
var bottons = document.getElementById('btn').getElementsByTagName('span');
var animated = false;
var timer ;
function animate (offset){
animated = true;
var newLeft = parseInt(list.style.left) + offset;
var time = 300;
var interval = 10;
var speed = offset/(time/interval);
function go() {
if((speed < 0 && parseInt(list.style.left) > newLeft) || (speed > 0 && parseInt(list.style.left) < newLeft)){
list.style.left = parseInt(list.style.left) + speed + 'px';
setTimeout(go,interval);
}else{
animated = false;
list.style.left = newLeft + 'px';
if (newLeft > -1024) {
list.style.left = -5120 + 'px';
}
if (newLeft < -5120) {
list.style.left = -1024 + 'px';
}
}?
}
go();
}
function play(){
timer = setInterval(function(){
next.onclick();
},3000);
}?
function stop(){
clearInterval(timer);
}
function showbotton(){
for(var i = 0 ; i < bottons.length; i++){
if (bottons[i].className == 'on') {
bottons[i].className = '';
break;
}
}
bottons[index-1].className = 'on';
}
next.onclick = function(){
if (index == 5) {
index = 1;
}else{
index += 1;
}
if (!animated) {
animate(-1024);
}
showbotton();?
}
prev.onclick = function(){
if (index == 1) {
index = 5;
}else{
index -= 1;
}
if (!animated) {
animate(1024);
}
showbotton();
?
}
for (var i = 0; i < bottons.length; i++) {
bottons[i].onclick = function(){
// if (this.className == 'on') {
// return;
// }
var myIndex = parseInt(this.getAttribute('index'));
var offset = -1024 * (myIndex - index);
index = myIndex;
showbotton();
if (!animated) {
animate(offset);
}
}
}
container.onmouseover = stop;
container.onmouseout = play;
play();
}
</script>
2018-07-04
你的js 設置的 buttons 只有 getElementById('buttons').getElementsByTagName('span')才有用