詳解圖片輪播怎麼實現？-js教程-PHP中文網

首頁

web前端

js教程

詳解圖片輪播怎麼實現？

零下一度

Jun 26, 2017 am 10:35 AM

圖片物件程式設計面向

今天複習了一下物件導向編程，下面是我的效果圖

#看著這個圖片你會覺得這沒有什麼，那麼上程式碼：

html部分：

 1 nbsp;html> 2  3  4     <meta> 5     <title>Document</title> 6     <style> 7         ul,ol,li{padding:0;margin:0;list-style: none;} 8         .container1{ 9             width: 600px;10             height: 400px;11             margin:50px auto;12             position: relative;13         }14 15         .container2{16             width: 500px;17             height: 300px;18             margin:50px auto;19             position: relative;20         }21         22     </style>23     <link>24     <script></script>25     <script></script>26 27 28     <div>29         <ul>30             <li><a><img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>31             <li><a><img  src="/static/imghwm/default1.png" data-src="img/2.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>32             <li><a><img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>33 34             <li><a><img  src="/static/imghwm/default1.png" data-src="img/3.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>35             <li><a><img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>36 37             <li><a><img  src="/static/imghwm/default1.png" data-src="img/4.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>38         </ul>39     </div>40 41 42     <div>43         <ul>44             <li><a><img  src="/static/imghwm/default1.png" data-src="images/1.png" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>45             <li><a><img  src="/static/imghwm/default1.png" data-src="images/2.png" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>46             <li><a><img  src="/static/imghwm/default1.png" data-src="images/3.png" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>47 48         </ul>49     </div>50 51 52     <script>53 54         var s1 = new Slider("slide1",{startIndex:0,speed:50});55         var s2 = new Slider("slide2",{startIndex:2});56         console.info(s1);57         console.info(s2);58 59     </script>60 61

必要的css程式碼

.slider ul li a{display: block;width: 100%;height: 100%;}
.slider ul,.slider ul li,.slider ul img{width: 100%;height: 100%;}


.slider ol{position: absolute;bottom:10px;background: rgba(255,255,255,.5);height: 20px;border-radius: 5px;right:20px;z-index:999;}
.slider ol li{margin:0 5px;width:10px;height:10px;border-radius:5px;display: inline-block;line-height:10px;background: red;font-size:0;vertical-align: middle;position:relative;top:-3px;}
.slider .mask{
	position: absolute;
	bottom:10px;
	width: 100%;
	height: 50px;
	line-height: 50px;
	text-align: center;
	background: rgba(0,0,0,.5);
	color:#fff;
}
.slider span{
	width:50px;
	height:50px;
	border-radius : 25px;
	position : absolute;
	top : 50%;
	transform: translateY(-50%);
	transition: background-color .5s;
	background-color: rgba(255,255,255,0);
}
.slider span.btnright{
	right:10px;
}
.slider span.btnleft{
	left:10px;
}
.slider span:hover{
	background-color: rgba(255,255,255,1);
}
.slider span.btnleft:after,span.btnright:after{
	transition: transform .5s;
	position: absolute;
	top:24px;
	left:15px;
	transform-origin: left top;
	transform: rotate(30deg);
	content: "";display: block;width: 20px;height: 2px;background-color: red;
}
.slider span.btnright:after{
	left:auto;
	right:15px;
	transform-origin: right top;

}
.slider .btnleft:before,.btnright:before{
	transition: transform .5s;
	position: absolute;
	top:24px;
	left:15px;
	transform-origin: left top;
	transform: rotate(-30deg);
	content: "";display: block;width: 20px;height: 2px;background-color: red;
}
.slider .btnright:before{
	transform-origin: right top;

	left: auto;
	right:15px;
	transform: rotate(-30deg);
}
.slider .btnleft:hover:after{
	transform: rotate(45deg);
}
.slider .btnleft:hover:before{
	transform: rotate(-45deg);
}
.slider .mask{
	position:absolute;
	bottom:0;
	height:50px;
	line-height:50px;
	color:#fff;
	text-align: left;
	text-indent: 2em;
	background-color:rgba(0,0,0,.5);
}

　　js部分：

function $(id){
	return document.getElementById(id);
}

/**
 * 2.0
 * 在指定的容器中去找某一个TagName的html标签集合
 * containerId 可以是一个字符串，也可以是一个 dom对象。
 * @param  {[type]} containerId [description]
 * @param  {[type]} tagName     [description]
 * @return {[type]}             [description]
 * 
 */
function $get(containerId,tagName){
	if(typeof containerId =="string" && $(containerId)){
		return $(containerId).getElementsByTagName(tagName);
	}
	else if(typeof containerId=="object")
	{
		return containerId.getElementsByTagName(tagName);
	}
	else{
		throw ("你写的第一个参数不是一个ID");
	}
}

//<span id="span" className="leftBtn" stlye="width:100px;height:100px;">按钮</span>
function $create(tagName,attr,style){
	var dom = document.createElement(tagName);
	for(var pName in attr){
		dom[pName] = attr[pName];
	}

	for(var pName in style){
		dom.style[pName] = style[pName];
	}
	return dom;
}
function info(obj){
	console.info(obj);
}

