当前位置：首页 > 网页特效 > 幻灯片和轮播图

原生js带按钮控制焦点图轮播切换代码

分类：幻灯片和轮播图日期：2024-05-14 点击(3) 评论(0)

原生js带按钮控制焦点图轮播切换代码

简介

#### 使用方法
##### html
```html
<div id="cont">

<div class="lii"></div>
<div class="btn" id="btn">
	<ul>
		<li class="on">1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<div style="clear: both"></div>
	</ul>
</div>
<div class="imm" id="imm">
	<a href="1" target="_blank"> <img src="images/j1.jpg" alt="第一章"></a>
	<a href="2" target="_blank"> <img src="images/j2.jpg" alt="第二章"></a>
	<a href="3" target="_blank"> <img src="images/j3.jpg" alt="第三章"></a>
	<a href="4" target="_blank"><img src="images/j4.jpg" alt="第四章"></a>
</div>
<div id="jiao">
	<a href="#" id="left"><</a>
	<a href="#" id="right">></a>
</div>
</div>
```
js代码
```javascript
var tt=null;
var kkk;
var n=0;
var timer=0;
window.onload=function(){
	var li=document.getElementById("btn").getElementsByTagName("li");
	kkk=document.getElementById("imm").getElementsByTagName("a");
	for(var i=0;i<kkk.length;i++){
		if(i!=0){
			kkk[i].style.opacity=0;
		}
	}
	for(var j=0;j<li.length;j++){
			li[j].onmouseover=function(){
				var that=this;
				tt=setTimeout(function(){ var index=that.innerHTML-1;
					n=index;
					if(index <kkk.length){
						for(var o=0;o<li.length;o++){
							li[o].className="";
							kkk[o].style.opacity=0;
							kkk[o].style.zIndex=9998;
						}
						that.className="on";
						kkk[index].style.opacity=1;
						kkk[index].style.zIndex=9999;
						kkk[index].style.transition="opacity 0.8s";
					   leftf(-300,0,kkk[index]);
					}
				},100);

};
		li[j].onmouseout=function(){
			clearTimeout(tt)
		}
		}

var left=document.getElementById("left");
	var right=document.getElementById("right");
	var jiao=document.getElementById("jiao");
	var body=document.getElementById("cont");

timer = setInterval("autoplay()",2000);
	body.onmouseover=function(){
		jiao.style.display="block";
		clearInterval(timer);
	};
	body.onmouseout=function(){
		jiao.style.display="none";
		timer = setInterval("autoplay()",2000);
	};
	left.onclick=function(){
		if(n>0){
			n--
		}else if(n==0){
			n=kkk.length-1;
		}
		var li=document.getElementById("btn").getElementsByTagName("li");
		li[n].onmouseover()
	};
	right.onclick=function(){
		n=n>=(kkk.length-1)?0:++n;
		var li=document.getElementById("btn").getElementsByTagName("li");
		li[n].onmouseover()
	}
}

;
function leftf(start,end,ele){ var tt=setInterval(function (){
	start+=10;
	ele.style.left=start+"px";
	if(start==end){
		clearInterval(tt)
	}
			},20)
}

function autoplay(){
	n=n>=(kkk.length-1)?0:++n;
	var li=document.getElementById("btn").getElementsByTagName("li");
	li[n].onmouseover()
};
```

web299.com

原生js带按钮控制焦点图轮播切换代码

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果