最簡單的JavaScript圖片輪播程式碼(兩種方法)_javascript技巧-js教程-PHP中文網

首頁

web前端

js教程

最簡單的JavaScript圖片輪播程式碼(兩種方法)_javascript技巧

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:24 PM

透過改變每個圖片的opacity屬性：

素材圖片：

代碼一：

<!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="UTF-">
  <title>最简单的轮播广告</title>
  <style>
   body, div, ul, li {
    margin: ;
    padding: ;
   }
   ul {
    list-style-type: none;
   }
   body {
    background: #;
    text-align: center;
    font: px/px Arial;
   }
   #box {
    position: relative;
    width: px;
    height: px;
    background: #fff;
    border-radius: px;
    border: px solid #fff;
    margin: px auto;
   }
   #box .list {
    position: relative;
    width: px;
    height: px;
    overflow: hidden;
    border: px solid #ccc;
   }
   #box .list li {
    position: absolute;
    top: ;
    left: ;
    width: px;
    height: px;
    opacity: ;
    transition: opacity .s linear
   }
   #box .list li.current {
    opacity: ;
   }
   #box .count {
    position: absolute;
    right: ;
    bottom: px;
   }
   #box .count li {
    color: #fff;
    float: left;
    width: px;
    height: px;
    cursor: pointer;
    margin-right: px;
    overflow: hidden;
    background: #F;
    opacity: .;
    border-radius: px;
   }
   #box .count li.current {
    color: #fff;
    opacity: .;
    font-weight: ;
    background: #f
   }
  </style>
 </head>
 <body>
 <div id="box">
  <ul class="list">
   <li class="current" style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
   <li style="opacity: ;"><img src="img/images/.jpg" width="" height=""></li>
  </ul>
  <ul class="count">
   <li class="current"></li>
   <li class=""></li>
   <li class=""></li>
   <li class=""></li>
   <li class=""></li>
  </ul>
 </div>
 <script>
  var box=document.getElementById('box');
  var uls=document.getElementsByTagName('ul');
  var imgs=uls[].getElementsByTagName('li');
  var btn=uls[].getElementsByTagName('li');
  var i=index=; //中间量，统一声明；
  var play=null;
  console.log(box,uls,imgs,btn);//获取正确
  //图片切换, 淡入淡出效果我是用（transition: opacity .s linear）做的,不纠结、简单 在css里面
  function show(a){    //方法定义的是当传入一个下标时，按钮和图片做出对的反应
   for(i=;i<btn.length;i++ ){
    btn[i].className='';  //很容易看懂吧？每个按钮都先设置成看不见，然后把当前按钮设置成可见。
    btn[a].className='current';
   }
   for(i=;i<imgs.length;i++){ //把图片的效果设置和按钮相同
    imgs[i].style.opacity=;
    imgs[a].style.opacity=;
   }
  }
  //切换按钮功能，响应对应图片
  for(i=;i<btn.length;i++){
   btn[i].index=i; //不知道你有没有发现，循环里的方法去调用循环里的变量体i，会出现调到的不是i的变动值的问题。所以我先在循环外保存住
   btn[i].onmouseover=function(){
    show(this.index);
    clearInterval(play); //这就是最后那句话追加的功能
   }
  }
  //自动轮播方法
 function autoPlay(){
    play=setInterval(function(){ //这个paly是为了保存定时器的，变量必须在全局声明 不然其他方法调不到 或者你可以调用auto.play 也许可以但是没时间试了
    index++;
    index>=imgs.length&&(index=);//可能有优先级问题，所以用了括号，没时间测试了。
    show(index);
   },)
  }
  autoPlay();//马上调用，我试过用window.onload调用这个方法，但是调用之后影响到了其他方法，使用autoPlay所以只能这样调用了
  //div的鼠标移入移出事件
  box.onmouseover=function(){
   clearInterval(play);
  };
  box.onmouseout=function(){
   autoPlay();
  };
  //按钮下标也要加上相同的鼠标事件，不然图片停止了，定时器没停，会突然闪到很大的数字上。 貌似我可以直接追加到之前定义事件中。
 </script>
 </body>
 </html>

登入後複製

代碼二：

首先第一步，下載好一個jquery庫的插件，jquery.js 網路上很多隨處可以下載．下載的插件要放在目錄下．然後在html文件中連結好

第二步，佈置好一個DIV,如：

<div id="scroll">
 <p class="subl">上一张<p/>
 <p class="subr">下一张<p/>
 <ul>
 <li style="background:red;display:block;"></li>
　//上面的ｌｉ要设定为显示，因为是第一张图片．
 <li style="background:green;"></li>
 <li style="background:gray;"></li>
 <li style="background:orange;"></li>
 </ul>
 </div>

登入後複製

