圖片帶焦點而且有左右箭頭的可自動可手動切換的

時間 2019-11-20

標籤圖片焦點而且左右箭頭自動手動切換简体版

原文原文鏈接

<!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:0;padding:0;list-style-type:none;} a,img{border:none;} a{color:#1D569C;text-decoration:none;} a:hover{color:#ED3E22;text-decoration:underline;} /* focus */ .focus{width:620px;height:340px;float:left;border:3px solid #d9d9d9;position:relative;} .focus #pic{width:620px;height:340px;overflow:hidden;} .focus #pic ul{width:4216px;height:340px;float:left;} .focus #pic li{width:620px;height:340px;float:left;} .focus #pic li img{width:620px;height:340px;float:left;} .focus .tip-bg{width:620px;height:21px;background:#000;filter:alpha(opacity=80);opacity:0.80;position:absolute;left:0;bottom:0;z-index:12;} .focus #tip{width:96px;height:14px;position:absolute;left:40%;margin:-17px 0 0;z-index:13;} .focus #tip ul li{width:14px;height:14px;float:left;display:inline;margin:0 5px;cursor:pointer;background:url(images/focus_tip.png) no-repeat;} .focus #tip ul li.current{background:url(images/focus_tip_current.png) no-repeat;} .focus .btn{width:42px;height:9px;position:absolute;right:0;bottom:5px;z-index:14;overflow:hidden;} .focus .btn ul{width:100%;float:left;} .focus .btn li{width:7px;height:9px;float:left;display:inline;margin:0 7px;cursor:pointer;overflow:hidden;} .focus .btn li.btn-left{background:url(images/focus_btn_left.png) no-repeat left top;} .focus .btn li.btn-right{background:url(images/focus_btn_right.png) no-repeat left top;} .focus .show{display:block!important;} </style> </head> <body> <div class="focus"> <div id="pic"> <ul> <li><a href="#/"><img width="620" height="340" src="images/2.jpg" /></a></li> <li><a href="#/"><img width="620" height="340" src="images/3.jpg" /></a></li> <li><a href="#/"><img width="620" height="340" src="images/4.jpg" /></a></li> <li><a href="#/"><img width="620" height="340" src="images/5.jpg" /></a></li> </ul> </div> <div class="tip-bg"></div> <div id="tip"> <ul> <li id="smallimg_1" onclick="change(1)" class="current"></li> <li id="smallimg_2" onclick="change(2)"></li> <li id="smallimg_3" onclick="change(3)"></li> <li id="smallimg_4" onclick="change(4)"></li> </ul> </div> <div class="btn"> <ul> <li class="btn-left" id="focus_btn_left" onclick="focus_prev();"></li> <li class="btn-right" id="focus_btn_right" onclick="focus_next();"></li> </ul> </div> </div> <script> var isround = ""; var scrollmove = ""; var masktime = 10; var focus_cur = 1; var p = document.getElementById("pic").getElementsByTagName("li"); var h = document.getElementById("tip").getElementsByTagName("li"); function change(id){ clearTimeout(isround); clearInterval(scrollmove); for (var i = 1; i <= h.length; i++) { if(i == id){ document.getElementById("smallimg_"+i).className="current"; }else{ document.getElementById("smallimg_"+i).className=""; } } if ((next = id + 1) > h.length){ next = 1; } isround = setTimeout("change("+next+")",4000); scrollmove = setInterval("scrollMove("+id+")",masktime); focus_cur = id; } function scrollMove(m){ var srl = document.getElementById("pic").scrollLeft; var dsrl = Math.floor((p[0].clientWidth*(m-1)-srl)/5); var xsrl = Math.ceil((p[0].clientWidth*(m-1)-srl)/5); if(srl > p[0].clientWidth*(m-1)){ document.getElementById("pic").scrollLeft = srl + dsrl; }else if(srl < p[0].clientWidth*(m-1)){ document.getElementById("pic").scrollLeft = srl + xsrl; }else{ clearInterval(scrollmove); } } function focus_prev(){ var prev = (focus_cur+3)%4; if(prev == "0"){ prev = 4; } change(prev); } function focus_next(){ var next = (focus_cur+1)%4; if(next == "0"){ next = 4; } change(next); } isround = setTimeout("change(2)",8000); </script> </body> </html>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。