檢查了還是找不到問題 箭頭點了圖片沒動 hidden 也沒有隱藏
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
? ? *{margin:0; padding:0; text-decoration:none;}
? ? body{padding: 20px;}
? ? #list{width: 4200px;
? ? ?height:400px;
? ? ?position:absolute;?
? ? ?z-index :1;}
? ? #list img{
? ? ? ? float:left;}
? ? #buttons{position: absolute;
? ? ?height: 10px;
? ? ?z-index: 2;?
? ? ?bottom:20px;
? ? ?left:250px;
? ? ? ? width: 100px
? ? }
? ? #buttons span{
? ? ?cursor:pointer;?
? ? ?float: left;
? ? ?border: 1px solid #fff;?
? ? ?width: 10px;?
? ? ?height: 10px ;
? ? ?border-radius: 50%;
? ? ?background: #333;
? ? ?margin-right: 5px;
? ? }
? ? #buttons .on{
? ? ?background:orangered;
? ? }
? ? .arrow{
? ? ?cursor: pointer;?
? ? ?display: none;
? ? ?line-height: 39px;
? ? ?text-align: center;
? ? ?font-size: 36px;
? ? ?font-weight:bold;
? ? ?width: 40px;
? ? ?height: 40px;
? ? ?position: absolute;
? ? ?z-index:2;
? ? ? ? top: 180px;
? ? ? ? background-color:RGBA(0,0,0,.3);
? ? ? ? color:#fff;
? ? }
? ? .arrow:hover{
? ? ?background-color:RGBA(0,0,0,.7);//鼠標到此位置改變顏色
? ? }
? ? #container:hover .arrow{
? ? ?display: block;
? ? }
? ? #prev{
? ? ?left:20px;
? ? }
? ? #next{
? ? ?right: 20px;
? ? }
#container{
width:600px;
height:400px;
border:3px solid #333;
overflow:hidden;//隱藏超出列表
position:relative;//相對定位
}
</style>
<script type="text/javascript">
? ? window.onload = function(){
? ? var container = document.getElementById('container');//通過get來獲取該id值
? ? var list = document.getElementById('list');
? ? var buttons =document.getElementById('buttons').getElementsByTagName('span');
? ? var prev =document.getElementById('prev');//左箭頭
? ? var next =document.getElementById('next');
? ? var index =1;
? ? var animated = false；
? ? var timer;
? ? function showButton(){
? ? ? ? for (var i = 0; i< buttons.length;i++ ) {
? ? ? ? ? ? if (buttons[i].className =='on') {
? ? ? ? ? ? ? ? buttons[i].className='';
? ? ? ? ? ? ? ? break;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? buttons[index -1].className ='on';
? ? }
? ? function animate(offset){//動畫效果
? ? ? ? animated = ture;
? ? ? ? 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{
? ? ? ? ?list.style.left =newLeft+'px'; ?
? ? ? ? ?if (newLeft>-600) {
? ? ? ? ? ? list.style.left=2400+'px';
? ? ? ? ? ? ?}
? ? ? ? ?if (newLeft=-2400) {
? ? ? ? ? ? list.style.left=600+'px';
? ? ? ? ? ? ?}
? ? ? ? ?}
? ? }
? ? ? ? ?function play(){
? ? ? ? ? ? timer = setInterval(function(){
? ? ? ? ? ? ? ? next.onclick();
? ? ? ? ?}.3000);
? ? ? ? }
? ? ? ? function.stop(){
? ? ? ? ? ? cleanInterval(timer);
? ? ? ? }
? ? next.onclick = function(){//右箭頭點擊
? ? ? ? if (index ==5) {
? ? ? ? ? ? index=1;
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? index +=1;
? ? ? ? }
? ? ? ? index += 1;
? ? ? ? showButton();
? ? ? ? if (!animated) {
? ? ? ? animate(-600); ? ? ? ?
? ? ? ? }
? ? ? ? }
? ? prev.onclick = function(){
? ? ? ? ?if (index ==1) {
? ? ? ? ? ? index=5;
? ? ? ? }
? ? ? ? else{
? ? ? ? ? ? index +=1;
? ? ? ? }
? ??
? ? ? ? showButton();
? ? ? ? if (!animated) {
? ? ? ? ?animate(600)
? ? ? ? ? ?}
? ? ? ? }
? ? ? ? for (var i = 0; i<buttons.length; ?i++) {
? ? ? ? ? ? buttons[i].onclick =function(){
? ? ? ? ? ? ? ? if (this.className == 'on') {
? ? ? ? ? ? ? ? ? ?return;
? ? ? ? ? ? ? ? }
? ? ? ? ? ? var myIndex =parseInt.getAttribute('index'));
? ? ? ? ? ? var offset=-600*(myIndex -index);
? ? ? ? ? ??
? ? ? ? ? ? animate(offset);
? ? ? ? ? ? index=myIndex;
? ? ? ? ? ? showButton();
? ? ? ? ? ? debugger;
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? container.onmouseover = stop;
? ? ? ? container.onmouseout = play;
? ? ? ? play();
? ? }
</script>
</head>
<body>
<div id="container">
<div id="list" style="left: -600px;" >
<img src="images/4.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
<img src="images/2.jpg" alt=""/>
<img src="images/3.jpg" alt=""/>
<img src="images/4.jpg" alt=""/>
<img src="images/1.jpg" alt=""/>
</div>
<div>
<span index="1"></span>
<span index="2" class></span>
<span index="3" class></span>
<span index="4" class></span>
</div>
<a href="javascript:;" id="prev"><</a>
<a href="javascript:;" id="next">></a>
</div>
</body>
</html>
//xx.xx.xx 點代表從屬關(guān)系
//parseInt:parseInt() 函數(shù)可解析一個字符串，并返回一個整數(shù)
2018-08-16
6張圖片，
? #list{
? ? width: 4200px;
? ? ?height:400px;
? ? ?position:absolute;?
? ? ?z-index :1;}
6*600px = 3600px，，你這個4200px是哪來的呢？
2017-04-06
打開瀏覽器的控制臺，看提示就可以了