                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /焦點(diǎn)圖輪播特效

點(diǎn)擊next圖片沒反應(yīng)

<!DOCTYPE?html>
<html?lang="en">
<head>
????<meta?charset="UTF-8">
????<title>Title</title>
????<style>
????????*?{
????????????margin:?0;
????????????padding:?0;
????????????text-decoration:?none;
????????}
????????
????????body?{
????????????padding:?20px;
????????}
????????
????????#container?{
????????????width:?600px;
????????????height:?400px;
????????????border:?1px?solid?#333;
????????????position:?relative;
????????????overflow:?hidden;
????????}
????????
????????#list?{
????????????width:?3600px;
????????????height:?400px;
????????????position:?absolute;
????????????z-index:?1;
????????}
????????
????????#list?img?{
????????????float:?left;
????????}
????????
????????#buttons?{
????????????width:?100px;
????????????height:?10px;
????????????position:?absolute;
????????????bottom:?15px;
????????????left:?250px;
????????????z-index:?2;
????????}
????????
????????#buttons?span?{
????????????width:?10px;
????????????height:?10px;
????????????border:?1px?solid?#FFFFFF;
????????????margin:?0?5px;
????????????border-radius:?50px;
????????????float:?left;
????????????cursor:?pointer;
????????}
????????
????????#buttons?.on?{
????????????background:?#FFFFFF;
????????}
????????
????????.arrow?{
????????????width:?40px;
????????????height:?40px;
????????????line-height:?39px;
????????????text-align:?center;
????????????background:?rgba(0,?0,?0,?.3);
????????????display:?none;
????????????position:?absolute;
????????????top:?180px;
????????????z-index:?2;
????????????cursor:?pointer;
????????????font-size:?25px;
????????????color:?#FFFFFF;
????????}
????????
????????.arrow:hover?{
????????????background:?rgba(0,?0,?0,?.7);
????????}
????????
????????#container:hover?.arrow?{
????????????display:?block;
????????}
????????
????????#prev?{
????????????left:?20px;
????????}
????????
????????#next?{
????????????right:?20px;
????????}
????</style>
????<script>
?window.onload?=?function?()?{
????????????var?container?=?document.getElementById('container');
????????????var?list?=?document.getElementById('list');
????????????var?buttons?=?document.getElementById('buttons').getElementsByTagName('span');
????????????var?next?=?document.getElementById('next');
????????????var?prev?=?document.getElementById('prev');


????????????next.onclick?=?function?()?{
????????????????list.style.left?=?parseInt(list.style.left)?-?600?+?'px';
????????????}
????????};
????</script>
</head>
<body>
<div?id="container">
????<div?id="list"?style="left:?-600px;">
????????<img?src="img/banner-4.jpeg"?alt="">
????????<img?src="img/banner-1.jpeg"?alt="">
????????<img?src="img/banner-2.jpg"?alt="">
????????<img?src="img/banner-3.jpg"?alt="">
????????<img?src="img/banner-4.jpeg"?alt="">
????????<img?src="img/banner-1.jpeg"?alt="">
????</div>
????<div?id="buttons">
????????<span?index="1"?class="on"></span>
????????<span?index="2"></span>
????????<span?index="3"></span>
????????<span?index="4"></span>
????</div>
????<a?href=""?class="arrow"?id="prev">&lt</a>
????<a?href=""?class="arrow"?id="next">&gt</a>
</div>
</body>
</html>