文档章节

javascript图片轮播(完全自己手写代码)

xiaobo137
 xiaobo137
发布于 2016/06/22 11:40
字数 729
阅读 69
收藏 0

今天教同事jquery,用图片轮播来做课件,下面将页面代码分享给大家,希望能给大家带来帮助,另外,本示例界面比较粗糙,请海涵,未考虑兼容,如果需要使用,请适当的做修改。资源文件不提供,jquery库和图片素材请自行下载和替换。

<!DOCTYPE HTML>
<html>
 <head>
   
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<script type="text/javascript" src="./js/jquery.min.js"></script>
<style>
	html,body,.container{ margin:0;padding:0; font-size:12px;}
	.container{width:800px;height:300px; border:1px solid #cccccc;margin-left:200px; margin-top:140px;} 
	.imagebox{ width:680px;height:100%;position:relative;}
	.imagebox img{ border:0;} 
	.tiptext{ position:absolute;left:0px;bottom:0px; height:20px; line-height:20px; vertical-align:middle; text-indent:2em; background-color:#000000;color:#ffffff;opacity:0.6;width:100%; }
	.listbox{ float:right;width:100px;height:100%;}
	.item { height:50px;line-height:50px;width:80%; vertical-align:middle; margin:10px;}
	.item img{ border:1px solid #ffffff;width:100%;height:100%;} 
	.item img.on{ border:1px solid #000000;} 
</style>
 </head>

 <body>
	<div id="" class="container">
		<div id="listbox" class="listbox">
		 
		</div>
		<div id="" class="imagebox">
			<img id="imgdiv" src="" width="100%" height="100%" border="0"/>
			<div id="tiptext" class="tiptext"></div>
		</div>
	</div>

	 <script type="text/javascript">
		function Timer(data)
		{
			//通过构造方法获得资源数据
			this.data=data;
			//设定轮播速度 3s 一次
			this.speed=3000;
			//定义索引 ,默认为0	
			this.index=0;
			//定义定时器对象
			this.timerObj=null; 
		}

		Timer.prototype={
			//启动任务
			start:function(){ 
				//定义_this指向自身,便于后面进行引用
				var _this=this;
				//第一次直接播放
				this.play(this.index); 
				//索引自增
				this.index++;
				//开启定时器,并将定时器对象赋值给timerObj
				this.timerObj=setInterval(function(){
					//执行一次play方法
					_this.play(_this.index); 
					//索引自增,实现变化效果
					_this.index++;
				},this.speed)
			},
			stop:function(){
				//如果定时器对象不为空
				if(this.timerObj!=null)
				{
					//取消定时任务,即停止播放
					clearInterval(this.timerObj)
				}
			},
			play:function(index)
			{
				//获取数据总长度,
				var len = this.data.length;
				//如果索引超出范围
				if(index>=len)
				{
					//重新从第一个开始
					index=0;
				}
				//将索引赋值给对象,否则第二次论询时,索引不会自增
				this.index=index;
				//更新图片
				$("#imgdiv").attr("src",this.data[index].src);
				//更新文本
				$("#tiptext").html(this.data[index].text);

				//重置每个层的透明度
				$(".item").css("opacity",0.5); 

				//重置选中层的透明度
				$(".item").eq(index).css("opacity",1);

				//清除缩略图上的样式
				$(".item img").removeClass("on");
				
 
				//设定选中缩略图的样式
				$(".item img").eq(index).addClass("on");

			}

		}

	 <!--
		$(function(){
			//定义图片数据
			var data=[{src:"./images/img1.jpg",text:"测试1"},
					  {src:"./images/img2.jpg",text:"测试2"},
					  {src:"./images/img3.jpg",text:"测试3"},
					  {src:"./images/img4.jpg",text:"测试4"}];
			//定义图片轮播个数
			var count=data.length;
			//初始化图片列表
			for(var i=0;i<count;i++)
			{
				//给每个缩略图定义一个div
				var child= $("<div></div>");
				//设置样式
				child.addClass("item");
				//添加img标签,显示缩略图
				var img = $("<img/>");
				//设置图片资源
				img.attr("src",data[i].src)   
				//将图片添加到div
				child.append(img);  
				child.css("opacity",0.5);
				//将div添加到缩略图显示区域
				child.appendTo($("#listbox"));
			}
			//定义定时任务实例
			var timer=new Timer(data);
			//调用start 启动任务
			timer.start();
		});


		

	 //-->
	 </script>
 </body>
</html>

效果图如下:

© 著作权归作者所有

共有 人打赏支持
xiaobo137
粉丝 35
博文 64
码字总数 33309
作品 0
长沙
项目经理
私信 提问
记一个JavaScript图片轮播思路与代码

说在前头 喜欢并学习前端,一路摸爬滚打过来,现在算算也快满一年的,每天或多或少都会来“拜读”大家的写的文章,学习与感悟了不少,作为一名要变的更强的前端小哥哥,在这个节点上,也想写...

柚子先生
08/06
0
0
手把手教你用原生JavaScript造轮子(2)——轮播图

通过上一篇文章的学习,我们基本掌握了一个轮子的封装和开发流程。那么这次将带大家开发一个更有难度的项目——轮播图,希望能进一步加深大家对于面向对象插件开发的理解和认识。 So, Let's ...

csdoker
08/12
0
0
手把手教你封装JavaScript插件

我们可能已经用过很多JS插件,比如著名的轮播图插件Swiper.js,滚动条插件iScroll.js等等,用起来非常方便,大大提高了我们的工作效率。那么它们基本实现原理是怎样的呢?我们又该如何DIY一个...

前端王睿
08/29
0
0
封装一个简单的原生js焦点轮播图插件

轮播图实现的效果为,鼠标移入左右箭头会出现,可以点击切换图片,下面的小圆点会跟随,可以循环播放。本篇文章的主要目的是分享封装插件的思路。 轮播图的我一开始是写成非插件形式实现的效...

daisy,gogogo
08/18
0
0
bootstrap常用功能快速入门以及常见问题解决方案

1、图片轮播: 官网上的代码已经给的很清楚了,但是经常会出现问题。要做的很简单,首先引入jquery和bootstrap文件,再将官网上的html代码加上,最后加上一行js代码$('.carousel').carsouse...

fareise
2015/08/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

mac 下 mysql 8.0.13 安装并记录遇到的问题 以便以后查看

安装 官网mysql 下载地址 安装过程 省去 安装好之后 下载navicat 错误1 链接 遇到 mysql 2003 - Can't connect to MySQL server 错误, 解决方案 重启mysql 服务 #错误2 ERROR 1045: Acces...

杭州-IT攻城狮
29分钟前
3
0

中国龙-扬科
33分钟前
1
0
[Spring4.x]基于spring4.x纯注解的Web工程搭建

在前文中已经说明了如何基于 Spring4.x+ 版本开发纯注解的非web项目,链接如下: https://my.oschina.net/morpheusWB/blog/2985600 本文则主要说明,如何在Web项目中,"基于spring纯注解方式...

morpheusWB
今天
13
0
基础编程题目集-7-13 日K蜡烛图

股票价格涨跌趋势,常用蜡烛图技术中的K线图来表示,分为按日的日K线、按周的周K线、按月的月K线等。以日K线为例,每天股票价格从开盘到收盘走完一天,对应一根蜡烛小图,要表示四个价格:开...

niithub
今天
5
0
Jenkins window 下的安装使用

1.下载:https://jenkins.io/download/ 双击安装完毕,将自动打开浏览器: http://localhost:8080 打开对应位置的文件,将初始密钥粘贴至输入框。 第一个是 安装默认的软件;第二个是 自定义...

狼王黄师傅
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部