Detailed explanation of how to implement image carousel?

Today I reviewed object-oriented programming. Here is my rendering

Looking at this picture, you will think it is nothing, so here is the code:

html part:

 1 76c82f278ac045591c9159d381de2c57 2 9fd01892b579bba0c343404bcccd70fb 3 93f0f5c25f18dab9d176bd4f6de5d30e 4     a80eb7cbb6fff8b0ff70bae37074b813 5     b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f 6     c9ccee2e6ea535a969eb3f532ad9fe89 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     531ac245ce3e4fe3d50054a55f26592723     4ffe30e92b3d493fe25ee499784b21fc24     97a707776a5a938745e4303c96933e522cacc6d41bbb37262a98f745aa00fbf025     c81c0a6058b056a1472909437d15aedd2cacc6d41bbb37262a98f745aa00fbf026 9c3bca370b5104690d9ef395f2c5f8d127 6c04bd5ca3fcae76e30b72ad730ca86d28     591fc195617b59515f0c9ea2737f619529         ff6d136ddc5fdfeffaf53ff6ee95f18530             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb31             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c7adf606ce41d1f83af5b1a6b9fda5dad5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb32             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb33 34             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cd3fa72dc67df9c5cb3a47b15775cf67c5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb35             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb36 37             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c96780035a1a6118bf90049ebbc7dadfb5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb38         929d1f5ca49e04fdcb27f9465b94468939     16b28748ea4df4d9c2150843fecfba6840 41 42     ab9c64ca2f28aaf88495ab5b19af54e943         ff6d136ddc5fdfeffaf53ff6ee95f18544             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5ccb20f7d11a591073c9f8ad3529fa069b5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb45             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c687453a96f84e202ba2a2b2f8113901e5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb46             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cdcb25fce629e281a8f0bca5b0aa26d995db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb47 48         929d1f5ca49e04fdcb27f9465b94468949     16b28748ea4df4d9c2150843fecfba6850 51 52     3f1c4e4b6b16bbbd69b2ee476dc4f83a53 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     2cacc6d41bbb37262a98f745aa00fbf060 36cc49f0c466276486e50c850b7e495661 73a6ac4ed44ffec12cee46588e518a5e

Necessary css code

.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 part:

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];
		}
	}
}

Carousel 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 < this.num; i++) { 93             var li = $create("li"); 94             ol.appendChild(li); 95             lis.push(li);        //加到数组中 96         } 97         this.container.appendChild(ol); 98         return lis; 99     }100 101     Slider.prototype.moveto = function(indexabc){102         for(var i = 0; i< this.num; i++){103             this.slideList[i].style.display = "none";104             this.indexList[i].style.backgroundColor="red";105         }106         this.slideList[indexabc].style.display = "block";107         this.indexList[indexabc].style.backgroundColor="blue";108 109         //更新当前的索引110         this.currentIndex = indexabc;111 112         //更新文字说明113         var txt = $get(this.slideList[indexabc],"img")[0].alt ;114         this.txtDiv.innerHTML = txt;115     //    console.info("当前是:"+this.currentIndex);116     }117     var bindEvent = function(){118         var that = this; /*var 能不能省*/119         //绑定指示条的事件120         121         if( defaultConf.isClickable){122             for (var i = 0; i < this.num; i++) {123                 this.indexList[i].index = i;124                 this.indexList[i].onmouseenter = function(){125                     that.moveto(this.index);126                 }127             } 
128         }129         130         this.rightBtn.onclick = function(){131             //向右，显示下一张 当前的索引值要+1132             var i = that.currentIndex + 1;133             // i = (i== that.num) ? 0 : i; 134             i = i % that.num;135             that.moveto(i);136         }137 138         //绑定按钮的事件139         this.leftBtn.onclick = function(){140             //btnLeft 向左，显示上一张141             var i = that.currentIndex - 1;  //上一张的编号142             //如果它等于-1,应该要显示最后一张,最后一张的索引值是that.num-1。143             //i = (i==-1) ? that.num-1 : i;144             i = (i+that.num) % that.num;145             //i = i < 0 ? that.num+i : i;146             that.moveto(i);147         }148         if(defaultConf.isAuto) {149             this.container.onmouseenter = function(){150                 // console.info("stop");151                 clearInterval(that.timer);152 153             }154             this.container.onmouseleave = function(){155                 // console.info("go on");156 157                 that.auto();158             }159         }160     }161     var init = function(yourlikeIndex){162         if( yourlikeIndex)163             this.moveto(yourlikeIndex);164         else165             this.moveto(0);166     }167 168     window.Slider = Slider;169 170 })(window);

I hope it can help everyone. Also, this is not based on jQuery. I have encapsulated a simple method myself.

In the future, our image carousel can use

 1 591fc195617b59515f0c9ea2737f6195 2         ff6d136ddc5fdfeffaf53ff6ee95f185 3             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 4             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c7adf606ce41d1f83af5b1a6b9fda5dad5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 5             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 6  7             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cd3fa72dc67df9c5cb3a47b15775cf67c5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 8             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5cf24a50b168f5a697d1325dc9e0fc9c895db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb 9 10             25edfb22a4f469ecb59f1190150159c66170e8999ab19ec641e0422470b16d5c96780035a1a6118bf90049ebbc7dadfb5db79b134e9f6b82c0b36e0489ee08edbed06894275b65c1ab86501b08a632eb11         929d1f5ca49e04fdcb27f9465b94468912     16b28748ea4df4d9c2150843fecfba6813 3f1c4e4b6b16bbbd69b2ee476dc4f83a14 15         var s1 = new Slider("slide1",{startIndex:0,speed:50});16         17 18     2cacc6d41bbb37262a98f745aa00fbf0

which can be used on websites with more carousel components. Of course, the js of our method can be further encapsulated. To make it more powerful, if you compress it a little bit more at the end here, make the variable names simpler. Then the effect will be better.

The above is the detailed content of Detailed explanation of how to implement image carousel?. For more information, please follow other related articles on the PHP Chinese website!