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

最新推荐文章于 2018-08-11 22:26:56 发布

殇痕TT

最新推荐文章于 2018-08-11 22:26:56 发布

阅读量374

点赞数 2

分类专栏： web前端文章标签：图片轮播图

本文链接：https://blog.csdn.net/qq_32676793/article/details/74907027

版权

web前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片轮播（二）

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

效果图：

图片轮播二

布局不多说，基本思路还是和上次的一样的，点击下面的按钮，改变按钮就的样式，图片一开始就向下堆叠，用绝对布局点击的时候只要把只要修改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);  
};

源代码

殇痕TT

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
简单的图片轮播器（二）：以前最常见的图片轮播

图片轮播（二）这是和之前的图片轮播器(地址)差不多，效果也是大同小异，主要用的都是一个简单的渐变框架，大家可以看看区别效果图：布局不多说，基本思路还是和上次的一样的，点击下面的按钮，改变按钮就的样式，图片一开始就向下堆叠，用绝对布局点击的时候只要把只要修改top值就可以了.html代码<!DOCTYPE html><html> <head> <meta charset="U
复制链接

扫一扫