今天教同事jquery，用图片轮播来做课件，下面将页面代码分享给大家，希望能给大家带来帮助，另外，本示例界面比较粗糙，请海涵，未考虑兼容，如果需要使用，请适当的做修改。资源文件不提供，jquery库和
今天教同事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>效果图如下：
