原生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 ...

随机推荐

驾驶机动车在高速公路上倒车、逆行、穿越中央分隔带掉头的一次记6分。答案：错误 2013《123号令-附件2》一、机动车驾驶人有下列违法行为之一，一次记12分[重新考《科目一》]：（七）驾驶机动车在高速公路上倒车、逆行、穿越中央分隔带掉头的；可以参考：http://zhinan.jxedt.com/info/6375.htm
这一组交通警察手势是什么信号?_2600602 交警的面部对着哪个方向就是在指挥哪个方向的车,减速慢行是右手左转弯待转是左手!~ 哎本题解释由台州交通驾校提供 4755支持 hmq 只能看 ...
paip.c++ qt 项目工程互相引用的方法
paip.c++ qt 项目工程互相引用的方法作者Attilax , EMAIL:1466519819@qq.com 来源:attilax的专栏地址:http://blog.csdn.net/ ...
kafka学习(一)-背景及架构设计
概念和术语消息,全称为Message,是指在生产者.服务端和消费者之间传输数据. 消息代理:全称为Message Broker,通俗来讲就是指该MQ的服务端或者说服务器. 消息生产者:全称为Mess ...
jQuery中$.each的用法
jQuery中$.each的用法本文导读:jQuery中each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery提供的each方法 ...
js简单实现链式调用
链式调用实现原理:对象中的方法执行后返回对象自身即可以实现链式操作.说白了就是每一次调用方法返回的是同一个对象才可以链式调用. js简单实现链式调用demo Object.prototype.show ...
Chrome NativeClient创建（转）
Chrome NativeClient创建该demo目标是让chrome扩展启动本地exe 1创建一个名叫nativeMsgDemo的控制台程序 #include <Windows.h> ...
用C++写一个简单的订阅者
打开一个终端,进入到beginner_tutorials包下面: cd ~/catkin_ws/src/beginner_tutorials 建立文件src/listener.cpp: vim src ...
Log4net 自定义字段到数据库（二）
这种方法比第一种方法麻烦些 Log4Net.config <?xml version="1.0" encoding="utf-8" ?> <c ...
Android 修改host文件的3种方法
Android修改hosts文件的方法介绍本文介绍三种Android手机修改hosts文件的方法,但修改hosts文件一定要谨慎:Android手机hosts文件的换行符必须是n而不是window ...
使用css3和伪元素制作的一个立体导航条
使用css3和伪元素制作的一个立体导航条供大家参考,代码如下: <!doctype html> <html lang="en"> <head> ...

原生js实现的轮播图，易用+可多用

原生js实现的轮播图，易用+可多用的更多相关文章

随机推荐

热门专题