Hi，大家好，我是编程小6，很荣幸遇见你，我把这些年在开发过程中遇到的问题或想法写出来，今天说一说
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>

今天的分享到此就结束了，感谢您的阅读，如果确实帮到您，您可以动动手指转发给其他人。