Ⅰ 我想把一個圖片代碼寫到js了裡面，然後調用這個js，就可以直接顯示圖片在網頁上，怎麼寫
這個實現一抄般有兩用方式
1.用js定義襲一個字元串變數，把圖片的字元串寫進去，然後div.innerhtml把這個字元串加進去。
2.用類似jquery的js插件，也是先定義圖片字元串變數，然後div.append這個字元串就好了。
Ⅱ js+css 圓形/環形 排列
項目需要做個環形的導航排列，網上找到一篇詳細介紹原理的文章 javascript-按圓形排列DIV元素(一)---- 分析 ，然後嘗試著把它實現察扒知了此山，效果圖如下：
源碼分享給大家哦，拿走不謝O(∩_∩)O
vue版本的根敗消據項目需求做了些略微的修改
Ⅲ js裡面可以寫輪播圖嗎
當然可以，css3就可以寫輪播，只不過js寫的輪播圖兼容性更好，使用順暢。
js實現輪播圖主要是搞懂原理，還有js知識就OK啦
圖片切換 是index值切換
換下一張 按鈕實現功能
到最後一張回到第一張
第一張往上翻回到最後一張
寫效果就OK啦
Ⅳ 怎麼用js的原生寫法寫出來一個輪播圖呢
1：排出一個版，包含上下切換的標識和圖片導吵消航，所有圖片隱藏，給圖片第一張加一個class名，樣式設為顯示，圖片導航的第一個加一個class名，加上背景色；
2：獲取節點；
3：給向下切換寫一個點擊事件，點擊圖片切換到下一張，注意當圖片切換到最後一張的時候會報錯，所以必須要判斷一下，當圖片切換到最後一張的時候在，再次擊會切換到第一張；
4：給向上切換寫一個點擊事件，注意當圖片切換到第一張之後會報錯，所以必須要判斷一下，當圖片切換到第一的時候，再次點擊會切換到最後張，循環起來；
5：寫一個定時器，定時器的播放順序和向下切換一致，可以封裝一個函數方便調用；
6：寫滑鼠劃入事件，清除定姿祥時器；
7：寫滑鼠移出事件，定時器繼續運行；
8：圖片導升冊知航的點擊事件
點擊事件click
定時器setlnterval（）
if判斷
for（）循環
Ⅳ D3.js畫圖：3D動態餅圖(齒輪圖)
通常畫可視化圖的工具很多，除了d3.js，還有echarts.js等。
通過比較，看起來ECharts.js更容易上手，但是因為我需要更靈活更符合個性定製化的工具，所以選了d3.js。
經過一段時間的磨煉，從折線圖、閉合路徑圖、蜂窩圖、直角坐標、極坐標都玩了個遍。
那這次就來個3D的吧，其實d3.js做3D的圖不是很容易的，有更好的選擇，但我認准了d3.js，一條道走到黑吧(想起高中數學老師說的話，當你解題解到一半時發現有更好的辦法，不，趕緊忘掉，接著當前的方法，只要方法沒錯，總能解出來，也許會傻一點，但是一定會有正確的結果；如果中途放棄，也許另一個方法更快更聰明，但也許更慢或者錯誤，不算到最後，誰都不知道誰最准確。我選擇相信他的話，於是。。。我成了程序員O(∩_∩)O哈哈~)。
有人鄙視拿來主義，要我說，你能拿來那是你的本事，如果還能在此基礎上做出更好的東西，何樂而不為呢？
每個人時間有限，每個項目也有deadline，不可能從每一個螺絲釘怎麼擰開始學起，不然怎麼會有那麼多五花八門的框架，會有封裝好的組件和介面，正因為有人已經做了前期工作，所以時間才能省下來做更有意義的事情，這就是站在巨人肩上的道理所在吧。
但是我們得明白拿來的東西的原理，以及出了問題該怎麼解決的能力。然後才能做出更厲害的東西。
首選當然是官網的例子咯，目測搜了一圈，終於找到一個3D Donut。就是你了，我的巨人。
把該地址的donut3d.js拷貝下來作為畫3D餅圖的基礎js，待會會在此基礎上修改，以滿足我的要求(長的像齒輪的要求)。
那我們就一睹她的芳容吧。
如果這張圖符合你的要求，那就打住，不用往下看了，直接看官網例子即可。
注意d3版本的問題，如果你用d3.v3.js，恭喜你，啥也不用改，直接拿來用；如果你用d3.v5.js，那稍微改下方法，比如d3.v5.js沒有d3.layout，所以d3.layout.pie改成d3.pie。我就是那個不幸的人，用的d3.v5.js。沒關系，改起來很快，運行下，看哪裡有錯，就改哪裡，O(∩_∩)O哈哈~so easy！
還是先上個我已經改好之後的3D餅圖(齒輪圖)吧，方便說明。
其實顯示的時候是個動態的，一節一節顯示出齒輪的。
背景是黑乎乎的，據說現在流行黑乎乎的背景，顯得有科技感，技術也要趕時髦啊，我這么fashion的人，做出來的東西也要fashion啊O(∩_∩)O~
從以上分析可以看出，難啃的骨頭在第4點。這個圖斷斷續續花了3天時間才搞定，為啥是斷斷續續呢，因為還有其他工作要做嘛，你懂得。
那就按順序一條一條實現，總有一天我們的願望都能實現！
首先新建svg及設置寬高。
我是切分成了32個小齒輪(包含透明的)，如果你想分的更細，可以分成40或50個，只要你覺得好看就行。
既然要分成32個小立體快，那數據也要切分成32個。
通過以上處理，把數據整合成可以生成齒輪的完整數據dataset。
如果不增加左側面和右側面，那調用donut3d.js的draw方法後，會生成什麼樣的圖形呢？
請各位仔細看。
是不是有種被掏空的感覺？如果你覺得這樣挺好看，那也行，打住吧，後面就不用再看了；如果你想補齊其他面，請耐心往下看。
經過觀察和比較，增加左側面和右側面就能填滿空虛的心啦啦啦～
這次要在donut3d.js這個巨人身上添磚加瓦咯。
然後再用新增加的兩個方法畫出左右側面。
終於填滿需要的每一面，看上去像個立體齒輪圖了。
這個圖是很久之前做的，當時花了很長時間調試，每一個面有4條邊，定位2個點，再加上高度和內半徑，就可以計算出4個點，然後就可以畫出4條邊，最後填充顏色，一個面就完成了。
最近整理文檔時覺得有必要寫出來，方便以後查閱和探討，也告訴自己積累是一個長期過程，不急不躁，慢慢來，一步一步完成既定目標，總有一天你會走遍技術的每個角落。
現在我整理成vue組件，傳一個百分比的參數，就可以顯示3D齒輪圖了，我的3D齒輪圖也成巨人啦。
Ⅵ 請大神用js寫出一個圖片按照時間來變化,文字也隨著變換!
<divstyle="width:100px;overflow:hidden"返游>
<ulid="imglst"style="width:500px">
<listyle="width:100px;float:left;"><!--這裡面放圖片和文字--></li>
<listyle="width:100px;float:left;"><!--這裡面放圖片和文字--></li>
<listyle="width:100px;float:left;"><!--這裡面放圖片和文字--></li>
<listyle="width:100px;float:left;"><!--這裡面放圖片和文字--></li>
<listyle="width:100px;float:left;"><!--這裡面放圖片和文字--></li>
</ul>
</div>
這里，使ul左(右、上、下)移動(變化、輪播)，ul的寬度(左、右移動)就是ul下面的所有的li的寬度(上下)的總和
varswidth=100;//表示單個li的寬度(高度)
varrunTime;//定時器
varStime=3000;//每3秒變化一次飢春
varsptm=300;//變化過程所需要的時間
varsindex=0;//當前在第幾張
varcountindex=4;//表示總張數
functionindex_Pics(){
clearInterval(runTime);//清除定時器
$("#imglst").animate({
"margin-left":-sindex*swidth//執行動畫效果，ul左移
},sptm);
runTime=setInterval(function(){
if(sindex==countindex-1){
sindex=0;//當前是最後一張圖片，位置改變為第一張
爛世耐}else{
sindex+=1;//否則加1
}
index_Pics();//定時器時間一到，重新執行方法
},Stime);
}
Ⅶ d3.js環形統計圖代碼
(function(){
mole.exports = function(weekNormal,weekHeight,weekLow,monthNormal,monthHeight,monthLow){
//周
var weekNormaldataset = [];
var weekHeightdataset = [];
var weekLowdataset = [];
weekNormaldataset[0] = weekNormal;
weekNormaldataset[1] = 100 - weekNormaldataset[0];
weekHeightdataset[0] = weekHeight;
weekHeightdataset[1] = 100 - weekHeightdataset[0];
weekLowdataset[0] = weekLow;
weekLowdataset[1] = 100 - weekLowdataset[0];
//月
var monthNormaldataset = [];
var monthHeightdataset = [];
var monthLowdataset = [];
monthNormaldataset[0] = monthNormal;
monthNormaldataset[1] = 100 - monthNormaldataset[0];
monthHeightdataset[0] = monthHeight;
monthHeightdataset[1] = 100 - monthHeightdataset[0];
monthLowdataset[0] = monthLow;
monthLowdataset[1] = 100 - monthLowdataset[0];
var width = 100;
var height = 100;
//周
var svg = d3.select(".oneWeekNormal")
.append("svg")
廳橡手 .attr("width", width)
.attr("height", height);
var svg1 = d3.select(".oneWeekHeight")
.append("svg")
.attr("width", width)
.attr("height", height);
var svg2 = d3.select(".oneWeekLow")
.append("svg")
.attr("width", width)
如梁 .attr("height", height);
//月
var svg3 = d3.select(".oneMonthNormal")
.append("svg")
.attr("width", width)
.attr("height", height);
var svg4 = d3.select(".oneMonthHeight")
.append("svg")
.attr("width", width)
.attr("height", height);
var svg5 = d3.select("扮嫌.oneMonthLow")
.append("svg")
.attr("width", width)
.attr("height", height);
var pie = d3.layout.pie();
//周
var weekNormalpiedata = pie(weekNormaldataset);
var weekHeightpiedata = pie(weekHeightdataset);
var weekLowpiedata = pie(weekLowdataset);
//月
var monthNormalpiedata = pie(monthNormaldataset);
var monthHeightpiedata = pie(monthHeightdataset);
var monthLowpiedata = pie(monthLowdataset);
var outerRadius = 50; //外半徑
var innerRadius = 40; //內半徑，為0則中間沒有空白
var arc = d3.svg.arc() //弧生成器
.innerRadius(innerRadius) //設置內半徑
.outerRadius(outerRadius); //設置外半徑
var normalColor = ['#1BBD8F', '#E8EBED'];
var heightColor = ['#FF455B', '#E8EBED'];
var lowColor = ['#FF970C', '#E8EBED'];
//周
var arcs = svg.selectAll("g")
.data(weekNormalpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")");
arcs.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return normalColor[i];
})
.attr("d",function(d){
return arc(d);
});
var arcs1 = svg1.selectAll("g")
.data(weekHeightpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")");
arcs1.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return heightColor[i];
})
.attr("d",function(d){
return arc(d);
});
var arcs2 = svg2.selectAll("g")
.data(weekLowpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")");
arcs2.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return lowColor[i];
})
.attr("d",function(d){
return arc(d);
});
//月
var arcs3 = svg3.selectAll("g")
.data(monthNormalpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")");
arcs3.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return normalColor[i];
})
.attr("d",function(d){
return arc(d);
});
console.log(arcs3);
var arcs4 = svg4.selectAll("g")
.data(monthHeightpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")");
arcs4.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return heightColor[i];
})
.attr("d",function(d){
return arc(d);
});
var arcs5 = svg5.selectAll("g")
.data(monthLowpiedata)
.enter()
.append("g")
.attr("transform","translate("+ (width/2) +","+ (width/2) +")");
arcs5.append("path")
.attr('stroke-linecap', 'round')
.attr("fill",function(d,i){
return lowColor[i];
})
.attr("d",function(d){
return arc(d);
});
//周
arcs.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekNormaldataset[0]+"%";
});
arcs1.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekHeightdataset[0]+"%";
});
arcs2.append("text")
.attr("text-anchor","middle")
.text(function(d){
return weekLowdataset[0]+"%";
});
//月
arcs3.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthNormaldataset[0]+"%";
});
arcs4.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthHeightdataset[0]+"%";
});
arcs5.append("text")
.attr("text-anchor","middle")
.text(function(d){
return monthLowdataset[0]+"%";
});
};
}).call(this);
Ⅷ 怎樣用js實現文字的環形旋轉
如果文字一直是正著的，
首先，要旋轉，對象的位置必須是能改變，所以position要設置
然後選擇其實就是改變它的left和top而已，而這兩個的值，是用math.sin(),和math.cos()算出來的。
如果旋轉文字本身，也就是文字是斜著的，則對其設置CSS的transform屬性。
Ⅸ js3d環形旋轉大小也變化
在three.js中，可以通過對環形物戚賣缺體的transform屬性進行調整，來實現環形旋轉大小的變化。具體的實現方法高辯如下：首先，創建一個圓環形的物體，然後設置該物體的transform屬性，設置transform.scale.x和transform.scale.y的值，以此來控制環形物體的大小；然後設置transform.rotation.z的值，以此來控制環形物體的旋轉角度。通過以上操作，可以實現three.js中配冊環形旋轉大小的變化。
Ⅹ 淺談js寫輪播圖的思路與心得
1 、 首先我們需要在開始時將我們鎖需要的封裝函數鏈接進來。
列如 <script type="text/javascript" src="animate-2.0.1.js"></script>
而且我們必須得得到所有需要用到的對象用 getElementById 、getElementsByTagName，然後把需要一個規范的命名。
2 、第二部我們創建一個定時器先讓輪播圖中所有圖片的 li 動起來
右邊點襪吵擊函數跟定時器所運動的函數一個樣，所以我們可以封裝一個函數abc（）；他們是共用的；
3 、 寫出左邊點擊按鈕事件的函數，這樣就如上abc（）；差不多隻是修改一些東西就行了；
4 、講小圓點的樣式改變封裝成一個函數就是下面的chnage（）；
然後還得監聽點擊每個小圓點的事件，所以可以用for + onclick 講每個小圓點點擊事件給寫出來。
難點：
1 、函數截留，當我們點擊函嘩好戚數正在執行時，如果多亂陵次點擊就會出現圖片運動混亂的現象，這是我們需要用if(picDiv.isanimated) {return;}，
2 、cloneNode（）函數picUl.appendChild(picLi[0].cloneNode(true))