HTML之輪播

時間  2019-11-12
標籤 html 欄目 HTML 简体版
原文   原文鏈接

最近學了網頁多張圖片的輪播，圖片輪播對於大多數網頁來講是必不可少的。javascript

要實現的效果是：按下前、後按鈕，顯示的圖片改變，按下 1 2 3 4 按鈕會顯示對應的圖片，當鼠標移到圖片外面，圖片在每隔必定時間就變成另外一張。css

大概思路：html

1.建立ul下4個li標籤放到div標籤，li標籤裏面放img標籤，用於存放照片，建立另外1個ul下四個li標籤放到同個div標籤裏，用於作底部的按鈕。java

<div id="slider">
		<ul id="list">
			<li id='item'><img src="./imgs/1.jpg" alt=""</li>
			<li id='item'><img src="./imgs/2.jpg" alt=""</li>
			<li id='item'><img src="./imgs/3.jpg" alt=""</li>
			<li id='item'><img src="./imgs/4.jpg" alt=""</li>
		</ul>
		<button type="button" class="prev">prev</button>
		<button type="button" class="next">next</button>
		<ul id="block">
			<li class="bullet focus">1</li>
			<li class="bullet">2</li>
			<li class="bullet">3</li>
			<li class="bullet">4</li>
		</ul>
	</div>

而後給個個標籤加上CSS樣式瀏覽器

把ul標籤的默認樣式去掉ide

ul{
	list-style: none;
}
#slider{//設置DIV樣式
				width: 700px; 
				height: 330px;
				border: 5px solid red;
				position: relative;
			}
			#slider #list #item{ //設置存照片的li的樣式
				position: absolute;
				left: 70px;
				top:50px;
				opacity: 0;//透明度設爲0
			}
			#slider #list #item:first-of-type{
				opacity: 1;//第一張圖片的透明度設爲1，這樣所有圖片就只顯示第一張。
			}
			#slider .prev, #slider .next{//設置「下一張」按鈕的樣式
				position: absolute;
				top: 150px;
				
			}
			#slider .next{
				right:0;//right設爲0，將「下一張」按鈕放到DIV右邊框左邊緣
			}
			#block .bullet{//設置4個按鈕塊的樣式
				width: 50px;
				height: 50px;
				margin-left: 5px;
				position: relative;
				border: 2px solid #000000;
				float: left;
				top: 300px;
				left: 250px;
				cursor: pointer; /*光標放上去會變成一隻手*/
				line-height: 50px;
				text-align: center;
			}
			#block .bullet.focus{//設置選中的按鈕塊樣式
				background-color: #FF0000;
			}

作好這些準備後，接下來就是寫JS代碼實現輪播。函數

在此以前，要先屢清楚，想讓JS代碼實現什麼？ 實現圖片的轉換，就是點擊按鈕要顯示對應的圖片，實質是將要顯示的圖片的透明度置爲1，將當前的圖片透明度置爲0。this

先定義一個函數，用來獲取到保存圖片的標籤的樣式（瀏覽器兼容性問題）code

function getStyle(el, property){//el爲標籤對象，property爲el對應style的屬性
	if(getComputedStyle){
		return getComputedStyle(el)[property];
	}else{
		return el.currentStyle[property];
	}
}

接下來寫讓圖片顯示和消失（opacity=0||1）的函數htm

function animate(el, properties ){//el爲標籤對象，properties對象有多個修改el標籤style的屬性
	
	clearInterval(el.timerId);// 清除定時器，防止重複調用形成的元素愈來愈快
	el.timerId = setInterval(function(){//定義一個定時調用的函數
		
		for(var property in properties){遍歷properties的屬性
			var current = null;
			var target = properties[property];//獲取要修改的property；
			if(property === 'opacity'){//若是屬性是opacity就將當前的opacity值擴大100倍，方便運算（opacity取值只在0到1之間）
				current = Math.round(parseFloat(getStyle(el,'opacity'))*100);
			}else{//要修改的屬性不是opacity
				current = parseInt(getStyle(el,property));
			}
			var speed = (target - current) /30;//設置變化的速度
			speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);//設置這條語句是爲了不speed在-1到1之內直接變爲0
			if(property === 'opacity'){
				el.style.opacity = (current + speed) / 100;
			}else{
				el.style[property] = current + speed + 'px';
			}	
		}
	},20)	
}

完成這部分JS代碼後，咱們來實現按按鈕實現圖片的轉換：

建立一個當即執行函數(function(){})()

首先咱們要有變量來保存當前圖片和下一張圖片：prevIndex, nextIndex，保存有多少張照片的變量：len

var prevIndex, nextIndex，len;

接下來寫圖片變換的函數slidePrev()，slideNext()，slideTo(prev , next)

function slideNext(){
	prevIndex = nextIndex;
	nextIndex++;
	if(nextIndex === len ){
	nextIndex = 0;
	}
	slideTo(prevIndex, nextIndex);
}
function slidePrev(){
	prevIndex = nextIndex;//記錄當前照片
	nextIndex--;//next索引指向上一張照片
	if(nextIndex === -1 ){若是索引超出第一張照片，就轉到最後一張
	nextIndex =len-1;
	}
	slideTo(prevIndex, nextIndex);
}
function slideTo(prev , next){
	var lis = document.querySelectorAll('#list #item');//獲取全部存照片的li標籤
	animate(lis[prev],{opacity:0});//將存當前照片的li標籤透明度設爲0
	animate(lis[next],{opacity:100});//將存要顯示的照片的li標籤透明度設爲1
}

而後在當即執行函數定義函數 init()，用來執行點擊prev、next按鈕的操做

