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

随机推荐

强制杀oracle进程
强制杀oracle进程: for p in `ps -ef| grep ora| awk '{print $2}'`;do kill -9 $p;done 修改 oracle xe 默认中文字符集成为 ...
（转）130道ASP.NET面试题
130道ASP.NET面试题转自http://blog.csdn.net/kingmax54212008/article/details/2021204 1. 简述 private. protect ...
HTML5增加的几个新的标签
HTML5又2008年诞生,HTML5大致可以等同于=html+css3+javascriptapi.... so --->支持css3强大的选择器和动画以及javascript的新的函数先来 ...
如何给Ubuntu 安装Vmware Tools
http://jingyan.baidu.com/article/3065b3b6e8dedabecff8a435.html
shell命令基础
1.修改密码使用 passwd 命令修改密码. 该命令如果在 root 用户下执行,则修改的是 root 用户的密码. 2.获取帮助使用 ls --help 命令获取帮助. [zhanghuiju ...
[非技术参考]C#基础：使用Thread创建线程(1)
Thread类可以创建和控制线程,Thread类的构造函数重载为接受ThreadStart和ParameterizedThreadStart类型的委托参数.下面我们用一个例子来解释怎样用Thread类 ...
mysql-connector-c 安装
cmake -G "Unix Makefiles" -DCMAKE_INSTALL_PREFIX=/usr/local make make install
Qt保证只有一个实例（将CreateMutex得到的handle通过转换得到值）
使用CreateMutex 可以实现只启动一个应用程序实例 view plaincopy to clipboardprint?#include <QApplication>#include ...
自定义TWebBrowser浏览器控制遇到的一些问题
最近工作需要,要将TWebBrowser样式改头换面,包括菜单,滚动条等,都要换掉. 由于滚动条已经屏蔽掉,所以关于页面滚动等,全部都需要自己写代码来模拟了.模拟的过程中发现获得页面的客户区大小Cli ...
Tomcat远程调试和加入JMS（转）
1.Tomcat 加入远程调试,在catalina.bat : SET CATALINA_OPTS=-server -Xdebug -Xnoagent -Djava.compiler=NONE -Xr ...

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

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

随机推荐

热门专题