iT邦幫忙

0

GridView實現自動輪播(電子看板)

  • 分享至 

  • xImage

利用Web Form進行開發
網頁是ASPX,網頁表格是GridView,已根據資料5筆進行分頁
如果不改寫程式是否可以加上JavaScript來讓它自動輪播呢?
https://ithelp.ithome.com.tw/upload/images/20220324/201475238yD22S5PSJ.jpg
想詢問否有解決方法?
以下附上HTML
已用GridView內建功能將資料進行分頁
<PageSize="5" OnPageIndexChanging="GridView1_PageIndexChanging">
不過需要按下方頁碼按鈕才可顯示下一頁表格
希望能設定秒數自動播放分頁表格
https://ithelp.ithome.com.tw/upload/images/20220325/20147523D1x1TyqoNi.jpg

看更多先前的討論...收起先前的討論...
天黑 iT邦研究生 5 級 ‧ 2022-03-24 17:42:59 檢舉
請問你想達到的輪播效果是一直重整頁面來刷新嗎?
amanda212 iT邦新手 5 級 ‧ 2022-03-24 19:56:39 檢舉
已用GridView內建功能將資料進行分頁
不過需要按下方頁碼按鈕才可顯示下一頁表格
希望能設定秒數自動播放分頁表格
天黑 iT邦研究生 5 級 ‧ 2022-03-25 09:25:51 檢舉
這個 <%=%> 設定的變數,頁面沒有重整是不會改變的,所以我才會問上面的問題,輪播理論上應該是div切換之類頁面不刷新吧? 還是我理解錯誤你的程式架構?
Homura iT邦高手 1 級 ‧ 2022-03-25 13:53:06 檢舉
大概不懂什麼是postback...@@
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

0
天黑
iT邦研究生 5 級 ‧ 2022-03-25 10:22:59

由於沒有提供相關頁面html我簡單寫一個範例,用純粹前端js處理,機制是一直循環,因為我分不出來你的頁面執行機制,如果是每次重整頁面,使用setTimeout就可以。

html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.1/dist/css/bootstrap.min.css" integrity="sha384-zCbKRCUGaJDkqS1kPbPd7TveP5iyJE0EjAuZQTgFLD2ylzuqKfdKlfG/eSrtxUkn" crossorigin="anonymous">

<nav aria-label="Page navigation example">
  <ul class="pagination">
    <li class="page-item active"><a class="page-link" href="#">1</a></li>
    <li class="page-item"><a class="page-link" href="#">2</a></li>
    <li class="page-item"><a class="page-link" href="#">3</a></li>
    <li class="page-item"><a class="page-link" href="#">4</a></li>
    <li class="page-item"><a class="page-link" href="#">5</a></li>
  </ul>
</nav>

javascript

$(function() {
       
    function initCurrent(){
    	const items = [...document.querySelectorAll('body > nav > ul > li')];
    	const selectItem = document.querySelector('body > nav > ul > li.page-item.active');
    	const idx = items.indexOf(selectItem);    
      callNext(items,idx);
    }
    
    function callNext(items,idx){
    	const next = items.length-1 === idx ? 0 : idx+1;
			$(items[idx]).removeClass('active');
      $(items[next]).addClass('active');   
    }
        
    function initCycle(){
    	const clock =  setInterval(initCurrent , 1000);
      //clearInterval(clock); //stop setInterval
    }
      
    initCycle();   
});
看更多先前的回應...收起先前的回應...
Homura iT邦高手 1 級 ‧ 2022-03-25 17:15:59 檢舉

看他程式碼還只會拉webfrom control....

天黑 iT邦研究生 5 級 ‧ 2022-03-28 14:56:10 檢舉

盡力了 哈哈 javascript實現阿,我給的是js做法,webform如果一直postback感覺很可怕...

Homura iT邦高手 1 級 ‧ 2022-03-28 16:58:38 檢舉

可怕的view state!XD

amanda212 iT邦新手 5 級 ‧ 2022-03-29 09:51:27 檢舉

因為gridview實現分頁就是用postback

天黑 iT邦研究生 5 級 ‧ 2022-03-29 10:00:16 檢舉

作法一樣,只要你會抓pagination部分的selector部分,還有click事件處理,應該就能實現了,因為你提供的不是純html,我沒辦法運行..

amanda212 iT邦新手 5 級 ‧ 2022-03-29 10:15:27 檢舉

gridview實現分頁是以其內建功能將資料進行分頁
所以並沒有pagination部分的selector部分在前端QQ

天黑 iT邦研究生 5 級 ‧ 2022-03-29 17:13:16 檢舉

痾....webform最後還是會轉換成html喔,不然瀏覽器開不了,你可以開前端偵錯看看就知道囉..

我要發表回答

立即登入回答