javascript圖片輪播(徹底本身手寫代碼)

時間 2019-11-17

標籤 javascript 圖片徹底本身手寫代碼欄目 JavaScript 简体版

原文原文鏈接

今天教同事jquery，用圖片輪播來作課件，下面將頁面代碼分享給你們，但願能給你們帶來幫助，另外，本示例界面比較粗糙，請海涵，未考慮兼容，若是須要使用，請適當的作修改。資源文件不提供，jquery庫和圖片素材請自行下載和替換。javascript

<!DOCTYPE HTML>
<html>
 <head>
   
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="./js/jquery.min.js"></script>
<style>
	html,body,.container{ margin:0;padding:0; font-size:12px;}
	.container{width:800px;height:300px; border:1px solid #cccccc;margin-left:200px; margin-top:140px;} 
	.imagebox{ width:680px;height:100%;position:relative;}
	.imagebox img{ border:0;} 
	.tiptext{ position:absolute;left:0px;bottom:0px; height:20px; line-height:20px; vertical-align:middle; text-indent:2em; background-color:#000000;color:#ffffff;opacity:0.6;width:100%; }
	.listbox{ float:right;width:100px;height:100%;}
	.item { height:50px;line-height:50px;width:80%; vertical-align:middle; margin:10px;}
	.item img{ border:1px solid #ffffff;width:100%;height:100%;} 
	.item img.on{ border:1px solid #000000;} 
</style>
 </head>

 <body>
	<div id="" class="container">
		<div id="listbox" class="listbox">
		 
		</div>
		<div id="" class="imagebox">
			<img id="imgdiv" src="" width="100%" height="100%" border="0"/>
			<div id="tiptext" class="tiptext"></div>
		</div>
	</div>

	 <script type="text/javascript">
		function Timer(data)
		{
			//經過構造方法得到資源數據
			this.data=data;
			//設定輪播速度 3s 一次
			this.speed=3000;
			//定義索引 ，默認爲0	
			this.index=0;
			//定義定時器對象
			this.timerObj=null; 
		}

		Timer.prototype={
			//啓動任務
			start:function(){ 
				//定義_this指向自身，便於後面進行引用
				var _this=this;
				//第一次直接播放
				this.play(this.index); 
				//索引自增
				this.index++;
				//開啓定時器，並將定時器對象賦值給timerObj
				this.timerObj=setInterval(function(){
					//執行一次play方法
					_this.play(_this.index); 
					//索引自增，實現變化效果
					_this.index++;
				},this.speed)
			},
			stop:function(){
				//若是定時器對象不爲空
				if(this.timerObj!=null)
				{
					//取消定時任務，即中止播放
					clearInterval(this.timerObj)
				}
			},
			play:function(index)
			{
				//獲取數據總長度，
				var len = this.data.length;
				//若是索引超出範圍
				if(index>=len)
				{
					//從新從第一個開始
					index=0;
				}
				//將索引賦值給對象，不然第二次論詢時，索引不會自增
				this.index=index;
				//更新圖片
				$("#imgdiv").attr("src",this.data[index].src);
				//更新文本
				$("#tiptext").html(this.data[index].text);

				//重置每一個層的透明度
				$(".item").css("opacity",0.5); 

				//重置選中層的透明度
				$(".item").eq(index).css("opacity",1);

				//清除縮略圖上的樣式
				$(".item img").removeClass("on");
				
 
				//設定選中縮略圖的樣式
				$(".item img").eq(index).addClass("on");

			}

		}

	 <!--
		$(function(){
			//定義圖片數據
			var data=[{src:"./images/img1.jpg",text:"測試1"},
					  {src:"./images/img2.jpg",text:"測試2"},
					  {src:"./images/img3.jpg",text:"測試3"},
					  {src:"./images/img4.jpg",text:"測試4"}];
			//定義圖片輪播個數
			var count=data.length;
			//初始化圖片列表
			for(var i=0;i<count;i++)
			{
				//給每一個縮略圖定義一個div
				var child= $("<div></div>");
				//設置樣式
				child.addClass("item");
				//添加img標籤，顯示縮略圖
				var img = $("<img/>");
				//設置圖片資源
				img.attr("src",data[i].src)   
				//將圖片添加到div
				child.append(img);  
				child.css("opacity",0.5);
				//將div添加到縮略圖顯示區域
				child.appendTo($("#listbox"));
			}
			//定義定時任務實例
			var timer=new Timer(data);
			//調用start 啓動任務
			timer.start();
		});


		

	 //-->
	 </script>
 </body>
</html>

效果圖以下：css