效果展示如下：

setInterval(moverleft,3000);定时器设置为3秒，而且实现图片下方的小圆点序号跟图片对应，点击小圆点也能切换图片。

代码如下：

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title>轮播的div+css样式改进</title>

		<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>

	</head>

	<body>

		<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 type="text/javascript">

			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 moverleft=function  () {

				index++;

				if(index>7)index=1;

				img.src="img/"+index+".jpg";

				changbg ();

			}

			you.onclick=moverleft;

			var moverright=function () {

				index--;

				if(index<1)index=7;

				img.src="img/"+index+".jpg";

				changbg ();

			}

			zuo.onclick=moverright;

			var mm=setInterval(moverleft,3000);

			lb.onmousemove=function () {

				clearInterval(mm);

			}

			lb.onmouseout=function () {

			  mm=setInterval(moverleft,3000);

			}

		/*	var buttons = document.getElementById("buttons").getElementsByTagName("span");

			 function showButton() {

        //先找出原来有.on类的按钮，并移除其类

        for (var i = 0; i < buttons.length ; i++) {

            if( buttons[i].className == 'on'){

                buttons[i].className = '';

                break;

            }

        }

        //为当前按钮添加类，索引下标从0开始，故需减1

        buttons[index - 1].className = 'on';

    }

			   for (var i = 0; i < buttons.length; i++) {

        buttons[i].onclick = function () {

            if (moverleft()) {         //如果切换还在进行，则直接结束，直到切换完成

                return;

            }

            if(this.className == 'on') {     //如果点击的按钮是当前的按钮，不切换，结束

                return;

            }

            }

        }

		*/	

			var buttons = document.getElementById("buttons").childNodes;

			function changbg () {

				for(var i=0;i<buttons.length;i++)

				{

					buttons[i].style.background="#333333";

				}

				buttons[index-1].style.background="#FF4500";

			}

			//把下面小数字图标和图片连接起来,利用闭包的特点

			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();

				}

				})();

			}

		</script>

	</body>

</html>

　　需要全部源码地址：https://gitee.com/PengPeng8/LunBo.git

js定时器实现图片轮播的更多相关文章

  1. JS+html--实现图片轮播

    大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...

  2. Javascript和jQuery WordPress 图片轮播插件， 内容滚动插件，前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  3. html学习之路--简单图片轮播

    一个简单的图片轮播效果 photo.html页面代码,基本的HTML结构,在main中显示图片,此处图片依次命名为1.jpg.2.jpg.3.jpg.4.jpg. <!DOCTYPE html& ...

  4. 推荐一款超级漂亮的HTML5 CSS3的图片轮播器

    最近在学习HTML5和CSS3,印象最深的是CSS3的动画功能,不仅有浏览器原生支持,执行效率高,而且免去在js中自己管理timer. 本来想写一个图片轮播器练练手,结果在网上发现一个国人写的开源的图 ...

  5. Winform 实现图片轮播（解决Image.FromFile内存不足）

    前言 最近项目中需要在winform中做一个类似于网页那种轮播的效果,这里做下记录. 实现 整体的实现思路如下: 读取图片文件夹. 建立一个集合存储Image对象. 定时器定时更换PictrueBox ...

  6. 图片轮播(左右切换)--JS原生和jQuery实现

    图片轮播(左右切换)--js原生和jquery实现 左右切换的做法基本步骤跟 上一篇文章  淡入淡出 类似,只不过修改了一些特定的部分 (1)首先是页面的结构部分 对于我这种左右切换式 1.首先是个外 ...

  7. 图片轮播(淡入淡出)--JS原生和jQuery实现

    图片轮播(淡入淡出)--js原生和jquery实现 图片轮播有很多种方式,这里采用其中的 淡入淡出形式 js原生和jQuery都可以实现,jquery因为封装了很多用法,所以用起来就简单许多,转换成j ...

  8. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. js/jquery中实现图片轮播

    一,jquery方法 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type&qu ...

随机推荐

  1. ios断点续传:NSURLSession和NSURLSessionDataTask实现

    苹果提供的NSURLSessionDownloadTask虽然能实现断点续传,但是有些情况是无法处理的,比如程序强制退出或没有调用 cancelByProducingResumeData取消方法,这时 ...

  2. Javascript的加载

    最新博客站点:欢迎来访 1. 浏览器加载     (1) 同步加载 在网页中,浏览器加载js文件的方式是通过<script>标签.如下所示: //内嵌脚本 <script type= ...

  3. atan和atan2反正切计算

    typedef struct point { double x, y; }point; //给定两个点 point a(x1,y1),b(x2,y2); 使用反三角函数atan求斜率,原型如下 flo ...

  4. JS小数运算失精度的问题

    JS因为是解释性语言,在运算中会有丢失精度的问题,这种现象多出现在浮点型运算的情况下. 例如 5.11 * 100  得到的结果是 511.00000000000006 这种情况尤其是在处理金额的时候 ...

  5. 【Linux磁盘优化管理--RAID和LVM】

    在现阶段的企业环境中,为了数据的安全性及完整性必须要有一个合理的存储方案.面对着每秒可能产生超过几TB的数据,考虑到磁盘能不能实现 热冗余,及扩容,缩容.Linux给出了RAID(磁盘阵列)以及LVM ...

  6. scrapy框架爬取笔趣阁

    笔趣阁是很好爬的网站了,这里简单爬取了全部小说链接和每本的全部章节链接,还想爬取章节内容在biquge.py里在加一个爬取循环,在pipelines.py添加保存函数即可 1 创建一个scrapy项目 ...

  7. （数据科学学习手札15）DBSCAN密度聚类法原理简介&Python与R的实现

    DBSCAN算法是一种很典型的密度聚类法,它与K-means等只能对凸样本集进行聚类的算法不同,它也可以处理非凸集. 关于DBSCAN算法的原理,笔者觉得下面这篇写的甚是清楚练达,推荐大家阅读: ht ...

  8. 开启一个项目如何上传到git

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库 git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数点 ...

  9. 2457: [BeiJing2011]双端队列

    2457: [BeiJing2011]双端队列 链接 很奇妙的转化. 题目要求最后的所有序列也是有序的,所以可以求出最后的序列(即排序后的序列),然后分成许多份,要求每一份都是一个双端序列,求最少分成 ...

  10. LINUX系统配置相关

    修改系统引导文件 grub.cfg的文件位置   /boot/grub/grub.cfg set default="4"  默认windows是在第四个选项 set timeout ...