js實現圖片左右移動_js如何點擊左右按鈕切換圖片

A. js如何點擊左右按鈕切換圖片

這樣：

<!DOCTYPE html>

<html>

<head>

<title>動態切換圖片</title>

</head>

<style>

ul{

padding:0;margin:0;

}

li{

list-style: none;

}

#pic{

position: relative;

width: 400px;

height: 400px;

background-color:red;

margin:100px auto;

background:url('image/1.jpg') no-repeat center;

}

#pic img{

width: 400px;

height: 400px;

}

#pic ul{

width: 50px;

position: absolute;

top: 0;

right: -70px;

}

li{

width: 40px;

height: 40px;

margin-bottom:10px;

background-color: pink;

float: left;

}

#pic span{

position: absolute;

bottom: 10px;

left: 0;

}

#pic p,#pic span{

width: 400px;

height: 20px;

}

#pic p{

position: absolute;

top: 10px;

left: 0;

}

.active{

background-color: red;

}

</style>

<body>

<p>qwrwe</p>

<span>werwer</span>

<ul>

</ul>

</div>

window.onload=function(){

//存放舊li

var oldLi=null;

var num=0;

var oPic = document.getElementById('pic');

var oImg = oPic.getElementsByTagName('img')[0];

var oUL = oPic.getElementsByTagName('ul')[0];

var oSpan= oPic.getElementsByTagName('span')[0];

var oP = oPic.getElementsByTagName('p')[0];

var oLi= oUL.getElementsByTagName('li');

var arr=['image/1.jpg','image/2.jpg','image/3.jpg','image/4.jpg'];

var aText = ['圖片1','圖片2','圖片3','圖片4'];

for(var i=0;i<arr.length;i++){

//動態添加元素

oUL.innerHTML+='<li></li>';

}

// 舊li就等於當前的

oldLi=oLi[num];

// 初始化

oImg.src=arr[num];

oP.innerHTML=num+1+'/'+arr.length;

oSpan.innerHTML=aText[num];

oLi[num].className='active';

for(var i=0;i<arr.length;i++){

// 給元素自定義屬性

oLi[i].index=i;

oLi[i].onclick=function(){

// 當元素被點擊時圖片文字信息都一起變化

oImg.src=arr[this.index];

oP.innerHTML=1+this.index+'/'+arr.length;

oSpan.innerHTML=aText[this.index];

// 清空上一個當前添加

oldLi.className='';

//將上一個給當前

oldLi=this;

this.className='active';

}

</script>

</body>

</html>

(1)js實現圖片左右移動擴展閱讀：

注意事項

1、可以通過JS刪除和添加hidden屬性，改用style.display="none"和style.display="inline"來實現隱藏和顯示。

2、button屬性，主要的問題時button樣式的問題，如何才能做一個好看的button，通過查找找到了設置button相關的值。

border:none; 設置按鈕無邊框

outline:none;消除按鈕點擊後出現的表示被點擊的邊框

background：url(...)按鈕背景圖片

text-shadow: 0 1px 1px rgba(0,0,0,.3);文字陰影

box-shadow: 0 5px 7px rgba(0,0,0,.2);按鈕陰影

border-radius:15px;按鈕邊框圓角

B. 怎麼用javascript實現圖片移動我只要一張圖片向左移動一小段距離就好。

創建個DIV，把圖片當裡面，比如這樣<div><img href = "asd"></div>然後在DIV屬性里加上position : absolute，具體是這樣<div style = "position:absolute"><div>

你要是前面都用HTML做了那直接var pic = getElementById("你的DIV的ID號，要自己先前寫好")
或者var pic = getElementsByTagName("div")[你的頁面里圖片在第N個DIV里就寫N-1]

然後調用setInterval
setInterval( " pic.style.left -= 3", 300);//每300毫秒執行pic.style.left -= 3 一次
想停掉它調用clearInterval();
只想移動一次這樣：setTimeout( " pic.style.left -= 3", 300);

全JS表示
var createDiv = document.createElement("div");
createDiv.style.height = "111px";
createDiv.style.width = "111px";
document.body.appendChild(createDiv);
createDiv.style.position = "absolute";
createDiv.style.overflow = "visible";//這里看你具體需要吧
createDiv.style.top = "111px";
createDiv.style.left = "111px";

var createImg = document.createElement("img");
createImg.setAttribute("src","http://img..com/img/logo-.gif");
createImg.height = 111;
createImg.width = 111;
createDiv.appendChild(createImg);

setInterval( " createDiv.style.left -= 3", 300);

C. 求 JS 大神，教教我圖片輪播、、好心求解

要實現圖片滾動輪播，可以有很多方式，無非是通過調整外圍容器的位置（left/top）或者內部圖片容器的定位（marin-left/margin-top）來實現的。這里我以前者為例（向左滾動）：

通常的實現方式是：

1) 有一個外層容器，同時作為「視口」，這個viewPort有固定的尺寸，超出的部分隱藏，定位方式為「relative」；

2) 包含圖片的容器（此處稱為「畫軸」），尺寸很大，可以容納下要滾動圖片的陣列，定位方式為「absolute」；

