當前位置:首頁 » 網頁前端 » 做一個圖片輪播腳本
擴展閱讀
webinf下怎麼引入js 2023-08-31 21:54:13
堡壘機怎麼打開web 2023-08-31 21:54:11

做一個圖片輪播腳本

發布時間: 2022-09-03 05:12:58

① html中如何實現圖片輪播

光靠div+css是無法實現的。

運用到了JavaScript 技術,學習JavaScript 要對html 要有了解,學起來就不是特別的吃力,JavaScript屬於一種腳本語言,和java等編程語言比起來相對的好學。

② 【急】html網頁製作,如何實現對圖片輪播腳本的調用

<head>
<linkrel="stylesheet"href="flexslider.css"type="text/css">
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js">
<!--這里改成你自己的jQuery文件位置,因為谷歌被牆了-->
</script><scriptsrc="jquery.flexslider.js"></script>
<!--把下面這行代碼放在<head>標簽裡面,前面三個鏈接js腳本的代碼後面-->
<scripttype="text/javascript"charset="utf-8">$(window).load(function(){$('.flexslider').flexslider();});</script>
</head>

<body>
<!--Placesomewhereinthe<body>ofyourpage-->
<divclass="flexslider">
<ulclass="slides">
<li>
<imgsrc="slide1.jpg"/>
</li>
<li>
<imgsrc="slide2.jpg"/>
</li>
<li>
<imgsrc="slide3.jpg"/>
</li>
</ul>
</div>
</body>

剩下的配置部分根據網頁上的提示來就行了

③ HTML中的圖片輪播怎麼做

可以上jquery插件庫這個網站看看,大部分資源是免費的。輪播圖也有好多。
bootstrap也提供輪播模板。
自己寫的話,假如放3張輪播圖,pic1,pic2,pic3。創建一個ul,ul中放5張圖片,順序是pic3,pic1,pic2,pic3,pic1,這樣銜接起來。設置ul的寬度是500%,li的寬度是20%,這樣圖片就能一字排開,設置ul的父元素的樣式為overflow:hidden;再用CSS3的動畫屬性,讓li中的圖片元素位移或者讓ul位移。

④ html5如何實現圖片輪播

靜態獲取圖片寫法,給定圖片的個數,用js實現輪播圖自動轉換。

  1. <!DOCTYPE html>

  2. <html lang="en">

  3. <head>

  4. <meta charset="UTF-8">

  5. <title>Document</title>

  6. <!-- *******設置樣式********** -->

  7. <style type="text/css">

  8. .show_div{

  9. width: 400px;

  10. height: 400px;

  11. margin: 0 auto;

  12. border: 2px solid block;

  13. overflow: hidden;

  14. }

  15. .scroll_div{

  16. width: 2000px;

  17. height: 400px;

  18. }

  19. .scroll_div img{

  20. width: 400px;

  21. height: 400px;

  22. float: left;

  23. }

  24. </style>

  25. <!-- end -->

  26. </head>

  27. <body>

  28. <div class="show_div">

  29. <div class="scroll_div">

  30. <img src="img/b.jpg" alt="">

  31. <img src="img/c.jpg" alt="">

  32. <img src="img/d.jpg" alt="">

  33. <img src="img/a.jpg" alt="">

  34. <img src="img/b.jpg" alt="">

  35. </div>

  36. </div>

  37. </body>

  38. <!-- *********js代碼******** -->

  39. <script type="text/javascript">

  40. var scrollDiv = document.getElementsByClassName("scroll_div")[0];

  41. // 定義初始值

  42. var left =0;

  43. // 定義一個定時器 走一步

  44. function move(){

  45. var timer = setInterval(function(){

  46. left --;

  47. if (left <= -1600) {

  48. left = 0;

  49. }

  50. if (left % -400 == 0) {

  51. clearInterval(timer);

  52. timer = null;

  53. }

  54. scrollDiv.style.marginLeft = left + "px";

  55. },10);

  56. }

  57. // 定義一個定時器 每隔固定時間 走一張

  58. setInterval(function(){

  59. move();

  60. },5000);

  61. </script>

  62. </html>

⑤ 網頁圖片輪播腳本 改變時間

