今天教同事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>
效果图如下：