function init(){
	prevIndex = nextIndex = 0;//初始化照片的定位，當前爲第一張
	len = document.querySelectorAll('#list #item').length;
			//上一張圖片
	document.querySelector('.prev').onclick = function(){
		slidePrev();
	}
			//上一張圖片
	document.querySelector('.next').onclick = function(){
		slideNext();
	}
}

接下來實現點擊小方塊顯示對應圖片：效果是點擊對應方塊會變色，而且顯示對應照片；上面咱們已經將第一個小方塊的classname設爲bullet focus，只要將點擊的方塊的classname設爲bullet focus，而後其餘小方塊classname設爲bullet就好了。在init（）函數內添加代碼：

var bullets = document.querySelectorAll('#block .bullet');//獲取所有小方塊
	//點擊方框切換圖片
for(var i=0;i<bullets.length;i++){//遍歷全部小方塊
    bullets[i].index = i;//記錄小方塊對應的圖片
    bullets[i].onclick = function(){//點擊後執行slideTo函數，顯示點擊小方塊對應的圖片
        prevIndex = nextIndex;
        nextIndex = this.index;
        slideTo(prevIndex,nextIndex);
    }
}

而後要在slideTo（）函數中處理點擊後將點擊的小方塊設爲選中：

var bullets = document.querySelectorAll('#block .bullet');
bullets[prev].className = 'bullet';//取消當前的小方塊的焦點
bullets[next].className = 'bullet focus';設置點擊的小方塊爲焦點

設置完後基本功能就實現了，就差自動輪播效果：

var id;
function auto(){
	clearInterval(id);
	id = setInterval(function(){
	    slideNext();
	},2000)
}
function stop(){
	clearInterval(id);
}

實現自動輪播的功能，以後在init（）函數中調用auto（）就好了，此外咱們能夠實現鼠標停在圖片上中止輪播，移出圖片後輪播，在init()中添加

var slider = document.querySelector('#slider');
slider.onmouseover = function(){
	stop();
}
	var cu=0;
slider.onmouseout = function(){
	auto();
}
	//自動輪播
auto();

至此，全部功能所有實現。

輪播.html代碼：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>輪播</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			
			#slider{
				width: 700px;
				height: 330px;
				border: 5px solid red;
				position: relative;
			}
			#slider #list #item{
				position: absolute;
				left: 70px;
				top:50px;
				opacity: 0;
			}
			#slider #list #item:first-of-type{
				opacity: 1;
			}
			#slider .prev, #slider .next{
				position: absolute;
				top: 150px;
				
			}
			#slider .next{
				right:0;
			}
			#block .bullet{
				width: 50px;
				height: 50px;
				margin-left: 5px;
				position: relative;
				border: 2px solid #000000;
				float: left;
				top: 300px;
				left: 250px;
				cursor: pointer; /*光標放上去會變成一隻手*/
				line-height: 50px;
				text-align: center;
			}
			#block .bullet.focus{
				background-color: #FF0000;
			}
		</style>
	</head>
	<body>
		<div id="slider">
			<ul id="list">
				<li id='item'><img src="./imgs/1.jpg" alt=""</li>
				<li id='item'><img src="./imgs/2.jpg" alt=""</li>
				<li id='item'><img src="./imgs/3.jpg" alt=""</li>
				<li id='item'><img src="./imgs/4.jpg" alt=""</li>
			</ul>
			<button type="button" class="prev">prev</button>
			<button type="button" class="next">next</button>
			<ul id="block">
				<li class="bullet focus">1</li>
				<li class="bullet">2</li>
				<li class="bullet">3</li>
				<li class="bullet">4</li>
			</ul>
		</div>
		<script src="animate.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			(function (){
				var prevIndex, nextIndex;
				var len;
				var id;
				init();
				function init(){
					prevIndex = nextIndex = 0;
					len = document.querySelectorAll('#list #item').length;
					//上一張圖片
					document.querySelector('.prev').onclick = function(){
						slidePrev();
					}
					//上一張圖片
					document.querySelector('.next').onclick = function(){
						slideNext();
					}
					var bullets = document.querySelectorAll('#block .bullet');
					//點擊方框切換圖片
					for(var i=0;i<bullets.length;i++){
						bullets[i].index = i;
						bullets[i].onclick = function(){
							prevIndex = nextIndex;
							nextIndex = this.index;
							slideTo(prevIndex,nextIndex);
						}
					}
					var slider = document.querySelector('#slider');
					
					slider.onmouseover = function(){
						stop();
					}
					var cu=0;
					slider.onmouseout = function(){
						auto();
						cu++;
						console.log(cu);
						
					}
					//自動輪播
					auto();
				}
				function slidePrev(){
					prevIndex = nextIndex;
					nextIndex--;
					if(nextIndex === -1 ){
						nextIndex =len-1;
					}
					slideTo(prevIndex, nextIndex);
				}
				function slideNext(){
					prevIndex = nextIndex;
					nextIndex++;
					if(nextIndex === len ){
						nextIndex = 0;
					}
					slideTo(prevIndex, nextIndex);
				}
				function slideTo(prev , next){
					
					var bullets = document.querySelectorAll('#block .bullet');
					var lis = document.querySelectorAll('#list #item');
					
					bullets[prev].className = 'bullet';
					bullets[next].className = 'bullet focus';
					
					animate(lis[prev],{opacity:0});
					animate(lis[next],{opacity:100});
				}
				
				function auto(){
					clearInterval(id);
					id = setInterval(function(){
						slideNext();
					},2000)
				}
				function stop(){
					clearInterval(id);
				}
			})()
		</script>
	</body>
</html>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程