demo1:淡入淡出轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左右按钮切换</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
list-style: none;
}
div{
width: 500px;
height: 300px;
margin: 100px auto;
border: 1px solid #000000;
position: relative;
}
ul{
width: 100%;
height: 100%;
}
ul>li{
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
transition: 2s;
}
button{
width: 35px;
height: 50px;
position: absolute;
top: 125px;
cursor: pointer;
}
button:nth-of-type(2){
right: 0;
}
ol{
width: 80%;
height: 20px;
position: absolute;
bottom: 10px;
left: 20%;
}
ol>li{
height: 20px;
width: 20px;
border: 1px solid #000000;
border-radius: 50%;
margin-left: 50px;
float: left;
background: #FFFFFF;
cursor: pointer;
}
.active{
background: red;
}
</style>
</head>
<body>
<div>
<ul class="list">
<li style="opacity: 1;"><img src="../img/5c416c4a0fda2.jpg" width="100%" height="100%"></li>
<li><img src="../img/5c749f8f64d08.jpg" width="100%" height="100%"></li>
<li><img src="../img/5c749fe3f038c.jpg" width="100%" height="100%"></li>
<li><img src="../img/5c74a290b752c.jpg" width="100%" height="100%"></li>
</ul>
<button><</button>
<button type="button">></button>
<ol id="圆点">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ol>
</div>
</body>
<script type="text/javascript">
var prev=document.getElementsByTagName('button')[0];
var next=document.getElementsByTagName('button')[1];
var oUl=document.getElementsByTagName('ul')[0];
var oli=oUl.getElementsByTagName('li');
var oOl=document.getElementsByTagName('ol')[0];
var oOli=oOl.getElementsByTagName('li');
var div=document.getElementsByTagName('div')[0];
var index;//var一个变量充当索引值
var timer;//定义定时器名称
index=0;//初始化
next.onclick=function(){
index++;//每点击一次下标值加一
for(var i=0;i<oli.length;i++){
//清空所有项的样式
oli[i].style.opacity=0;
oOli[i].className='';
}
if(index>oli.length-1){
//实现无缝循环
index=0;
}
for(var j=0;j<oli.length;j++){
//给当前选中的项添加样式
oli[index].style.opacity=1;
oOli[index].className='active';
}
}
prev.onclick=function(){
index--;
for(var i=0;i<oli.length;i++){
oli[i].style.opacity=0;
oOli[i].className='';
}
if(index<0){
index=3;
}
for(var j=0;j<oli.length;j++){
oli[index].style.opacity=1;
oOli[index].className='active';
}
}
//分页器选项
for(var i=0;i<oOli.length;i++){
oOli[i].index=i;
oOli[i].onclick=function(){
index=oOli[this.index].index;//使li的当前选项和分页器的当前选项相同，即能一一对应
for(var j=0;j<oOli.length;j++){
oli[j].style.opacity=0;
oOli[j].className='';
}
oli[this.index].style.opacity=1;
oOli[this.index].className='active';
}
}
var lunbo=function(){
index++;
for(var i=0;i<oli.length;i++){
oli[i].style.opacity=0;
oOli[i].className='';
}
if(index>oli.length-1){
index=0;
}
for(var j=0;j<oli.length;j++){
oli[index].style.opacity=1;
oOli[index].className='active';
}
}
timer=setInterval(lunbo,3000);
div.onmouseover=function(){
clearInterval(timer)
}
div.onmouseout=function(){
timer=setInterval(lunbo,3000);
}
</script>
</html>
demo2：左右滑动效果轮播图
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>左右轮播</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 300px;
position: relative;
margin: 200px auto;
/* border: 1px solid #000000; */
overflow: hidden;
}
.image{
list-style: none;
width: 2500px;
height: 300px;
position: absolute;
}
.image li{
float: left;
width: 500px;
height: 300px;
}
.image li img{
width: 100%;
height: 100%;
}
button{
width: 30px;
height: 50px;
position: absolute;
top: 125px;
border: 1px solid #696969;
background-color: #FEFEFE;
cursor: pointer;
}
button:nth-of-type(2){
right: 0;
}
button:hover{
background-color: #EDEDED;
}
.dian{
list-style: none;
position: absolute;
left: 37%;
bottom: 1px;
}
.active{
background: red!important;
}
.dian li{
float: left;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 20px;
background: #FFFFFF;
border: 1px solid #CCCCCC;
cursor: pointer;
}
</style>
</head>
<body>
<div class="box">
<ul class="image">
<li><img src="../img/5c416c4a0fda2.jpg" ></li>
<li><img src="../img/5c749f8f64d08.jpg" ></li>
<li><img src="../img/5c749fe3f038c.jpg" ></li>
<li><img src="../img/5c74a290b752c.jpg" ></li>
<li><img src="../img/5c416c4a0fda2.jpg" ></li>
</ul>
<button><</button>
<button>></button>
<ul class="dian">
<li class="active"></li>
<li></li>
<li></li>
<li style="margin-right: 0px;"></li>
</ul>
</div>
</body>
<script type="text/javascript">
var oDiv=document.getElementsByClassName('box')[0];
var oUl=oDiv.getElementsByTagName('ul')[0];
var oLi=oUl.getElementsByTagName('li');
var prev=document.getElementsByTagName('button')[0];
var next=document.getElementsByTagName('button')[1];
var dian=document.getElementsByClassName('dian')[0];
var yd=dian.getElementsByTagName('li');
var kuan=oDiv.offsetWidth
// 获取box盒子的宽,以便平移
var index=0;
var sp=0
var timer1;
var timer;
next.onclick=function(){
index++;
if(index>oLi.length-1){
oUl.style.left=0;
index=1;
}
hanshu(oUl,-index*kuan)
// 创建一个封装函数使大盒子平移
sp++;
sp=index
if(sp>3){
sp=0;
}
for(var i=0;i<yd.length;i++){
yd[i].className=""
}
yd[sp].className="active";
}
prev.onclick=function(){
index--;
if(index<0){
oUl.style.left=-(oLi.length-1)*kuan+"px";
index=oLi.length-2;
}
hanshu(oUl,-index*kuan)
// 创建一个封装函数使大盒子平移
sp--;
sp=index
if(sp<0){
sp=3;
}
for(var i=0;i<yd.length;i++){
yd[i].className=""
}
yd[sp].className="active";
}
for(var i=0;i<yd.length;i++){
yd[i].sp=i;
yd[i].onclick=function(){
index=yd[this.sp].sp;
for(var j=0;j<yd.length;j++){
yd[j].className="";
}
this.className="active";
hanshu(oUl,-index*kuan);
}
}
timer1=setInterval(function(){
index++;
if(index>oLi.length-1){
oUl.style.left=0;
index=1;
}
hanshu(oUl,-index*kuan)
sp++;
sp=index;
if(sp>yd.length-1){
sp=0;
}
for(var i=0;i<yd.length;i++){
yd[i].className="";
}
yd[sp].className="active";
},3000)
oDiv.onmouseover=function(){
clearInterval(timer1);
}
oDiv.onmouseout=function(){
timer1=setInterval(function(){
index++;
if(index>oLi.length-1){
oUl.style.left=0;
index=1;
}
hanshu(oUl,-index*kuan)
sp++;
sp=index;
if(sp>yd.length-1){
sp=0;
}
for(var i=0;i<yd.length;i++){
yd[i].className="";
}
yd[sp].className="active";
},3000)
}
function hanshu(a,b){
clearInterval(a.timer)
a.timer=setInterval(function(){
var chushi=a.offsetLeft;
var buchang=(b-chushi)/5
if(buchang>0){
buchang=Math.ceil(buchang);
}else{
buchang=Math.floor(buchang);
}
chushi=chushi+buchang;
a.style.left=chushi+"px";
},30)
}
</script>
</html>