效果展示如下：

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

代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3. 	<head>
  4. 		<meta charset="UTF-8">
  5. 		<title>轮播的div+css样式改进</title>
  6. 		<style type="text/css">
  7. 			body{background-image: url(img/001.jpg);}
  8. 			.lb{
  9. 				margin: 10px auto;
  10. 				width: 1440px;
  11. 				height: 420px;
  12. 			}
  13. 			#you{
  14. 				cursor: pointer;
  15. 				display: inline-block;
  16. 				height: 420px;
  17. 				width: 45px;
  18. 				left: 1395px;
  19. 				top: -424px;
  20. 				position: relative;
  21. 				z-index: 1;
  22. 			}
  23. 			#zuo{
  24. 				cursor: pointer;
  25. 				height: 420px;
  26. 				width: 45px;
  27. 				top: 424px;
  28. 				position: relative;
  29. 				z-index: 1;
  30. 			}
  31. 			.f{
  32. 				opacity:0.2;//设置透明
  33. 			}
  34. 			.f:hover
  35. 			{
  36. 				opacity:1.0;//设置鼠标经过不透明
  37. 			}
  38. 			li{
  39. 				list-style-type: square;
  40. 				border: 1px #000;
  41. 				width: 100px;
  42. 				height: 100px;
  43.  
  44. 			}
  45. 			.ul{
  46. 				margin: auto;
  47. 				display: inline-block;
  48. 				position: relative; /*相对定位*/
  49. 				z-index: 2;
  50. 				left: 830px;
  51. 				top: 380px;
  52.  
  53. 			}
  54.  
  55. #buttons span {
  56.     cursor: pointer;
  57.     font-size: 15px;
  58.     text-align: center;
  59.     font-family: "微软雅黑";
  60.     float: left;
  61.     border: 1px solid #fff;
  62.     width: 20px;
  63.     height: 20px;
  64.     border-radius: 50%;  /*设置为圆形*/
  65.     /*background: #333; */
  66.     margin-right: 15px; /*设置圆形的间隔为15像素*/
  67. }
  68. #buttons .on {
  69.     background: orangered;   /*选中的按钮样式*/
  70. }
  71.  
  72. 		</style>
  73. 	</head>
  74. 	<body>
  75.  
  76. 		<div class="lb">
  77. 			<img src="img/左.png" id="zuo" class="f" />
  78. 			<img src="img/1.jpg" id="img" />
  79. 			<img src="img/右.png" id="you" class="f"/>
  80. 		</div>
  81. 		<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>
  82. 		<script type="text/javascript">
  83. 			var zuo=document.getElementById("zuo");
  84. 			var you=document.getElementById("you");
  85. 			var img=document.getElementById("img");
  86. 			var lb=document.getElementsByClassName("lb")[0];
  87. 			var index=1;
  88. 			var moverleft=function  () {
  89. 				index++;
  90. 				if(index>7)index=1;
  91. 				img.src="img/"+index+".jpg";
  92. 				changbg ();
  93. 			}
  94. 			you.onclick=moverleft;
  95. 			var moverright=function () {
  96. 				index--;
  97. 				if(index<1)index=7;
  98. 				img.src="img/"+index+".jpg";
  99. 				changbg ();
  100. 			}
  101. 			zuo.onclick=moverright;
  102.  
  103. 			var mm=setInterval(moverleft,3000);
  104. 			lb.onmousemove=function () {
  105. 				clearInterval(mm);
  106. 			}
  107. 			lb.onmouseout=function () {
  108. 			  mm=setInterval(moverleft,3000);
  109. 			}
  110.  
  111. 		/*	var buttons = document.getElementById("buttons").getElementsByTagName("span");
  112.  
  113. 			 function showButton() {
  114.         //先找出原来有.on类的按钮，并移除其类
  115.         for (var i = 0; i < buttons.length ; i++) {
  116.             if( buttons[i].className == 'on'){
  117.                 buttons[i].className = '';
  118.                 break;
  119.             }
  120.         }
  121.         //为当前按钮添加类，索引下标从0开始，故需减1
  122.         buttons[index - 1].className = 'on';
  123.     }
  124.  
  125. 			   for (var i = 0; i < buttons.length; i++) {
  126.         buttons[i].onclick = function () {
  127.  
  128.             if (moverleft()) {         //如果切换还在进行，则直接结束，直到切换完成
  129.                 return;
  130.             }
  131.             if(this.className == 'on') {     //如果点击的按钮是当前的按钮，不切换，结束
  132.                 return;
  133.             }
  134.             }
  135.         }
  136. 		*/	
  137.  
  138. 			var buttons = document.getElementById("buttons").childNodes;
  139.  
  140. 			function changbg () {
  141.  
  142. 				for(var i=0;i<buttons.length;i++)
  143. 				{
  144. 					buttons[i].style.background="#333333";
  145. 				}
  146. 				buttons[index-1].style.background="#FF4500";
  147. 			}
  148.  
  149. 			//把下面小数字图标和图片连接起来,利用闭包的特点
  150. 			for(var i=0;i<buttons.length;i++){
  151. 				buttons[i].onclick=(function  () {
  152. 					var j=i+1;
  153. 				return function  () {
  154. 					index=j;
  155. 					img.src="img/"+index+".jpg";
  156. 					changbg();
  157. 				}
  158. 				})();
  159.  
  160. 			}
  161. 		</script>
  162. 	</body>
  163. </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. 解决问题的思路（如故事版里面有东西，却不见了）（swift里面开发比较多）

    解决问题的思路(如故事版里面有东西,却不见了) 正确效果图: 真机效果图: 内容:不见了 解决步骤:(重点讲解方法1) 1.把背景图隐藏了,如果能出现内容,说明背景图把内容遮住了.那怎么办呢,背景图是 ...

  2. 自动计算UITableViewCell高度2（CGRect约束）

    1.先创建model .h #import <Foundation/Foundation.h> #import <UIKit/UIKit.h> @interface LBDNe ...

  3. PHPStorm+Xdebug断点远程调试PHP xdebug安装

    一.xdebug安装 wget http://www.xdebug.org/files/xdebug-2.2.3.tgz #下载Xdebug tar xzf xdebug-2.2.3.tgz cd x ...

  4. 导入项目后，js文件报错解决方法

    导入项目后,发现 js文件报错,但是js文件是从官网下载的.解决办法: 选中报错的js文件, 右键选择 MyEclipse-->Exclude From Validation : 然后继续右键执 ...

  5. 解决Nginx: [error] open() ＂/usr/local/Nginx/logs/Nginx.pid" failed（2:No such file or directory）

    /usr/local/nginx/sbin/nginx -c /usr/local/nginx/conf/nginx.conf

  6. Asp.net 自定义CustomerSession 存放到Redis中

    首先,引用 Redis 操作驱动组件:StackExchange.Redis.dll. 继承SessionStateStoreProviderBase 类, 实现方法: using System; u ...

  7. Yaf学习(一)----Linux安装Yaf

    1.简介 Yaf,全称 Yet Another Framework,是一个高性能的PHP开发框架,采用PHP扩展实现(c语言).Blablablabla....... 2.环境 2.1 虚拟机 虚拟机 ...

  8. Hadoop(22)-Hadoop数据压缩

    1.压缩概述 2.压缩策略和原则 3.MapReduce支持的压缩编码 64位系统下的单核i7,Snappy的压缩速率可以达到至少250MB/S,解压缩速率可以达到至少500MB/S 4.压缩方式选择 ...

  9. python面向对象-cs游戏示例

    #!/usr/local/bin/python3 # -*- coding:utf-8 -*- class Role(object): n = 123 # 类变量 name = "我是类na ...

  10. spark-day1

    #!/usr/bin/python # -*- coding: utf_8 -*- from pyspark import SparkConf, SparkContext import os, tim ...