<div class="scroll">
 <ul class="list">
  <li><a href="#" target="_blank">公告一 或 中獎(jiǎng)?wù)?甲</a></li>
  <li><a href="#" target="_blank">公告二 或 中獎(jiǎng)?wù)?乙</a></li>
  <li><a href="#" target="_blank">公告三 或 中獎(jiǎng)?wù)?丙</a></li>
 </ul>
</div>

解析：適用于只有一行顯示的公告類，以及展示中獎(jiǎng)名單/抽獎(jiǎng)結(jié)果等大框類，改變list高度即可

方案一：

function autoScroll(obj) {
 $(obj).find(".list").animate({
  marginTop: "-25px"
 }, 1000, function () {
  $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
 })
}
var timer = setInterval('autoScroll(".scroll")', 1000);
$(function () {
 $(".scroll").hover(function () {
  clearInterval(timer);
 }, function () {
  timer = setInterval('autoScroll(".scroll")', 1000);
 })
})

方案二：

function autoScroll(obj) {
 //var _t;
 function scroll() {
  $(obj).find(".list").animate({
   marginTop: "-25px"
  }, 500, function () {
   $(this).css({marginTop: "0px"}).find("li:first").appendTo(this);
  })
 }
 var timer = setInterval(scroll, 2800);
 $(obj).hover(
  function () {
   clearInterval(_t);
  },
  function () {
   timer = setInterval(scroll, 2800);
  }
 )
}
$(function () {
 autoScroll(".scroll");
})

解析：兩種方案實(shí)現(xiàn)的功能是一樣的，都是通過改變margin-top的值，把第一個(gè)再添加到最后一個(gè)來實(shí)現(xiàn)的。第一種直接寫出運(yùn)行步驟，定時(shí)器可以定義在加載函數(shù)的外面，也可寫在里面，但是以下的內(nèi)容必須寫在加載函數(shù)的里面，否則不能正常執(zhí)行。

如果整體又定義為一個(gè)函數(shù)，則下面要在加載函數(shù)里調(diào)用一次函數(shù)，即可執(zhí)行。

在hover事件中的回調(diào)函數(shù)，必須寫timer=setInterval(),指定時(shí)器重新賦值給timer,直接寫setInterval不起作用，如果寫var timer=setInterval();則又重新定義了一個(gè)timer，同樣不起作用。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家有所幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章:

相關(guān)文章

JS 實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)換36進(jìn)制的示例代碼
這篇文章主要介紹了JS實(shí)現(xiàn)10進(jìn)制轉(zhuǎn)換36進(jìn)制，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-04-04
JavaScript針對(duì)網(wǎng)頁節(jié)點(diǎn)的增刪改查用法實(shí)例
這篇文章主要介紹了JavaScript針對(duì)網(wǎng)頁節(jié)點(diǎn)的增刪改查用法,實(shí)例分析了JavaScript操作網(wǎng)頁節(jié)點(diǎn)的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下
2015-02-02
js 右下角彈窗效果代碼(IE only)
js 右下角彈窗效果代碼,雖然IE only，但這個(gè)代碼的邏輯可以參考下。了解下IE與firefox的區(qū)別，自己寫個(gè)兼容的版本吧。
2010-06-06
js中判斷變量類型函數(shù)typeof的用法總結(jié)
下面小編就為大家?guī)硪黄猨s中判斷變量類型函數(shù)typeof的用法總結(jié)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2016-08-08
利用js讀取動(dòng)態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù)
這篇文章主要介紹了利用js讀取動(dòng)態(tài)網(wǎng)站從服務(wù)器端返回的數(shù)據(jù),需要的朋友可以參考下
2014-02-02
uniapp組件uni-popup彈出層的使用
彈出層組件用于彈出一個(gè)覆蓋到頁面上的內(nèi)容，本文主要介紹了uniapp組件uni-popup彈出層的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2022-03-03
JavaScript一文帶你玩轉(zhuǎn)web表單網(wǎng)頁
表單通常用來收集網(wǎng)頁訪問者信息，常見的表單比如搜索引擎的搜索框、各網(wǎng)頁應(yīng)用的注冊(cè)或者登陸界面等，通讀本篇對(duì)大家的學(xué)習(xí)或工作具有一定的價(jià)值，需要的朋友可以參考下
2021-10-10
基于require.js的使用(實(shí)例講解)
下面小編就為大家?guī)硪黄趓equire.js的使用(實(shí)例講解)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
2017-09-09
JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)簡(jiǎn)單的拖動(dòng)效果，具有一定的參考價(jià)值，感興趣的朋友可以參考一下
2016-07-07
弱類型語言javascript中 a,b 的運(yùn)算實(shí)例小結(jié)
這篇文章主要介紹了弱類型語言javascript中 a,b 的運(yùn)算,結(jié)合實(shí)例形式總結(jié)分析了js閉包函數(shù)中布爾值與字符串的a，b運(yùn)算相關(guān)操作技巧,需要的朋友可以參考下
2019-08-08