由於方便各位網友下載能夠清晰明了，我就沒有用圖片路徑了，因為到你們電腦上就看不到了，這裡用背景顏色．

第三步，就到了寫CSS的時候了．下面的CSS懂基礎的人都看得懂．

#scroll{width:100%; height:180px; background-color:white; position:relative;border-bottom:1px solid gray;}//这里是给整个大的ＤＩＶ设定属性．
#scroll ul{height:180px; list-style:none;}//ＤＩＶ下的ＵＬ属性．
#scroll ul li{width:100%; height:180px;margin:0px; padding:0px; display:none;}//ＤＩＶ下的ＵＬ下的ＬＩ属性．注意：display:none;因为要将所有的ｌｉ隐藏了先．当点击的时候在显示出来．
 .subl{position:absolute; bottom:20px; left:40%; width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold; cursor:pointer;}//上一张按钮的属性．注意一个绝对定位．
 .subr{
position:absolute;
bottom:20px; right:40%;
width:80px;height:20px; line-height:20px; text-align:center;font-size:16px;font-weight:bold;cursor:pointer; 
}//下一张按钮的属性．注意一个绝对定位．
.subr:hover{ background:yellow;border-radius:10px;}
.subl:hover{ background:yellow;border-radius:10px;}
//以上两个hover是鼠标经过的效果．

登入後複製

第四步，就是ｊｑｕｅｒｙ代碼了！也很簡單．先將程式碼看一遍，你就會用了！

<script type="text/javascript">
/*轮播*/
 $(function(){
 var i=0;
 var len=$("#scroll ul li").length-1;
 $(".subl").click(function(){
 if(i==len){
i=-1;
}
i++;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
//到这里分开！上面的是上一张点击的效果代码，下面的是下一张点击的效果代码．
 $(".subr").click(function(){//获取类名的点击事件．
 if(i==0){
i=len+1;
}
i--;
$("#scroll ul li").eq(i).fadeIn().siblings().hide();
 });
 });
 /*轮播*/
</script>

登入後複製

四步驟輕鬆搞定一個簡單的輪！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7467

CakePHP 教程

1376

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何創建和發布自己的JavaScript庫？ Mar 18, 2025 pm 03:12 PM

文章討論了創建，發布和維護JavaScript庫，專注於計劃，開發，測試，文檔和促銷策略。

如何在瀏覽器中優化JavaScript代碼以進行性能？ Mar 18, 2025 pm 03:14 PM

本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。

前端熱敏紙小票打印遇到亂碼問題怎麼辦？ Apr 04, 2025 pm 02:42 PM

前端熱敏紙小票打印的常見問題與解決方案在前端開發中，小票打印是一個常見的需求。然而，很多開發者在實...

如何使用瀏覽器開發人員工具有效調試JavaScript代碼？ Mar 18, 2025 pm 03:16 PM

本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。

如何使用源地圖調試縮小JavaScript代碼？ Mar 18, 2025 pm 03:17 PM

本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。

如何有效地使用Java的收藏框架？ Mar 13, 2025 pm 12:28 PM

本文探討了Java收藏框架的有效使用。它強調根據數據結構，性能需求和線程安全選擇適當的收集（列表，設置，地圖，隊列）。通過高效優化收集用法

初學者的打字稿，第2部分：基本數據類型 Mar 19, 2025 am 09:10 AM

掌握了入門級TypeScript教程後，您應該能夠在支持TypeScript的IDE中編寫自己的代碼，並將其編譯成JavaScript。本教程將深入探討TypeScript中各種數據類型。 JavaScript擁有七種數據類型：Null、Undefined、Boolean、Number、String、Symbol（ES6引入）和Object。 TypeScript在此基礎上定義了更多類型，本教程將詳細介紹所有這些類型。 Null數據類型與JavaScript一樣，TypeScript中的null

開始使用Chart.js：PIE，DONUT和BUBBLE圖表 Mar 15, 2025 am 09:19 AM

本教程將介紹如何使用 Chart.js 創建餅圖、環形圖和氣泡圖。此前，我們已學習了 Chart.js 的四種圖表類型：折線圖和條形圖（教程二），以及雷達圖和極地區域圖（教程三）。創建餅圖和環形圖餅圖和環形圖非常適合展示某個整體被劃分為不同部分的比例。例如，可以使用餅圖展示野生動物園中雄獅、雌獅和幼獅的百分比，或不同候選人在選舉中獲得的投票百分比。餅圖僅適用於比較單個參數或數據集。需要注意的是，餅圖無法繪製值為零的實體，因為餅圖中扇形的角度取決於數據點的數值大小。這意味著任何占比為零的實體

See all articles

最簡單的JavaScript圖片輪播程式碼(兩種方法)_javascript技巧

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題