導航:首頁 > 編程語言 > js輪播加入動畫效果

js輪播加入動畫效果

 發布時間：2024-09-21 11:48:01

1. 如何用DW製作這種圖片輪播的效果

這個是要css，結合js或者jq，才能做出來的。網路上都有現成的js代碼，可以先學會css，然後自己去套用js代碼就可以了。

2. 求教！！怎麼用html的語言做出這種圖片旋轉輪播的效果！！100分高手快來！！

你把JS的代碼復制到HTML頁面的head部分，頭尾加上<script>JS的內容</script>

3. 求 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);

代碼：

4. 請問用JS怎樣做這個效果（點擊下邊的圓點轉換圖片）

使用Jquery類庫，步驟：

1、准備好html：

<divclass="container">
		<divclass="item-list">
			<divclass="itemactive"><imgsrc="0.jpg"alt="第1張圖"></div>
			<divclass="item"><imgsrc="1.jpg"alt="第2張圖"></div>
			<divclass="item"><imgsrc="2.jpg"alt="第3張圖"></div>
		</div>
		<divclass="item-control">
			<ahref='javascript:;'class="active">●</a>
			<ahref='javascript:;'>●</a>
			<ahref='javascript:;'>●</a>
		</div>
	</div>

2、為html設置樣式

<style>
		.container{
			width:500px;
			height:300px;
			text-align:center;
			background:red;
			position:relative;
		}
		.container>.item-control{
			display:inline-block;
			width:100%;
			left:0;
			position:absolute;
			bottom:10px;
			background:rgba(0,0,0,0.2);
		}
		.container>.item-control>a{
			font-size:20px;
			color:rgba(255,255,255,0.7);
			text-decoration:none;
		}
		.container>.item-control>a.active{
			color:#fff;
		}
		.container>.item-list,
		.container>.item-list>.item{
			width:100%;
			height:100%;
		}
		.container>.item-list>.item{
			display:none;
		}
		.container>.item-list>.item.active{
			display:block;
		}
	</style>

3、編寫Js

<script>
	(function(){
		$(document).on('click','.container.item-controla',function(){
			var_index=$(this).index();
			$(this).addClass('active').siblings().removeClass('active');
			$('.container.item-list.item').eq(_index).addClass('active').siblings().removeClass('active');
		})
	})()
	</script>

最終效果見圖：

閱讀全文

與js輪播加入動畫效果相關的資料

熱點內容
ps淘寶女包修圖教程 瀏覽：568
55公里app 瀏覽：556
欠費多少充多少為啥還用不了數據 瀏覽：607
蘋果7如何使用萬能鑰匙 瀏覽：254
微信文件傳送電腦 瀏覽：600
什麼app可以解壓百度雲rar 瀏覽：627
蘋果6sp換殼 瀏覽：956
海盜船k70rgb燈光配置文件 瀏覽：336
linuxfsstat 瀏覽：926
電腦文件有個鎖 瀏覽：441
ps多張pdf文件夾 瀏覽：2
怎樣壓縮文件能傳到qq郵箱 瀏覽：923
南昌房管局網站怎麼查備案 瀏覽：884
如何設置ipad下載密碼 瀏覽：458
ae信號干擾教程 瀏覽：548
電腦之前刪掉的文件怎麼找 瀏覽：805
索尼z1刷什麼系統升級 瀏覽：466
自創字體怎麼編程序 瀏覽：381
成都的蘋果售後服務電話號碼 瀏覽：698
文件放筆記本哪個盤 瀏覽：745

友情鏈接