JS 图片幻灯片

效果图

这里写图片描述

制作思路

css、html思路如下:
首先定义一个轮播器大盒子。设置overflow为hidden。设置其宽度,高度、position设置为相对
再在里面套一个图片盒子,里面加多个img标签。float设置为left,使图片横向排列。每张照片的大小就是轮播器的大小。那么在轮播器范围内的img’就会显示出来。而其他的img会因为上面设置的overflow属性被隐藏。position设置为绝对定位。

js 思路:
在窗口window.οnlοad=function(){
写一个定时器
设置定时器执行的方法,就是每隔多少秒就把图片盒子向左移动一张图片的宽度,也就是让它的left属性自减,当减到与盒子一样长度的时候,left归0,重新移动。

以上思路很详细,可以自己敲敲看,我刚写出来的时候都惊呆了呢……

代码放心粘,好使!!

css代码

<style>
/*定义大盒子*/
    #demo{              
        overflow: hidden;
        width:200px;
        height:150px;
        position: relative;
    }
/*图片盒子*/
    #demoimg{
        width:600px;
        height:150px;
        position: absolute;
    }
    #demoimg li{
        float:left;
        list-style: none;
        width:200px;
        height:150px;
    }
/*blue 部分是附加效果,图片下边对应的蓝色小块*/
    #blue{
        bottom:0;
        position: absolute;
    }
    #blue li{
        list-style: none;
        width:30px;
        height:5px;
        background:#ccc;
        float:left;
        margin: 0 3px;
    }
 </style>

html 代码

<div id="demo">
    <ul id="demoimg">
        <li><img src="images/1.png"></li>
        <li><img src="images/2.jpg"></li>
        <li><img src="images/3.png"></li>
    </ul>
    <ul id="blue">
        <li style="background:blue"></li>
        <li></li>
        <li></li>
    </ul>
</div>
<!-- 随幻灯片变换的图片简介或者可点击切换的小点与blue部分原理差不多 -->

Javascript 代码

<script>
    var i=0;
    function qiehuan(){
        //获取元素
        var demoimg = document.getElementById("demoimg");
        var demoli = demoimg.getElementsByTagName("li");
        //获取图片盒子距左边的距离给left,图片的宽度给swidth,
        //图片盒子中li即图片总数给lis
        var left = demoimg.offsetLeft;
        var swidth = demoli[0].offsetWidth;
        var lis = demoli.length;
        //left从0开始逐渐递减,图片盒子向左移动。
        //当所有图片都移动到左边之后,left=0,重新开始,形成循环播放。
        if(left>-swidth*(lis-1)){
            left = left - swidth;
            demoimg.style.left = left+"px";
            i = i+1;
        }else{
            left = 0;
            demoimg.style.left = left+"px";
            i = 0;
        }


        //附加效果 blue部分  
        var dblue = document.getElementById("blue");
        //通过参数i设置与图片li对应的blue部分第i个li背景色
        dblue.getElementsByTagName("li")[i].style.background = "blue";
        var thisi = dblue.getElementsByTagName("li")[i];
        var syi = dblue.getElementsByTagName("li");
        //遍历blue的所有li元素,设置非当前li的背景色,注意:syi[j]!=thisi
        for(j=0;j<lis;j++){
            if(syi[j]!=thisi){
              syi[j].style.background="#ccc";
            }
        }
    }

//定时器,每隔2000毫秒执行一次qiehuan()代码,数值越小,幻灯片切换越快
    window.setInterval("qiehuan()",2000);
</script>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值