3) 滾動即是調整此畫軸的偏移量，此處示例為left；

4) 如果圖片要看上去是連續滾動（到最後一幅時接著出現第一幅）的，那麼可以重復第一幅圖像到陣列的最末，然後當畫軸滾動到此時，重置偏移量到第一幅。

有了上述DOM結構後，就可以通過JS來控制畫軸的偏移量了，如果使用動畫，可以參考一些成熟的動畫庫，示例只提供最基本的線性動畫（即勻速移動）。

HTML：

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
</head>
<body>
<div class="viewPort">
<ul class="scroll" id="scroll">
<li><img src="img/scrollImage (0).jpg"></li>
<li><img src="img/scrollImage (1).jpg"></li>
<li><img src="img/scrollImage (2).jpg"></li>
<li><img src="img/scrollImage (3).jpg"></li>
<li><img src="img/scrollImage (4).jpg"></li>
<li><img src="img/scrollImage (0).jpg"></li>
</ul>
</div>
</body>
</html>

CSS：

.viewPort{
width: 168px;
height: 168px;
position: relative;
overflow: hidden;
border: solid 1px #666;
}
.viewPort .scroll{
width: 10000px;
height: 168px;
position: absolute;
left: 0;
list-style: none;
margin: 0;
padding: 0;
}
.viewPort .scroll li{
width: 168px;
height: 168px;
float: left;
}

JS：

var scroll = document.getElementById('scroll'); // 畫軸
var scrollLeft = 0; // 記錄畫軸CSS left屬性的值
var index = 0; // 當前顯示的畫的序號
// 滾動一幅畫面，調整畫軸scroll的left屬性值。
function scrollByOne(){
var timer = setInterval(function(){
if (scrollLeft <= -168 * index) {
clearInterval(timer);
scrollLeft = -168 * index;
// 當滾動到最後一幅畫面（與第一幅相同）時，重置。
if (index == 5) {
scrollLeft = 0;
scroll.style.left = Ɔ'
index = 0;
}
} else {
scrollLeft -= 2;
scroll.style.left = scrollLeft + 'px'
}
}, 10);
}
// 滾動，每隔3秒鍾滾動一幅。
setInterval(function(){
++index;
scrollByOne();
}, 3000);

代碼：

D. 如何使用js的計時器來讓一個div背景從左向右移動全部代碼

你好，給你寫了一個很基礎的例子。參照著自己優化成你想要的效果吧。

示例是這樣的，滑鼠移動到div上，背景圖片會從左往右移動直至最右端。滑鼠移出div，背景圖標從右往左直至最左端。

備註：考慮到寬度變化，本例背景圖片使用百分比定位。根據你的實際情況也可改為使用像素(px)定位。

<style>
.bg-div{
height:110px;
background:url(https://gss0.bdstatic.com/7Ls0a8Sm1A5BphGlnYG/sys/portrait/item/27267a776a746b7505.jpg)0%centerno-repeat#ccc;
}
</style>
<divid="J_BgDiv"class="bg-div"></div>
<script>
(function(){
vardiv=document.getElementById('J_BgDiv');
//背景百分比（從左至右，0%-100%）
varpos=0;
//背景向右移還是向左移（0：向右，1：向左）
vardir=0;
//每次移動的百分比，控制速度
varstep=3;
div.addEventListener('mouseover',function(){
varnode=div;
dir=0;
if(!div.mover){
div.mover=setInterval(function(){
//每次移動10%
if(dir===0){
pos+=step;
}else{
pos-=step;
}
pos=pos>=100?100:pos;
pos=pos<=0?0:pos;
node.style.backgroundPosition=pos+'%center';
},20);
}
},false);

div.addEventListener('mouseout',function(){
dir=1;
},false);
})();
</script>

希望能幫你解決問題，如有疑問可以追問。

導航:首頁 > 編程語言 > js實現圖片左右移動

js實現圖片左右移動

(1)js實現圖片左右移動擴展閱讀：

與js實現圖片左右移動相關的資料

友情鏈接