原生js简约风格轮播图切换代码轮播滚动切换特效

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是原生js简约风格轮播图切换代码轮播滚动切换特效的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>原生js简约风格轮播图切换代码</title>

<style>
	*{
		margin: 0;
		padding: 0;
		list-style-type:none;
	}
	a,img{border:0;}
	#cont{
		position: relative;
		width: 730px;
		height: 454px;
		margin:40px auto 0 auto
	}
	.imm a{position: absolute}
	.btn ul {
		position: absolute;
		z-index: 10000;
		bottom: 40px;
		right: 20px;

	}
	.btn ul li{
		width: 20px;
		height: 20px;
		background-color: #cccccc;
		border-radius: 50%;
		list-style: none;
		float: left;
		margin: 0 5px;
		text-align: center;
		color: white;
		line-height: 20px;
		cursor: pointer;
	}
	.btn ul li.on{
		background-color: aquamarine;
	}
	.diin{
		width: 100%;
		height: 30px;
		background-color: black;
		opacity: 0.5;
		position: absolute;
		bottom: 0;
		color: white;
		z-index: 10000;
	}
	#jiao{
		display: none;
	}
   #left{
	   width: 35px;
	   height: 50px;
	   background-color: #555555;
	   opacity: 0.6;
	   z-index: 9999;
	   display: block;
	   position: absolute;
	   top: 50%;
	   left: 20px;
	   color: white;
	   font-size: 20px;
	   line-height: 50px;
	   text-align: center;
	   text-decoration: none;


   }
	#right{
		width: 35px;
		height: 50px;
		background-color: #555555;
		opacity: 0.6;
		z-index: 9999;
		display: block;
		position: absolute;
		top: 50%;
		right: 20px;
		color: white;
		font-size: 20px;
		line-height: 50px;
		text-align: center;
		text-decoration: none;

	}
</style>

</head>
<body>
<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">&lt;</a>
	<a href="#" id="right">&gt;</a>
</div>
</div>
<script>
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()
};
</script>
</body>
</html>

附件:下载该文件资源,减少时间成本(增值服务)