                        課程
                    
                        /前端開發
                        
                            /JavaScript
                        
                        /焦點圖輪播特效

箭頭切換問題。。

想實現按下箭頭圖片切換。代碼如下，實際卻未實現。請大神看看問題出在哪？

<div>有關圖片的定義：

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

? ? ? ? <img src="img/5.jpg" alt="1"/>

? ? ? ? <img src="img/1.jpg" alt="1"/>

</div>

在<div>中定義一對左右箭頭代碼如下:

? </div>

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

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

</div>

在CSS中設置樣式代碼如下：

.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;}

在<script>中定義當按下箭頭切換到下張圖片：

next.onclick=function(){

animate(-600);

}

prev.onclick=function(){

animate(600);

}

function animate(offset){

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

}

橙子lovesun

2015-12-06

源自：焦點圖輪播特效 3-1

關注問題我要回答

1409

操作

收起

1 回答

李曉健
2015-12-06

<!DOCTYPE?HTML>
<html>
<head>
????<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
????<title>無標題文檔</title>
????<style>
????????.arrow?{
????????????cursor:?pointer;
????????????display:?inline-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-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;
????????}
????????#list{
????????????height:?400px;
????????????position:?absolute;
????????????top:0;
????????????left:?0;
????????}
????????#list?img{
????????????width:?600px;
????????????height:?400px;
????????????float:?left;
????????}
????????#container{
????????????width:?600px;
????????????height:?400px;
????????????position:?relative;
????????????overflow:?hidden;
????????????margin:?0?auto;
????????}
????</style>
</head>
<body>
????<div?id="container">
????????<div?id="list"?style="left:?0">
????????????<img?src="img/5.jpg"?alt="5"/>
????????????<img?src="img/1.jpg"?alt="1"/>
????????</div>
????????<a?href="javascript:;"?id="prev"?class="arrow">&lt;</a>
????????<a?href="javascript:;"?id="next"?class="arrow">&gt;</a>
????</div>
????<script?type="text/javascript">
????????var?next?=?document.getElementById('next');
????????var?list?=?document.getElementById('list');
????????var?imgs?=?list.getElementsByTagName('img');
????????next.onclick?=?function?()?{
????????????if(parseInt(list.style.left)<=?(-600?*?(imgs.length-1))){
????????????????return?;
????????????}
????????????animate(-600);
????????}
????????var?prev?=?document.getElementById('prev');
????????prev.onclick?=?function?()?{
????????????if(parseInt(list.style.left)>=?0){
????????????????return?;
????????????}
????????????animate(600);
????????}
????????function?animate(offset)?{
????????????list.style.left?=?parseInt(list.style.left)?+?offset?+?'px';
????????}
????</script>

</body>
</html>

也不知道你的完整代碼是什么樣的，就盡量按照你的來寫的