------------------------------------------------js-------------------------------------------------window.onload=function(){ var container=document.getElementsByClassName('NewRecommendList'); var list=document.getElementsByClassName('list'); //var buttons=document.getElementsByClassName('buttons'); var prev=document.getElementsByClassName('prev'); var next=document.getElementsByClassName('next'); function animate(offset){ list.style.left=parseInt(list.style.left)+offset+'px'; } next.onclick=function(){ animate(-240); } prev.onclick=function(){ animate(240); }}-----------------------------------------------------------css--------------------------------------
.NewRecommend{position:?relative;}
.NewRecommendTitle{
padding-top:?42px;
padding-bottom:?22px;
margin-left:?15px;
}
.NewRecommendTitle?h2{
color:?#787878;
line-height:?18px;
font-size:?1.5em;
font-weight:?bold;
width:?960px;
margin:0?auto;
}
.NewRecommendList{
height:?274px;
width:?960px;
margin:0?auto;
????overflow:?hidden;??????/*溢出隱藏*/
position:?relative;
}
.list{
list-style:?none;
position:?absolute;
width:?2880px;
}
.NewRecommendList?li{
float:?left;
margin-right:?4px;
margin-left:?4px;
line-height:0;???????????/*避免img下方空隙出現(xiàn)*/
}
.Detail{
background-color:?#eff0f1;
font-size:?14px;
height:?100px;
color:?#595959;
padding:?14px?40px?15px?15px;
????line-height:?20px;
}
.arrow{
width:?1100px;
height:?0;
margin:?0?auto;
position:?relative;
bottom:?210px;
}
.prev{padding-right:?990px;}---------------------------------------------html---------------------------------------------- <div class="NewRecommend"> <div class="NewRecommendTitle"> <h2> <img src="img/NewRecommendTitle.png"> </h2> </div> <div class="NewRecommendList"> <ul class="list" style="left: -240px;"> <li> <a href="#"> <img src="img/12.png"> <div class="Detail"> <p> F55/F5 Super 35mm <br> 4K數(shù)字攝影機 驚世綻放 </p> </div> </a> </li> <li> <a href="#"> <img src="img/1.jpg"> <div class="Detail"> <p> h.ear 聽你的 <br> 你是Hi-Res新聲代 </p> </div> </a> </li> <li> <a href="#"> <img src="img/2.jpg"> <div class="Detail"> <p> 圣斗士星矢 勇斗之魂 <br> 再次燃燒你的小宇宙 <br> 熱血登場 </p> </div> </a> </li> <li> <a href="#"> <img src="img/3.jpg"> <div class="Detail"> <p> 2016年索尼原音對抗賽 <br> 火熱開啟 </p> </div> </a> </li> <li> <a href="#"> <img src="img/4.jpg"> <div class="Detail"> <p> α影像世界，全新啟程！ <br> 開啟更豐富的攝影體驗 </p> </div> </a> </li> <li> <a href="#"> <img src="img/5.jpg"> <div class="Detail"> <p> 2017 SWPA <br> 索尼世界攝影大賽 <br> 期待您的參與！ </p> </div> </a> </li> <li> <a href="#"> <img src="img/6.jpg"> <div class="Detail"> <p> 時光瞬息而變 <br> FES電子手表 <br> 新品上市 </p> </div> </a> </li> <li> <a href="#"> <img src="img/7.jpg"> <div class="Detail"> <p> 4K HDR <br> 新一代顯示技術 <br> 了解詳情 </p> </div> </a> </li> <li> <a href="#"> <img src="img/8.jpg"> <div class="Detail"> <p> 索尼超長焦黑卡?RX10 Ⅲ <br> 超長所見，影像無妥協(xié) <br> 新品發(fā)布！ </p> </div> </a> </li> <li> <a href="#"> <img src="img/9.jpg"> <div class="Detail"> <p> 索尼（中國）官方微信賬號 <br> 掃二維碼，即刻關注 </p> </div> </a> </li> <li> <a href="#"> <img src="img/10.jpg"> <div class="Detail"> <p> 索尼中國手機客戶端 <br> Android 3.0版本現(xiàn)已發(fā)布 <br> IOS版本即將發(fā)布 </p> </div> </a> </li> <li> <a href="#"> <img src="img/12.png"> <div class="Detail"> <p> F55/F5 Super 35mm <br> 4K數(shù)字攝影機 驚世綻放 </p> </div> </a> </li> <li> <a href="#"> <img src="img/1.jpg"> <div class="Detail"> <p> h.ear 聽你的 <br> 你是Hi-Res新聲代 </p> </div> </a> </li> </ul> </div> <div class="arrow"> <img src="img/prev.png" class="prev"> <img src="img/next.png" class="next"> </div> <div class="buttons"></div> </div>
為什么這段代碼點擊箭頭不能實現(xiàn)焦點輪播圖效果呢？
newsudhc3634140
2016-07-28 20:13:14
