第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定

加粗部分有疑問(wèn)


<!DOCTYPE html>
<html>
?<head>
?? <title>焦點(diǎn)輪播圖示例</title>
?? <meta charset = 'utf-8'>
?? <style>
????? *{
???? margin:0;
??padding:0;
?? }
????? #container{
???? width:600px;
??height:500px;
??overflow:hidden;
??position:relative;
??margin:0 auto;
?? }
?? #list{
???? width:4200px;
??height:500px;
??
??position:absolute;
?? }
?? img{
???? height:500px;
??width:600px;
??float:left;
?? }
?? #prev{
???? width:40px;
??height:40px;
??line-height:40px;
??background-color:red;
??display:block;
??position:absolute;
??top:230px;
??left:20px;
??z-index:30;
??text-align:center;
??cursor:pointer;
?? }
?? #next{
??? width:40px;
??height:40px;
??line-height:40px;
??background-color:red;
??display:block;
??position:absolute;
??top:230px;
??right:20px;
??z-index:30;
??text-align:center;
??cursor:pointer;
?? }
?? #buttons{
???? width:150px;
??height:30px;
??position:absolute;
??bottom:10px;
??left:225px;
?? }
?? #buttons span{
???? width:20px;
??height:20px;
??background-color:yellow;
??z-index:40;
??float:left;
??margin-right:8px;
??border:1px solid #000;
??border-radius:15px;
?? }
?? #buttons .on{
???? background-color:blue;
?? }
?? </style>
??
?? <script>
???? window.onload = function(){
???? var container = document.getElementById('container');
??var list? = document.getElementById('listImgs');
??var prev????? = document.getElementById('prev');
??var next????? = document.getElementById('next');
??var buttons?? = document.getElementById('buttons').getElementsByTagName('index');
??var index???? = 1;
??
??function animate(offset){
????? var left = parseInt(list.style.left) + offset;
???var totalTime = 300;
???var interval = 30;
???var speed = offset/(totalTime/interval);
???function go(){
????? if((speed < 0 && parseInt(list.style.left > left)) || (speed > 0 && parseInt(list.style.left < left)) ){
????????? list.style.left = parseInt(list.style.left) + speed + 'px';
?????? setTimeout(go,interval);??瀏覽器中這里為什么不能漸進(jìn)

????? }else{
???????? list.style.left = left + 'px';?
????? if(left < -3000){
????? list.style.left = -600 + 'px';
????? }
????? if(left > -600){
????? list.style.left = -3000 + 'px';
????? }
????? }
???}
???go();
??}
??
?? function showButton(){
???? for(var i = 0; i < buttons.length; i++){
?????? if(buttons[i].className == 'on' ){
?????? buttons[i].className = '';
??? }
???? }
????? buttons[index - 1].className = 'on';??瀏覽器為什么報(bào)? Uncaught TypeError: Cannot set property 'className' of undefined
??}
??
??for(var i = 0; i < buttons.length; i++){
???? buttons[i].onclick = function(){
?????? var newIndex = parseInt(this.getAttribute('index'));
??? offset = -600 * (newIndex - index);
??? animate(offset);
??? index = newIndex;
??? showButton();
???? }
??}
??next.onclick = function(){
???? if(index == 5){
?????? index = 1;
???? }else{
?????? index += 1;
???? }
???? showButton();
???? animate(-600);
??}
??prev.onclick = function(){
????? if(index == 1){
?????? index = 5;
???? }else{
?????? index -= 1;
???? }
???? showButton();
???? animate(600);
??}
? }
?? </script>
?</head>
?<body>
??? <div id = 'container'>
???? <div id = 'list' style = 'left:-600px'>
??? <img src = 'img/9.jpg' alt = '9' >
??? <img src = 'img/5.jpg' alt = '5' >
??? <img src = 'img/6.jpg' alt = '6' >
??? <img src = 'img/7.jpg' alt = '7' >
??? <img src = 'img/8.jpg' alt = '8' >
??? <img src = 'img/9.jpg' alt = '9' >
??? <img src = 'img/5.jpg' alt = '5' >
??</div>
???? <span id = 'prev' class = 'sow'><<</span>
??????? <span id = 'next' class = 'sow'>>></span>
??????? <div id = 'buttons'>
??? <span index = '1' class = 'on'></span>
??? <span index = '2'></span>
??? <span index = '3'></span>
??? <span index = '4'></span>
??? <span index = '5'></span>
??</div>?? ??
?</div>
?</body>
</html>

正在回答

1 回答

index-1是不是小于0了?

0 回復(fù) 有任何疑惑可以回復(fù)我~

舉報(bào)

0/150
提交
取消
焦點(diǎn)圖輪播特效
  • 參與學(xué)習(xí)       65328    人
  • 解答問(wèn)題       638    個(gè)

通過(guò)本教程學(xué)習(xí)您將能掌握非常實(shí)用的焦點(diǎn)圖輪播特效的制作過(guò)程

進(jìn)入課程

加粗部分有疑問(wèn)

我要回答 關(guān)注問(wèn)題
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)