function getH(obj){
	//debugger;
	if(obj.currentStyle){
		getH = function(obj){
			return parseInt ( obj.currentStyle.height );
		}
	}else{
		getH=function(obj){
			return parseInt ( window.getComputedStyle(obj, null).height );
		}
	}
	getH(obj) ;


}

//对对象进行拓展
function extend(defaultConf,userConf){
	//对于在defaultConf这个对象中的每一个属性，
	//如果这个属性名在userConf中的也存在，则使用userConf中的那个属性值

	for(var pName in defaultConf){
		if(userConf.hasOwnProperty(pName)){
			defaultConf[pName] = userConf[pName];
		}
	}
}

　　輪播的js

  1 ;(function(window){  2   3     //有问题，请自行改正！！！！ 参考slider.js  4     var defaultConf = {  5         "isAuto":true,  6         "speed":"normal",  7         "startIndex":0,  8         "isClickable":true  9     }; 10  11     var speedList={ 12         "faster":2000, 13         "slower":4000, 14         "normal":3000 15     }; 16  17     function Slider(containerId,conf){ 18          19         // if(conf) 20         //     extend(defaultConf,conf); //这一句后，defaultConf这个对象中就会包含用户的设置 21  22         conf && extend(defaultConf,conf); 23  24         this.container = $(containerId); 25         this.slideList = $get($get(this.container,"ul")[0],"li");// 26         //this.indexList = $get($get(this.container,"ol")[0],"li");//数字指示条 27         this.num = this.slideList.length; 28         this.indexList = createIndexList.call(this);//数字指示条 29  30         this.leftBtn = createLinkBtn.call(this,"left"); //创建按钮 31         this.rightBtn = createLinkBtn.call(this,"right"); //创建按钮 32      33         this.txtDiv = createTxtDiv.call(this);//创建文字说明的区域 34          35         this.currentIndex = defaultConf.startIndex;        //当前整个轮播图中显示的 第几 张 36  37         init.call(this,this.currentIndex);                //初始化 把其它的li都隐藏，把第一个显示出来 38  39         this.timer ;    
 40  41         if(typeof defaultConf.speed =="string") 42             this.speed = speedList[defaultConf.speed] || 2000; 43         else if (typeof defaultConf.speed =="number") { 44             this.speed = defaultConf.speed; 45         } 46         if( defaultConf.isAuto ) 47             this.auto(); 48  49         bindEvent.call(this);           //绑定事件 50     } 51  52     var createTxtDiv = function (){ 53  54         console.info(this); 55  56         //1.创建div，设置基本属性及样式 57         var div = $create("div",{className:"mask"},{}) 58         div.innerHTML = ""; 59         //2.添加到容器中 60         this.container.appendChild(div); 61         //3.返回 62         return div; 63     } 64  65     Slider.prototype.auto = function(){ 66         var that = this; 67         this.timer = setInterval(function(){ 68             that.rightBtn.onclick(); 69             //that.rightBtn.click(); 70  71         },that.speed); 72  73         console.info("定时器"+this.timer+"开动"); 74     } 75     var createLinkBtn = function(dir){ 76         //1.创建一个dom元素 设置基本的属性，同时设置样式。 77         var span = $create("span",{className:"btn"+dir},{ 78              79         }); 80          81         //3.把它添加到容器中 82         this.container.appendChild(span); 83         //4.返回 84          85         return span; 86     } 87     var createIndexList = function(){    //创建ol li结构 88         //ol>li 89         var ol = $create("ol"); //创建ol 90  91         var lis=[];                //保存所有的ol中的li 92         for (var i = 0; i

希望能幫到大家，還有就是這個不是基於jQuery的，我自己封裝了一個簡單的方法。

以後我們圖片輪播可以使用

 1 <div> 2         <ul> 3             <li><a><img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li> 4             <li><a><img  src="/static/imghwm/default1.png" data-src="img/2.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li> 5             <li><a><img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li> 6  7             <li><a><img  src="/static/imghwm/default1.png" data-src="img/3.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li> 8             <li><a><img  src="/static/imghwm/default1.png" data-src="img/1.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li> 9 10             <li><a><img  src="/static/imghwm/default1.png" data-src="img/4.jpg" class="lazy" alt="詳解圖片輪播怎麼實現？" ></a></li>11         </ul>12     </div>13 <script>14 15         var s1 = new Slider("slide1",{startIndex:0,speed:50});16         17 18     </script>

這樣使用於比較多的輪播元件的網站，當然我們這個方法的js可以進一步去封裝的，讓它更強大，如果這裡你最後再壓縮一下，變數名稱再簡單。那麼效果會更好的。

以上是詳解圖片輪播怎麼實現？的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

Python vs. JavaScript：學習曲線和易用性Apr 16, 2025 am 12:12 AM

Python更適合初學者，學習曲線平緩，語法簡潔；JavaScript適合前端開發，學習曲線較陡，語法靈活。 1.Python語法直觀，適用於數據科學和後端開發。 2.JavaScript靈活，廣泛用於前端和服務器端編程。

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

See all articles