Hi,大家好,我是编程小6,很荣幸遇见你,我把这些年在开发过程中遇到的问题或想法写出来,今天说一说
JS 图片幻灯片_幻灯片制作,希望能够帮助你!!!。
css、html思路如下:
首先定义一个轮播器大盒子。设置overflow为hidden。设置其宽度,高度、position设置为相对
再在里面套一个图片盒子,里面加多个img标签。float设置为left,使图片横向排列。每张照片的大小就是轮播器的大小。那么在轮播器范围内的img’就会显示出来。而其他的img会因为上面设置的overflow属性被隐藏。position设置为绝对定位。
js 思路:
在窗口window.οnlοad=function(){
写一个定时器
设置定时器执行的方法,就是每隔多少秒就把图片盒子向左移动一张图片的宽度,也就是让它的left属性自减,当减到与盒子一样长度的时候,left归0,重新移动。
以上思路很详细,可以自己敲敲看,我刚写出来的时候都惊呆了呢……
<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>
<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部分原理差不多 -->
<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>
今天的分享到此就结束了,感谢您的阅读,如果确实帮到您,您可以动动手指转发给其他人。
上一篇
已是最后文章
下一篇
已是最新文章