當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
javascript图片轮播(完全自己手写代码)
生活随笔
收集整理的這篇文章主要介紹了
javascript图片轮播(完全自己手写代码)
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
2019獨角獸企業重金招聘Python工程師標準>>>
今天教同事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++;//開啟定時器，并將定時器對象賦值給timerObjthis.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++){//給每個縮略圖定義一個divvar child= $("<div></div>");//設置樣式child.addClass("item");//添加img標簽，顯示縮略圖var img = $("<img/>");//設置圖片資源img.attr("src",data[i].src) //將圖片添加到divchild.append(img); child.css("opacity",0.5);//將div添加到縮略圖顯示區域child.appendTo($("#listbox"));}//定義定時任務實例var timer=new Timer(data);//調用start 啟動任務timer.start();});//--></script></body> </html>效果圖如下：
轉載于:https://my.oschina.net/u/2457585/blog/699145
總結
以上是生活随笔為你收集整理的javascript图片轮播(完全自己手写代码)的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 网页浏览器知道我们的哪些信息？(1)
- 下一篇： 实现OC与JS的交互