轮播图片展示效果

原创 youhongyun 随笔 前端随笔 257阅读 2018-01-19 10:47:35 举报

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>打印轮播图</title>
<style>
*{padding: 0px; margin: 0px;}

banner_div{

    width: 100%;height: 400px;border: 0px solid red;
    }
     img{
         width: 100%;height: 370px;
    }
    #banner_div>ul{
        list-style: none;
    }
    #banner_div>ul>li{
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;
        display: none;
    }

    figcaption{
        text-align: center;
        border: 0px solid blue;
    }

    .banner-left,.banner-right{
        line-height:48px;
        position: absolute;
        top:180px;
        font-size: 3em;
        color: blue;
        z-index: 2;
    }
    .banner-right{
        right:0px;
    }

    #print{
        margin-top: 2em;
        text-align: center;
    }
</style>

</head>
<body>

<header>
<div id="banner_div">
<ul>
<li style="display: block">
<figure>
<img src="../image/01.jpg">
<figcaption>第1张图片</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../image/02.jpg">
<figcaption>第2张图片</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../image/03.jpg">
<figcaption>第3张图片</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../image/04.jpg">
<figcaption>第4张图片</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../image/05.jpg">
<figcaption>第5张图片</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../image/06.jpg">
<figcaption>第6张图片</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../image/07.jpg">
<figcaption>第7张图片</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../image/08.jpg">
<figcaption>第8张图片</figcaption>
</figure>
</li>
</ul>
<a class="banner-left" onclick="leftandrightclick(-1);">&lt;</a>
<a class="banner-right" onclick="leftandrightclick(1);">&gt;</a>
</div>

<div id="print">
<button onclick="javaScript:window.print();">打印页面</button>
</div>

</header>
<script>

var current=0;  //当前li标签的下标
var ulli=document.querySelectorAll("#banner_div li"); //获取所有的li元素
function  changeImage() {
    ulli[current].style.display="none";// 先将当前项隐藏
    if(current+1>=8){//当前已经是最后一张时
    ulli[0].style.display="block";// 将第一张显示
    current=0;
    }else{
        ulli[current+1].style.display="block";// 显示下一张
        current=current+1;
    }
    tempdingshi=setTimeout(changeImage,3000);
}

var tempdingshi=setTimeout(changeImage,3000);

//鼠标点击时的操作
function leftandrightclick(i){
    clearTimeout(tempdingshi);//删除定时任务
    if((i==-1 && current==0 )||(i==1 && current==7)){
        //如果当前是第一张或最后一张,图片不动
    }else{
        ulli[current].style.display="none";// 先将当前项隐藏
        ulli[current+i].style.display="block";// 显示下一张
        current+=i;

    }
    tempdingshi=setTimeout(changeImage,6000);//3秒后在重新创建新的定时任务并执行,让用户多愁3秒
}

</script>

</body>
</html>

评论 ( 1 )
最新评论
youhongyun 2018-01-19 10:48:44 1F

刚看完前段,试试学的咋样