文档章节

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

蓬鹏
 蓬鹏
发布于 2017/08/03 13:11
字数 581
阅读 63
收藏 0

stlye样式定义

<style type="text/css">
            body{background-image: url(img/001.jpg);}
            .lb{
                margin: 10px auto;
                width: 1440px;
                height: 420px;
            }
            #you{
                cursor: pointer;
                display: inline-block;
                height: 420px;
                width: 45px;
                left: 1395px;
                top: -424px;
                position: relative;
                z-index: 1;
            }
            #zuo{
                cursor: pointer;
                height: 420px;
                width: 45px;
                top: 424px;
                position: relative;
                z-index: 1;
            }
            .f{
                opacity:0.2;//设置透明
            }
            .f:hover
            {
                opacity:1.0;//设置鼠标经过不透明
            }
            li{
                list-style-type: square;
                border: 1px #000;
                width: 100px;
                height: 100px;
                
            }
            .ul{
                margin: auto;
                display: inline-block;
                position: relative; /*相对定位*/
                z-index: 2;
                left: 830px;
                top: 380px;
                
            }
            
#buttons span { 
    cursor: pointer; 
    font-size: 15px;
    text-align: center;
    font-family: "微软雅黑";
    float: left; 
    border: 1px solid #fff; 
    width: 20px; 
    height: 20px; 
    border-radius: 50%;  /*设置为圆形*/ 
    /*background: #333; */
    margin-right: 15px; /*设置圆形的间隔为15像素*/
}
#buttons .on {  
    background: orangered;   /*选中的按钮样式*/
}

        </style>

 

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

<div class="lb">
            <img src="img/左.png" id="zuo" class="f" />
            <img src="img/1.jpg" id="img" />
            <img src="img/右.png" id="you" class="f"/>
        </div>
        <div class="ul" id="buttons"><span index="1" class="on.45454" style="background: #FF4500;">1</span><span index="2" >2</span><span index="3">3</span><span index="4">4</span><span index="5">5</span><span index="6">6</span><span index="7">7</span></div>

//下面让我们开始正题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();
                }
                })();    
            }

以上结束

© 著作权归作者所有

上一篇: jQuery 选择器
下一篇: jQuery中DOM操作
蓬鹏
粉丝 0
博文 3
码字总数 2451
作品 0
昆明
私信 提问
用jquery实现图片左右自动循环滚动

最近要实现一个项目的一个图片循环左右滚动的效果,做了好久也没有搞出来,不是不会,而是忽略了一个细节。 百度了好久,也没有看出来有什么不同,定时器啥的都定义好了,然而它就是不动,简...

sunshinewyf
2015/11/12
0
0
setTimeout 和 setInterval-概述 / 简单实例 / 进阶

概述与区别 setTimeout 和 setInterval 都是时间相关的操作。 区别: setTimeout,延时,操作1次; setInterval :每隔指定的时间就执行一次表达式 简单实例初探 setTimeout实例: 延缓1秒后...

柴高八斗之父
2018/01/12
0
0
javascript setTimeout 和 setInterval 区别

setTimeout()方法是在等待指定时间后执行函数, 且只执行一次传入的句柄函数. setInterval()方法是每指定间隔时间后执行一次传入的句柄函数,循环执行直至关闭窗口或clearInterval(). [setTime...

李长春
2012/11/09
0
0
深度解密setTimeout和setInterval——为setInterval正名!

前言 重复定时器,JS有一个方法叫做setInterval专门为此而生,但是大家diss他的理由很多,比如跳帧,比如容易内存泄漏,是个没人爱的孩子。而且setTimeout完全可以通过自身迭代实现重复定时的...

cherryvenus
02/02
0
0
从setTimeout理解JS运行机制

一、引言 setTimeout函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器(timer)的编号,以后可以用来取消这个定时器。 1.1 例子 问:最后的打印顺序是什么?...

番茄沙司
03/22
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Spring Cloud中Hystrix 线程隔离导致ThreadLocal数据丢失

在Spring Cloud中我们用Hystrix来实现断路器,Zuul中默认是用信号量(Hystrix默认是线程)来进行隔离的,我们可以通过配置使用线程方式隔离。 在使用线程隔离的时候,有个问题是必须要解决的...

xiaomin0322
48分钟前
2
0
使用 Jenkins + Ansible 实现 Spring Boot 自动化部署101

本文首发于:Jenkins 中文社区 本文要点: 设计一条 Spring Boot 最基本的流水线:包括构建、制品上传、部署。 使用 Docker 容器运行构建逻辑。 自动化整个实验环境:包括 Jenkins 的配置,J...

Jenkins中文社区
53分钟前
4
0
springcloud配置中心和消息总线,学习,记录其中的问题

改造配置中心的客户端,接入消息总线 1.增加pom文件的引用 <?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20......

夜中孤影
今天
3
0
gzip压缩

tar -zcvf gz包路径 被压缩的路径 tar -zcvf /home/xxx/test.tar.gz hello gz包的路径可以是 完整的也可以相对 , 被压缩的路径 不要全路径 不然压缩包里也会有全路径...

shzwork
今天
3
0
rancher-1

部署rancher 官方快速部署 https://www.cnrancher.com/quick-start/ 部署命令 mkdir /data/rancher -p# 建立存放rancher数据的目录sudo docker run -d --restart=unless-stopped -v /dat......

以谁为师
今天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部