为了账号安全,请及时绑定邮箱和手机立即绑定

为什么切换不了图片呢?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

margin: 0px;

padding: 0px;

text-decoration: none;

}

body{

padding: 20px;

}

#cntainer{

height: 400px;

width: 600px;

border: 3px solid#333;

overflow: hidden;

position: relative;

}

#list{

height: 400px;

width: 4200px;

z-index: 1;

position: absolute;

background-color: #0C9;

}

#list img{

float: left;

}

#buttons{

position: absolute;

height: 10px;

width: 100px;

bottom: 20px;

left: 250px;

background-color: #999;

z-index: 2;

}

#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: block;

line-height: 39px;

text-align: center;

font-size: 36px;

font-weight: bold;

width: 40px;

height: 40px;

position: absolute;

z-index: 2;

top: 180px;

background: 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}

<script type="text/javascript">

window.onload=function(){

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

var list=document.getElementById('list');

var buttons=document.getElementById('buttons').getElementsByTagName('span')

var prev=document.getElementById('prev');

var next=document.getElementById('next');

function animate (offset){

list.style.left=parseint(list.style.left)+offset+'px';}

   next.onclick=function(){

animate (-600);

}

         prev.onclick=function(){

animate (600);

}

}


</script>

</style>

</head>


<body>

<div id="cntainer">

  <div id="list" style="left:-600">

  <img src="图片/山下/山下-5.jpg" alt="1">

  <img src="图片/山下/山下-1.jpg" alt="1">

  <img src="图片/山下/山下-2.jpg" alt="2">

  <img src="图片/山下/山下-3.jpg" alt="3">

  <img src="图片/山下/山下-4.jpg" alt="4">

  <img src="图片/山下/山下-5.jpg" alt="5">

  <img src="图片/山下/山下-1.jpg" alt="5">

  <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>

  <a href="javascript:;" id="prev" class="arrow">&lt;</a> 

  <a href="javascript:;" id="next" class="arrow">&gt;</a> 

</div>


</body>

</html>


正在回答

2 回答

你把js放到style标签里面了,要放出来;

list.style.left=parseint(list.style.left)+offset+'px';}这里应该是parseInt,I要大写。

  <div id="list" style="left:-600">这里left少了单位,应该是-600px

0 回复 有任何疑惑可以回复我~
#1

夏冬春雪 提问者

还是不行
2016-01-05 回复 有任何疑惑可以回复我~
#2

夏冬春雪 提问者

非常感谢!
2016-01-05 回复 有任何疑惑可以回复我~
#3

ppo_YXWU 回复 夏冬春雪 提问者

window.onload=function(){这里的括号用错了,你用的是中文的,要英文的括号,现在可以了吗?
2016-01-05 回复 有任何疑惑可以回复我~
#4

夏冬春雪 提问者 回复 ppo_YXWU

恩恩可以了呢 ,谢谢你啦
2016-01-05 回复 有任何疑惑可以回复我~
查看1条回复

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

*{

margin: 0px;

padding: 0px;

text-decoration: none;

}

body{

padding: 20px;

}

#cntainer{

height: 400px;

width: 600px;

border: 3px solid#333;

overflow: hidden;

position: relative;

}

#list{

height: 400px;

width: 4200px;

z-index: 1;

position: absolute;

background-color: #0C9;

}

#list img{

float: left;

}

#buttons{

position: absolute;

height: 10px;

width: 100px;

bottom: 20px;

left: 250px;

background-color: #999;

z-index: 2;

}

#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: block;

line-height: 39px;

text-align: center;

font-size: 36px;

font-weight: bold;

width: 40px;

height: 40px;

position: absolute;

z-index: 2;

top: 180px;

background: rgba(0,0,0,.3);

color: #FFF;

}

.arrow:hover{ background-color: rgba(0,0,0,.7);}

#container:hover.arrow{

display: none

}

#prev{

left: 20px;

}

#next{right:20px}

</style>

<script type="text/javascript">

window.onload=function(){

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

var list=document.getElementById('list');

var buttons=document.getElementById('buttons').getElementsByTagName('span')

var prev=document.getElementById('prev');

var next=document.getElementById('next');

function animate (offset){

list.style.left=parseInt(list.style.left)+offset+'px';}

   next.onclick=function(){

animate (-600);

}

         prev.onclick=function(){

animate (600);

}

}


</script>


</head>


<body>

<div id="cntainer">

  <div id="list" style="left:-600px">

  <img src="图片/山下/山下-5.jpg" alt="1">

  <img src="图片/山下/山下-1.jpg" alt="1">

  <img src="图片/山下/山下-2.jpg" alt="2">

  <img src="图片/山下/山下-3.jpg" alt="3">

  <img src="图片/山下/山下-4.jpg" alt="4">

  <img src="图片/山下/山下-5.jpg" alt="5">

  <img src="图片/山下/山下-1.jpg" alt="5">

  <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>

  <a href="javascript:;" id="prev" class="arrow">&lt;</a> 

  <a href="javascript:;" id="next" class="arrow">&gt;</a> 

</div>


</body>

</html>

还是不行!

0 回复 有任何疑惑可以回复我~

举报

0/150
提交
取消
焦点图轮播特效
  • 参与学习       65278    人
  • 解答问题       611    个

通过本教程学习您将能掌握非常实用的焦点图轮播特效的制作过程

进入课程

为什么切换不了图片呢?

我要回答 关注问题
意见反馈 帮助中心 APP下载
官方微信