原生js横幅广告轮播图

手把手原生js简单轮播图

原生js实现图片轮播效果

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>js</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<style type="text/css">
*{  margin: 0;  padding: 0;
}
#main{  width: 100%;  height: 400px;  margin: 50px auto;  position: relative;  }
#main .scollimg{  width: 100%;  height: 400px;  position: relative;
}
#main .scollimg img{  position: absolute;  top: 0;  left: 0;  width: 100%;height: 100%;
}
#main .btn{  width: 100%;  height: 220px;  position: absolute;  top:117px;  left: 0;
}
#main .btn>div{  width: 100px;  height: 220px;  background: #fff;  opacity: 0;
}
#main .btn：hover>div{  opacity: 0.35;
}
#main .btn #btnleft{  position: absolute;  top: 0;  left: 0;
}
#main .btn #btnright{  position: absolute;  top: 0;  right:0;
}
/*左右button里的三角形*/
.triangle{  margin-top: 50px;  width: 0;  height: 0;  border-width:70px 40px;  border-style: solid;
}
#main .btn #btnleft .triangle{  border-color: transparent #ccc transparent  transparent;
}
#main .btn #btnright .triangle{  margin-left: 20px;  border-color: transparent transparent transparent #ccc;
}
#main .item{  position: absolute;  bottom: 5%;  left: 49%;  width: 200px;  height: 16px;
}
#main .item span{  width: 16px;  height: 16px;  background: #ccc;  display: inline-block;  border-radius: 50%;
}
#main .item span:hover{  cursor: pointer;
}  </style>
</head>
<body>  <div id="main">  <div class="scollimg">  <a href="#"><img src="http://www.jq22.com/img/cs/500x300a.png" alt=""></a>  <a href="#"><img src="http://www.jq22.com/img/cs/500x300b.png" alt=""></a>  <a href="#"><img src="http://www.jq22.com/img/cs/500x300c.png" alt=""></a>  </div>  <div class="btn">  <div id="btnleft"><div class="triangle"></div></div>  <div id="btnright"><div class="triangle"></div></div>  </div>  <div class="item">  <span></span>  <span></span>  <span></span>  </div>  </div>
<script type="text/javascript">  window.onload=function(){  var container = document.getElementById('main');
autoMove(container);  }  //轮播图函数  function autoMove(container){
var imgs = container.getElementsByTagName('img');
var spans = container.getElementsByTagName('span');  //每次轮播后样式  /*轮播到哪个位置，就对哪个位置的图片样式进行设置，首先让所有的图片样式opacity变为0，然后对移动到的位置的样式进行设置opacity为1*/  function InitMove(index){  for(var i=0;i<imgs.length;i++){  imgs[i].style.opacity='0';  spans[i].style.background='#ccc';  }  imgs[index].style.opacity='1';  spans[index].style.background='red';  }  //第一次初始化  InitMove(0);  //轮播过程的变换函数  /*前面已经初始化了图片最开始看到的效果，接着轮播的话会隐藏第一张出现第二张  *这里count从1开始（图片的初始化位置是count为0的情况），count=1执行一次Init*Move(count),使第一张隐藏第二张出现，依次执行。当count==imgs.leghth时由于*图片最后一张的位置是imgs.length-1,所以此时把count置为0；相当于轮播图轮回  *依次重新开始。  */  var count=1;  function fMove(){  if(count==imgs.length){  count=0;  }  InitMove(count);  count++;  }  //设置自动轮播定时器；  var scollMove=setInterval(fMove,2500);  //点击移动图片；  /*这里就是点击左右移动的button来让图片根据用户的点击左右移动；需要注意一点就*是每次点击左移动或右移动需要首先清除定时器，等移动完了在重新添加定时器不然的*话你点击移动后图片虽然该变了，但是由于定时器还没移动到这张图片上面，所以就需*要等待定时器移动到你移动到的那张图片上面让后才开始定时轮播。比如如果你从开始  *就点击移动图片，一直移动到最后一张那么你就要等待两个定时器的时间才能看到自动*轮播。  */  var btnleft=document.getElementById('btnleft');  var btnright=document.getElementById('btnright');  btnleft.onclick=function(){  clearInterval(scollMove);  if(count==0){  count=imgs.length;  }  count--;  InitMove(count);  scollMove=setInterval(fMove,2500);  };  btnright.onclick=function(){  clearInterval(scollMove);  fMove();  scollMove=setInterval(fMove,2500);  }  }  </script>
</body>
</html>

原生js横幅广告轮播图相关推荐

原生js实现轮播图实例教程
原生js实现轮播图实例教程本实例效果如下图所示: 根据实例效果,需要的元素有图片.中间圆点按钮.左右箭头按钮等.实际html代码如下所示: <div class="banner_co ...
使用原生js将轮播图组件化
代码地址如下: http://www.demodashi.com/demo/11316.html 这是一个轮播图组件,这里是代码地址,需要传入容器的id和图片地址,支持Internet Explo ...
原生JS无缝轮播图（左右切换、导航跟随）
原生JS无缝轮播图(左右切换.导航图标) 功能: 1.实现轮播图的左右无缝切换 2.实现导航图标的跟随显示.点击切换 3.使用定时器进行无缝轮播 css部分 <style>/* 轮播图容器 ...
原生js实现轮播图——小肉包
使用原生js实现轮播图--小肉包今天分享一个使用原生JS实现轮播图的案例,并且配上比较详细的过程讲解,欢迎小伙伴的浏览和批评指正.静态效果图如下: 核心思想将一些图片在一行中平铺,然后计算偏移量再 ...
史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
animate用法 js原生_animate动画、原生JS实现轮播图
写在前面最近在写项目的时候,才发现自己对css3这部分的内容已经生疏了,复习css3的时候,看到animate属性,就用其写了个焦点轮播图,当然自己也用原生JS码了个,当然css3动画无疑是锦上添花 ...
js轮播图片小圆点变化_原生js实现轮播图(两种方法)
第一种: 这个是之前写的,比较草率,没有注释,如果这个看不懂就去看第二个,比较仔细,主要是了解他,后面都会有一些插件来使用,很方便,只要几行代码就可写出各种各样的代码,所以,不懂的话,不要太在意, 第 ...
原生JS实现轮播图方法总结
方法总结: 方法一: 利用绝对定位absolute偏移量的改变来实现具有往左往右滑动的效果演示代码: 位移滑动轮播图1 方法二: 利用 display/opacity/visibility状态切换 ...
原生JS实现轮播图插件
HTML部分只提供存放轮播图的容器,img标签等全部由js操作dom元素动态生成,样式部分也由js 完成 html代码部分 <div id=& ...

原生js横幅广告轮播图

原生js横幅广告轮播图相关推荐

最新文章

热门文章