DIV架構的,淘寶網自定義輪播速度了,你改不了。 除非重新寫代碼<script language="javascript" type="text/javascript"> /* power by: http://www.wxwdesign.cn */ //主函數 var s=function(){ var interv=2000; //切換間隔時間 var interv2=10; //切換速速 var opac1=80; //文字背景的透明度 var source="fade_focus" //焦點輪換圖片容器的id名稱 //獲取對象 function getTag(tag,obj){if(obj==null){return document.getElementsByTagName(tag)}else{return obj.getElementsByTagName(tag)}} function getid(id){return document.getElementById(id)}; var opac=0,j=0,t=63,num,scton=0,timer,timer2,timer3;var id=getid(source);id.removeChild(getTag("div",id)[0]);var li=getTag("li",id);var div=document.createElement("div");var title=document.createElement("div");var span=document.createElement("span");var button=document.createElement("div");button.className="button";for(var i=0;i<li.length;i++){var a=document.createElement("a");a.innerHTML=i+1;a.onclick=function(){clearTimeout(timer);clearTimeout(timer2);clearTimeout(timer3);j=parseInt(this.innerHTML)-1;scton=0;t=63;opac=0;fadeon();};a.className="b1";a.onmouseover=function(){this.className="b2"};a.onmouseout=function(){this.className="b1";sc(j)};button.appendChild(a);} //控制圖層透明度 function alpha(obj,n){if(document.all){obj.style.filter="alpha(opacity="+n+")";}else{obj.style.opacity=(n/100);}} //控制焦點按鈕 function sc(n){for(var i=0;i<li.length;i++){button.childNodes[i].className="b1"};button.childNodes[n].className="b2";} title.className="num_list";title.appendChild(span);alpha(title,opac1);id.className="d1";div.className="d2";id.appendChild(div);id.appendChild(title);id.appendChild(button); //漸顯 var fadeon=function(){opac+=5;div.innerHTML=li[j].innerHTML;span.innerHTML=getTag("img",li[j])[0].alt;alpha(div,opac);if(scton==0){sc(j);num=-2;scrolltxt();scton=1};if(opac<100){timer=setTimeout(fadeon,interv2)}else{timer2=setTimeout(fadeout,interv);};} //漸隱 var fadeout=function(){opac-=5;div.innerHTML=li[j].innerHTML;alpha(div,opac);if(scton==0){num=2;scrolltxt();scton=1};if(opac>0){timer=setTimeout(fadeout,interv2)}else{if(j<li.length-1){j++}else{j=0};fadeon()};} //滾動文字 var scrolltxt=function(){t+=num;span.style.marginTop=t+"px";if(num<0 && t>3){timer3=setTimeout(scrolltxt,interv2)}else if(num>0 && t<62){timer3=setTimeout(scrolltxt,interv2)}else{scton=0}}; fadeon(); } //初始化 window.onload=s; </script> 你沒有把全部的代碼貼出來,我也不知道怎麼說。 你看我的代碼,再對照你的代碼,你就會看出來的

採納哦

⑥ flash圖片輪播,如何製作flash圖片輪播

  1. 首先創建一個flash空白文檔,調整舞台大小。

⑦ 做圖片輪播功能(要一直從右往左播,不斷的循環),js怎麼寫看一下我的代碼給我講幾句重要的代碼

你把整個ul想成是一張圖片,你要做的就是把ul左右移動,然後在ul外面可以套一個div,樣式為{overflow:hidden},關於復位,你可以用%運算,當移動到最後一個li的時候,跳到第一個li去。

⑧ 簡單的HTML+js圖片輪播

h5代碼:

<div id="wrap">
<ul id="list">
<li>10</li>
<li>9</li>
<li>8</li>
<li>7</li>
<li>6</li>

<li>5</li>
<li>4</li>
<li>3</li>
<li>2</li>
<li>1</li>
</ul>
</div>

css代碼:

<style type="text/css">
@-webkit-keyframes move{
0%{left:-500px;}
100%{left:0;}
}
#wrap{width:600px;height:130px;border:1px solid #000;position:relative;margin:100px auto;
overflow: hidden;}

#list{position:absolute;left:0;top:0;padding:0;margin:0;
-webkit-animation:5s move infinite linear;width:200%;}

#list li{list-style:none;width:120px;height:130px;border:1px solid red;background: pink;
color:#fff;text-align: center;float:left;font:normal 50px/2.5em '微軟雅黑';}

#wrap:hover #list{-webkit-animation-play-state:paused;}
</style>

(8)做一個圖片輪播腳本擴展閱讀:

輪播圖就是一種網站在介紹自己的主打產品或重要信息的傳播方式。說的簡單點就是將承載著重要信息的幾張圖片,在網頁的某一部位進行輪流的呈現,從而做到讓瀏覽者很快的了解到網站想要表達的主要信息。以及各種新聞網站的頭版頭條都是用這種方式呈現的重要信息。

輪播圖的實現方式:例如:有5張輪播的圖片,每張圖片的寬度為1024px、高度為512px.那麼輪播的窗口大小就應該為一張圖片的尺寸,即為:1024×512。之後將這5張圖片0px水平相接組成一張寬度為:5120px,高度依然為:512px。最後將這張合成後的大圖每次向左移動1024px即可實現輪播圖。