原生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标签就可以了,其他什么都不用做。

注意事项:一个页面,可以同时多处使用。每张图片的大小要一致,图片数量随意~。

 

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。