當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

原生JS和jQuery实现banner图滚动那些事

發布時間：2025/6/17 javascript 28 豆豆

生活随笔收集整理的這篇文章主要介紹了原生JS和jQuery实现banner图滚动那些事小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

? 前 ?言

阿q

　作為一個準前端學員，banner圖可是很重要的呢。本人，小白一只，給大家分享幾個剛剛學習的基礎banner圖事件。~~~

1. 小廣告圖滾動播放

1.1HTML代碼

首先，創建基本結構

1.2設置基本樣式

來一段css代碼，做出來基本樣式

*{margin: 0px;padding: 0px;}#outside{width: 1200px;overflow: hidden;margin: 0 auto;height: 300px;position: relative;}#outside #inside{width: 3100px;position: absolute;}#outside #inside div{width: 300px;height: 300px;margin: 0px 5px;background-color: red;float: left;}

1.3實現滾動

基本樣式已經做好，接下來就是讓它滾動了~~~很簡單的一段JS代碼，我是用定時器做的

吶~，這就是效果圖了，放上圖片食用更佳。以前用純css做過一遍，學過JS之后發現還是JS更簡單

2.??自定義插件實現banner圖滾動

接下來就是大圖了，這是自己定義的jQuery插件

2.1HTML文件代碼

這個插件的主要代碼寫在自定義JS文件中，HTML中代碼就很少了~

<head><meta charset="UTF-8"><title>自定義插件實現banner滾動</title><script src="js/jquery-3.1.1.js" type="text/javascript"></script><script src="js/jQuery-scrollBanner.js" type="text/javascript"></script></head><body><div id="banner"></div></body><script type="text/javascript">$("#banner").scrollBanner({images:[{src:"img/banner1.jpg",title:"banner1",href:"http://www.baidu.com"},{src:"img/banner2.jpg",title:"banner2",href:"http://www.sina.com"},{src:"img/banner3.jpg",title:"banner3",href:"http://www.qq.com"},{src:"img/banner4.jpg",title:"banner4",href:"http://www.jredu100.com"}],scrollTime:2000,bannerHeight:"500px",iconColor:"#cccccc",iconHoverColor:"#82c900",iconPosition:"center"});</script>

沒錯，只定義一個div，就是這么任性

2.2插件屬性

images : 接收數組類型，數組的每個值應為對象。對象具有屬性：src->圖片的路徑
?????????? title->圖片指上后的文字??? href->點擊圖片跳轉的頁面
?scrollTime : 每張圖片停留時間，單位毫秒。2000
?bannerHeight : banner圖的高度。500px
?
?iconColor : 提示圖標的顏色。默認white
?iconHoverColor : 提示圖標指上之后的顏色。默認orange
?iconPosition : 提示圖標的位置，可選值left/center/right。默認center

2.2插件代碼

啦啦啦~~接下來就是插件的代碼了，注釋寫在代碼里了

怎么樣，是不是很方便呢，接下來只要插入想要的圖片就可以了

3.??手風琴banner圖

如果上一個很普通，食用起來沒什么味道的話，接下來給客官分享一道比較成熟的菜。
這個樣式我很喜歡玩的游戲的官網的一個版塊，果然游戲使人進步呢~~
這也是用jQuery實現的，jQuery果然是個神奇的東西~~

閑話不多說，上菜~~~

3.1DOM組建

方便起見，我們將HTML代碼和css代碼寫到一塊，這個雖然好看，但是不如上邊那個使用方便

轉載于:https://www.cnblogs.com/sin0/p/7537019.html

總結

以上是生活随笔為你收集整理的原生JS和jQuery实现banner图滚动那些事的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。