简单的图片轮播器（二）：以前最常见的图片轮播

来源：互联网发布：墙纸秀秀软件编辑：程序博客网时间：2024/06/04 19:24

图片轮播（二）

这是和之前的图片轮播器(地址)差不多，效果也是大同小异，主要用的都是一个简单的渐变框架，大家可以看看区别

效果图：

图片轮播二

布局不多说，基本思路还是和上次的一样的，点击下面的按钮，改变按钮就的样式，图片一开始就向下堆叠，用绝对布局点击的时候只要把只要修改top值就可以了

.html代码

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>仿淘宝幻灯片上下滑动效果</title>        <link rel="stylesheet" type="text/css" href="css/tuPianLunHuan2.css"/>        <script type="text/javascript" src="js/tuPianLunHuan2.js"></script>    </head>    <body>        <div class="LunBo" id="LunBo">            <ol>                <li class="active">1</li>                <li>2</li>                <li>3</li>                <li>4</li>                <li>5</li>                <li>6</li>                <li>7</li>            </ol>            <ul>                <li><a href="javascript:;"><img src="img/1.jpg" alt="广告一"/></a></li>                <li><a href="javascript:;"><img src="img/2.jpg" alt="广告二"/></a></li>                <li><a href="javascript:;"><img src="img/3.jpg" alt="广告三"/></a></li>                <li><a href="javascript:;"><img src="img/4.jpg" alt="广告四"/></a></li>                <li><a href="javascript:;"><img src="img/5.jpg" alt="广告五"/></a></li>                <li><a href="javascript:;"><img src="img/6.jpg" alt="广告六"/></a></li>                <li><a href="javascript:;"><img src="img/7.jpg" alt="广告七"/></a></li>            </ul>        </div>    </body></html>

css代码

*{    margin: 0;    padding: 0;}body{    background: grey;}#LunBo{    width:600px;     height:300px;    position: relative;     margin:0 auto;    margin-top: 100px;    overflow:hidden;}.active{    width: 34px;    height: 34px;    background: #feb338;    color: white;    filter:alpha(opacity:100);    opacity:1;}ol{    list-style:none;    position:absolute;    bottom:10px;    right:10px;    z-index:200;    font-size: 0;}/*这里使用display:inline-block,因为float不能使用vertical-align:bottom下对齐; * display：inline-block两个元素之间会默认有一个空格哦，你给父级div加上font-size：0 * 就可以避免的，要设置字体大小可以在子元素里再设置*/ol li{    width:30px;    height:30px;    margin:2px;    /*float:left;*/    vertical-align:bottom;    display: inline-block;    background:#f8efca;    border: 2px solid #d1a168;    filter:alpha(opacity:50);     opacity:0.5;    color: #bc7e47;    line-height: 30px;    font-size: 20px;    text-align: center;    font-weight: bold;    cursor: pointer;}ul{    /*height:1500px;    width: 600px;*/    position: absolute;}ul li{    list-style: none;    height: 300px;}   ul li img{    height: 300px;    width: 600px;    }

js部分代码

window.onload = function(){    var oDiv = document.getElementById('LunBo');    var oOl = oDiv.getElementsByTagName('ol')[0];    var aBtnLi = oOl.getElementsByTagName('li');    var oUl = oDiv.getElementsByTagName('ul')[0];    var aPLi = oUl.getElementsByTagName('li');    var nowIndex = 0;    for(var i=0; i<aBtnLi.length; i++){        aBtnLi[i].index = i;        aBtnLi[i].onclick = function(){            nowIndex = this.index;            tab();        }    }    function tab(){        for(var j=0; j<aBtnLi.length; j++){            aBtnLi[j].className = '';        }        aBtnLi[nowIndex].className = 'active';//          oUl.style.top = -300*nowIndex+'px';        move(oUl, {top:-300*nowIndex});    }    //这里为了显示效果，设置轮播时间为1秒    var timer = setInterval(next, 1000);    oUl.onmouseover = function(){        clearInterval(timer);    };    oUl.onmouseout = function(){        timer = setInterval(next, 1000);    };    //自动轮换下一张图片函数    function next(){        nowIndex++;        if(nowIndex==aBtnLi.length){            nowIndex = 0;        }        tab();    }   }//运动框架，，，实例move(oDiv, {width:100, height:200, function (){move(oUl, {opacity:1})});function move(obj,json, funEnd){    //保证只有一个定时器    clearInterval(obj.timer);    obj.timer=setInterval(function(){        var bStop = true;           //假设所有值都已经到了目标值        for(var attr in json){            var cur=0;                     if(attr=='opacity'){                //获取非行间样式css的透明度    cur=Math.round(parseFloat(getStyle(obj,attr))*100);               }else{                cur=parseInt(getStyle(obj,attr));            }            //渐变缓冲，            var speed=(json[attr]-cur)/7;            //取整            speed=speed>0?Math.ceil(speed):Math.floor(speed);             if(cur!=json[attr]){            //有一个值不相等就变成false                bStop = false;                    }            if(attr=='opacity'){    //              设置透明度                obj.style.opacity=(cur+speed)/100;                                 obj.style.filter='alpha(opacity:'+cur+speed+')';                         }else{                //这里用来设置left的                var cur2 = cur+speed;                obj.style.filter='alpha(opacity:'+cur2+')';    //兼容<=ie8                           }              }        if(bStop){            clearInterval(obj.timer);            if(funEnd){                funEnd();            }                   }    },30);  };

源代码

阅读全文

1 0