『壹』 求類似於淘寶產品詳情頁面大圖下面多個小圖然後點擊左右箭頭可以換圖片的那種效果的CSS或js代碼
http://down.admin5.com/texiao/flash/這里有很多的。我這倆天正好做的個那·~但是JS有沖突,希內望到時候你也幫容我
『貳』 如何用js做翻頁效果
參考代碼如下:
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scripttype="text/javascript"language="javascript"src="http://www.codefans.net/ajaxjs/jquery-1.4.2.min.js"></script>
<scripttype="text/javascript"language="javascript">
$(function(){
$("#right").click(function(){
varroll=$("<div></div>",{css:{position:"absolute",border:"solid1px#999",left:"806px",top:"10px",height:"494px",width:"1px",background:"#fff"}}).appendTo($("#book").parent());
$(roll).animate({
left:"10px",
width:"398px"
},1000,function(){
$("#left").css({"background":"#fff"});
$(roll).fadeOut(300,function(){
$(roll).remove();
})
});
});
});
</script>
</head>
<bodystyle="padding:5px;margin:0;">
<divid="book"style="width:797px;height:494px;background:#ccc;border:solid6px#ccc;">
<divid="left"style="width:398px;height:494px;float:left;background:url(http://www.codefans.net/jscss/demoimg/201011/PLh.png)no-repeattopleft;cursor:pointer;"></div>
<divid="right"style="width:398px;height:494px;float:left;background:#fff;cursor:pointer;margin-left:1px;text-align:right;"><pstyle="margin-top:470px;font-size:12px;color:#999;">點這翻頁</p></div>
</div>
</body>
</html>
『叄』 求js用箭頭控制圖片輪滾原理,圖片不是固定張數。求有代碼的詳細注釋!!!!原理,實現原理,謝謝各位
js可以檢測到鍵盤按下的事件,所有每次鍵盤按下的時候判斷是什麼鍵,在這之前要初始一些值
<style>
#lb{width:500px;height:300px;}
#lb img{position:absolute;left:500px;top:0;width:100%;height:100%;}
#lb img.active{left:0}
</style>
<div id="lb">
<img src="xxx.jpg" class="active">
<img src="xxx.jpg">
<img src="xxx.jpg">
</div>
<script>
//圖片滾動到第幾的一張
var index = 0;
//這里要獲取圖片對象
var imgObj= document.getElementsByTagName("img");
//獲取圖片數量
var length = imgObj.length;
//默認值為0,此變數用了記錄上一張的索引
var par = 0;
//鍵盤下線時候觸發的函數
window.onkeydown = function(e){
if(e.keyCode == 37){
leftFun(); //左箭頭按下調用左邊滾動函數
}else if(e.keyCode == 39){
rightFun (); //右箭頭調用右邊滾動函數
}
};
//往左邊滾動的調用函數
var leftFun = function(){
index--;
if(index<0) index = length -1;
animate(index);
};
//往右邊滾動的調用函數
var rightFun = function(){
index++;
if(index>length) index = 0;
animate(index);
};
//執行滾動的動畫函數。
var animate= function(i){
//這裡面就你自己寫了代碼比較多
}
</script>
『肆』 怎麼用JS代碼實現,帶箭頭左右滑動的效果
或許可以這樣。頁面中間放幾個iframe,命名里邊加上數字,版比如iframe_1,iframe_2,iframe_3。然後旁邊放兩個按鈕。默權認iframe_1可見,其他隱藏。點右翻頁就iframe_2可見,其他隱藏。不知道行不行得通。
『伍』 javascript怎麼實現箭頭的滾動效果
先了解一下對復象的幾個制的屬性:innerHTML:設置或獲取位於對象起始和結束標簽內的HTMLscrollHeight:獲取對象的滾動高度。scrollLeft:設置或獲取位於對象左邊界和窗口中目前可見內容的最左端之間的距離scrollTop:設置或獲取位於對象最頂端和窗口中可見內容的最頂端之間的距離scrollWidth:獲取對象的滾動寬度offsetHeight:獲取對象相對於版面或由父坐標offsetParent屬性指定的父坐標的高度offsetLeft:獲取對象相對於版面或由offsetParent屬性指定的父坐標的計算左側位置offsetTop:獲取對象相對於版面或由offsetTop屬性指定的父坐標的計算頂端位置offsetWidth:獲取對象相對於版面或由父坐標offsetParent屬性指定的父坐標的寬度圖片上無縫滾動向上滾動圖片下無縫滾動向下滾動圖片左無縫滾動向左滾動圖片右無縫滾動向右滾動
『陸』 如何使用js代碼實現點擊動態箭頭就跳到下一個網頁
你哪個動態箭頭應該是一張圖片 所以就定位到圖片 給一個點擊事件 讓其跳轉 比如
js代碼
document.getElementById("img1").onclick(function(){
location.href="a.html";
//或者 window.open("a.html");
});
<img src="images/a.gif" id="img1" />
『柒』 JS寫的一個圖片輪換特效,每次一張,帶左右箭頭按鈕。
<script>
var picarr=new Array("1.jpg","2.jpg","3.jpg");
var mypoint=-1;
function changepic(myflag)
{
if(myflag<0)
{
mypoint=mypoint-1;
if (mypoint<0) { mypoint=picarr.length-1;}
}
else
{
mypoint=mypoint+1;
if (mypoint==picarr.length) { mypoint=0;}
}
document.getElementById("pic").src=picarr[mypoint];
}
</script>
<body style="text-align:center;" onload="changepic(0);">
<div style="width:810px;background-color:#eee">
<span onclick="changepic(-1);" onmousemove="this.style.color='red';" onmouseout="this.style.color='blue';" style="cursor: hand">《-LastOne </span>
<img id=pic border="0" width=600 style="text-align:center;vertical-align:middle;"/>
<span onclick="changepic(0);" style="cursor: hand;" onmousemove="this.style.color='red';" onmouseout="this.style.color='blue';" > NextOne-》</span>
</div>
<body>