js 图片自动循环切换setInterval();

最新推荐文章于 2023-09-10 21:45:30 发布

weixin_33982670

最新推荐文章于 2023-09-10 21:45:30 发布

阅读量627

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/feipengting/p/8933324.html

本文介绍了一种使用CSS和JavaScript实现的图片轮播效果，包括自动切换、手动控制及鼠标悬停暂停等功能，并详细解释了如何通过更改背景颜色来增强用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

stlye样式定义

</style>

//body中定义两个DIV标签,一个放置切换图片，一个放图片对应的数字span

//下面让我们开始正题script中写的方法

//取出要用到的ID或类名或

var zuo=document.getElementById("zuo");
           var you=document.getElementById("you");
           var img=document.getElementById("img");
           var lb=document.getElementsByClassName("lb")[0];
           var index=1;

var buttons = document.getElementById("buttons").childNodes;//获得DIV buttons中下级元素

//定义左移动图片的函数

var moverleft=function () {
               index++;
               if(index>7)index=1;
               img.src="img/"+index+".jpg";
               changbg ();//changbg()是之后用来改变span中的的背景颜色
           }

//定义右移动图片的函数

var moverright=function () {
               index--;
               if(index<1)index=7;
               img.src="img/"+index+".jpg";
               changbg ();
           }

//让左右点击图片能切换，把上面左右移动函数分别付给左右点击图片

you.onclick=moverleft;

zuo.onclick=moverright;

定义计时器3秒钟自动切换图片

var mm=setInterval(moverleft,3000);

//定义鼠标移动到图片上就暂停自动切换图片，就是把计时器清空用clearInterval();函数

lb.onmousemove=function () {
clearInterval(mm);
}

//定义鼠标移开图片后又能自动切换图片

lb.onmouseout=function () {
           mm=setInterval(moverleft,3000);
           }

//定义改变span背景颜色函数changbg()

function changbg () {

               for(var i=0;i<buttons.length;i++)
               {
                   buttons[i].style.background="#333333";
               }
               buttons[index-1].style.background="#FF4500";
           }

//把span图标和图片连接起来,利用闭包的特点
           for(var i=0;i<buttons.length;i++){
               buttons[i].onclick=(function () {
                   var j=i+1;
               return function () {
                   index=j;
                   img.src="img/"+index+".jpg";
                   changbg();
               }
               })();
           }

以上结束

转载于:https://www.cnblogs.com/feipengting/p/8933324.html