原生js实现的轮播图，易用+可多用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style rel="stylesheet">
body {
margin: 0;
padding: 0
}
.imgwall {
position: relative;
overflow: hidden;
margin: 0 auto
}
.imgwall ul {
position: absolute;
list-style: none;
padding: 0;
margin: 0;
left: 0
}
.imgwall li {
float: left
}
.imgwall img {
display: block;
filter:alpha(opacity=50); /*IE滤镜，透明度50%*/
-moz-opacity:0.5; /*Firefox私有，透明度50%*/
opacity:0.5;/*其他，透明度50%*/
}
.dot {
width: 100%;
height: 10px;
position: absolute;
bottom: 20px;
}
.warp {
width: 50%;
margin: 0 auto;
text-align: center
}
.warp a {
display: block;
float: left;
}
.warp span {
display: block;
height: 20px;
width: 20px;
border-radius: 100px;
margin: 0 auto;
background: white;
border: 4px solid #DDD;
filter:alpha(opacity=70); /*IE滤镜*/
-moz-opacity:0.7; /*Firefox私有*/
opacity:0.7 /*其他*/
}
.warp .active {
background: red;
}
</style>
</head>
<body>
<div class="imgwall">
<ul class="imgul">
<li><a href="javascript:void(0)"><img src="....jpg" /></a></li>
<li><a href="javascript:void(0)"><img src="....jpg" /></a></li>
<li><a href="javascript:void(0)"><img src="....jpg" /></a></li>
<li><a href="javascript:void(0)"><img src="....jpg" /></a></li>
</ul>
<div class="dot">
<div class="warp"> </div>
</div>
</div>
<div class="imgwall">
<ul class="imgul">
<li><a href="javascript:void(0)"><img src="....jpg" /></a></li>
<li><a href="javascript:void(0)"><img src="....jpg" /></a></li>
<li><a href="javascript:void(0)"><img src="....jpg" /></a></li>
</ul>
<div class="dot">
<div class="warp"> </div>
</div>
</div>
</body>
<script>
window.onload=function(){
//设置全局变量
var imgwall = getByClass('imgwall');
var warp = getByClass('warp'); config();
autoMove(4000);//每隔4秒钟自动滚一张 //初始化设置
function config(){
for(var i=0;i<imgwall.length;i++){
imgwall[i].ul = imgwall[i].getElementsByTagName('ul')[0];
imgwall[i].img = imgwall[i].getElementsByTagName('img')[0];
imgwall[i].imgs = imgwall[i].getElementsByTagName('img');
imgwall[i].target = -imgwall[i].img.offsetWidth;
//添加span标签
for(var j=0;j<imgwall[i].getElementsByTagName('img').length;j++)
{
var aWidth = 100/imgwall[i].getElementsByTagName('img').length + "%";
warp[i].innerHTML += '<a style = "width:'+aWidth+'"><span></span></a>';
}
//设置整体大小
imgwall[i].style.width = imgwall[i].img.offsetWidth+'px';
imgwall[i].style.height = imgwall[i].img.offsetHeight+'px'; imgwall[i].doter = imgwall[i].getElementsByTagName('span');
imgwall[i].ul.style.width = imgwall[i].doter.length*imgwall[i].img.offsetWidth+'px';//设置ul的宽度 //设置标志点的样式和事件
for(var j=0;j<imgwall[i].doter.length;j++){
imgwall[i].doter[0].className='active';
startMove(imgwall[i].img,{'opacity':100,'padding-top':0},10);
imgwall[i].doter[j].allbrother = imgwall[i].doter;
imgwall[i].doter[j].pul=imgwall[i].ul;
imgwall[i].doter[j].pimg=imgwall[i].img;
imgwall[i].doter[j].index = [i,j];
imgwall[i].doter[j].onclick=function(){
for(var i=0;i<this.allbrother.length;i++){
this.allbrother[i].className = '';
startMove(imgwall[this.index[0]].imgs[i],{'opacity':0,'padding-top':this.pimg.offsetHeight},50);
}
this.className='active';
startMove(this.pul,{'left':-this.index[1]*this.pimg.offsetWidth},10);
startMove(imgwall[this.index[0]].imgs[this.index[1]],{'opacity':100,'padding-top':0},10);
imgwall[this.index[0]].target = -imgwall[this.index[0]].img.offsetWidth*(this.index[1]);
}
}
}
} //自动播放
function autoMove(time){
setInterval(function(){ for(var i=0;i<imgwall.length;i++){
//判断是否滚到最后一个图
console.log(imgwall[i].target);
if(Math.abs(imgwall[i].ul.offsetLeft) >= (imgwall[i].getElementsByTagName('img').length-1)*imgwall[i].img.offsetWidth)
{
imgwall[i].target = 0 ;//跳到第一张
imgwall[i].ul.style.left = imgwall[i].target;
}
startMove(imgwall[i].ul,{'left':imgwall[i].target},10);
imgwall[i].target -= imgwall[i].img.offsetWidth;
for(var j=0;j<imgwall[i].doter.length;j++){
imgwall[i].doter[j].className = '';
imgwall[i].doter[Math.abs(imgwall[i].target)/imgwall[i].img.offsetWidth-1].className = 'active';
startMove(imgwall[i].imgs[j],{'opacity':0,'padding-top':imgwall[i].img.offsetHeight},50);
startMove(imgwall[i].imgs[Math.abs(imgwall[i].target)/imgwall[i].img.offsetWidth-1],{'opacity':100,'padding-top':0},10);
}
}
},time); } //class选择器
function getByClass(classname){
var obj=document.getElementsByTagName('*');
var res=[];
for(var i=0;i<obj.length;i++){
if(obj[i].className == classname)
{
res.push(obj[i]);
}
}
return res;
}
//获取样式
function getStyleName(obj,attr)
{
if(obj.currentStyle)
{
return obj.currentStyle[attr];
}
else
{
return getComputedStyle(obj,null)[attr];
};
};
//运动框架
function startMove(obj,json,v,endFn)
{
clearInterval(obj.timer);
obj.timer=setInterval(function(){
var mStop=true;
for(var attr in json)
{
var crr=0;
if(attr=='opacity')
{
crr=Math.round(parseFloat(getStyleName(obj,attr)*100));
}
else
{
crr=parseInt(getStyleName(obj,attr)); }
var speed=(json[attr]-crr)/v;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if(crr!=json[attr]){mStop=false};
if(attr=='opacity')
{
obj.style[attr]=(crr+speed)/100;
obj.style.filter='alpha(opacity='+(crr+speed)+')';
}
else
{
obj.style[attr]=crr+speed+'px';
}
}
if(mStop)
{
clearInterval(obj.timer);
if(endFn)endFn();
}
},30);
}
}
</script>
</html>
没有考虑性能优化问题，纯属想到哪编到哪里，连遍历函数都没有用。
使用方法：只需把class=‘imgwall’的div放到要放的位置，然后修改里面img标签和a标签就可以了，其他什么都不用做。
注意事项：同一个页面，可以同时多处使用。每张图片的大小要一致，图片数量随意~。
原生js实现的轮播图，易用+可多用的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- 自己用原生JS写的轮播图，支持移动端触屏滑动，面向对象思路。分页器圆点支持click和mouseover。
自己用原生javascript写的轮播图,面向对象思路,支持移动端手指触屏滑动.分页器圆点可以选择click点击或mouseover鼠标移入时触发.图片滚动用的setInterval,感觉setInt ...
- 自己用原生JS写的轮播图，支持移动端触摸滑动，分页器圆点可以支持mouseover鼠标移入和click点击，高手看了勿喷哈
自己用原生JavaScript写的轮播图,分页器圆点按钮可支持click点击,也可支持mouseover鼠标悬浮触发,同时支持移动端触摸滑动,有兴趣的友友可以试试哈,菜鸟一枚,高手看了勿喷,请多多指正 ...
- 原生 js 左右切换轮播图
使用方法: 可能很多人对轮播图感兴趣,下面奉上本人的 原生 js 轮播代码复制 js 到页面的最底部,样式在 css 里改,js 基本不用动,有什么不懂的可以 加本人 QQ172360937 咨询 或 ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- photoSlider-html5原生js移动开发轮播图-相册滑动插件
简单的移动端图片滑动切换浏览插件 分别引用css文件和js文件 如: <link rel="stylesheet" type="text/css" hre ...
- 原生js写简单轮播图方式１－从左向右滑动
轮播图就是让图片每隔几秒自动滑动,达到图片轮流播放的效果.轮播图从效果来说有滑动式的也有渐入式的,滑动式的轮播图就是图片从左向右滑入的效果,渐入式的轮播图就是图片根据透明度渐渐显示的效果,这里说的是实 ...
- 【原生JS】层叠轮播图
又是轮播?没错,换个样式玩轮播. HTML: <!DOCTYPE html> <html lang="en"> <head> <meta ...
随机推荐
- at org.apache.jsp.index_jsp._jspInit(index_jsp.java:23)异常解决
部署项目,启动tomcat一切正常.输入项目地址后 tomcat报例如以下错误: java.lang.NullPointerException at org.apache.jsp.index_jsp. ...
- JavaScript继承的实现
怎样在JavaScript中实现简单的继承? 以下的样例将创建一个雇员类Employee,它从Person继承了原型prototype中的全部属性. function Employee(name, ...
- phoenegap3.5 采坑
上周5晚上在家看Node.js视频的时候,老大来一条短信让研究下 phoengap打包一个web网站. 遂 陷入了phonegap的深渊中. phoengap很早开始使用 cli模式安装开发环境 ,借 ...
- CSS-DOM介绍
三位一体的网页: 我们在浏览器里看到的网页其实是由以下三层信息构成的一个共同体: 1.结构层: 结构层是由HTML和XHTML之类的标记语言所构成的.所就是哪些出现在html标签里面的单词,对网页内容 ...
- Oracle死锁。
oracle数据库死锁一般情况下在oracle数据库中不会.但是在程序中可以开启事物没有提交,但是程序报错我们就关了程序在重新调试.但是我们程序总是在执行 comm.ExecuteNonQuery() ...
- 关于group by的一段SQl语句——Oracle
select cc.fformulacode, cc.rangedate, dd.fpervalue from (select n1.fformulacode, max(n1.frangedate) ...
- iOS 导航条的影响
如果是push出来的控制器,self.view的(0,0)点从状态栏下面开始: 如果有present出来的控制器,self.view的(0,0)点包含状态栏:
- R包——ggplot2（一）
关于ggplot2包(一) 关于ggplot2包(一) ggplot2基本要素 数据(Data)和映射(Mapping) 几何对象(Geometric) 标尺(Scale) 统计变换(Statisti ...
- CSS完美兼容IE6/IE7/IE8/IE9/IE10的通用方法
关于CSS对各个浏览器兼容已经是老生常谈的问题了, 网络上的教程遍地都是.以下内容没有太多新颖, 纯属个人总结, 希望能对初学者有一定的帮助. 一.CSS HACK 以下两种方法几乎能解决现今所有HA ...
- 简单使用 PHP Phar 打包php代码 笔记
Phar简介:Phar 归档的概念来自 Java™ 技术的 JAR 归档,它允许使用单个文件打包应用程序,这个文件中包含运行应用程序所需的所有东西.该文件不同于单个可执行文件,后者通常由编程语言生成, ...