多语言展示
当前在线:1118今日阅读:26今日分享:39

鼠标可以拖动的banner图片片切换

鼠标可以拖动的banner图片片切换
工具/原料

adobe dreamweaver

方法/步骤
1

准备好需要用到的图标。

2

新建html文档。

3

书写hmtl代码。

 
 Boompx Hero Slider 01
 Boompx Hero Slider 02
 Boompx Hero Slider 03
 Boompx Hero Slider 04
 

4

书写css代码。body { font-family: 'Roboto', sans-serif; padding-bottom: 60px; }.font-heading { font-family: 'Playfair Display', serif; }.fork-btn { position: fixed; top: 0; right: 0; border: 0; }.m-t30 { margin-top: 30px; }.m-0 { margin: 0; }.bg-transparent { background-color: transparent; }.doc-container {  font-family: $font-family-roboto; .has-modal { .modal-dialog { &.modal-lg { width: 1170px; margin: 50px auto;}}}.table { background-color: #fff; }.color-demo { width: 16px; min-width: 16px; height: 16px; border-radius: 100%; display: inline-block; position: relative; }}.color-swatch { height: 150px; }pre.prettyprint.prettyprint-std { padding: 15px; border: 1px solid #eee; font-family: consolas; font-size: 14px; background-color: #f9f9f9; border-radius: 0; }pre.prettyprint.prettyprint-std span.com { color: #919d9f; }pre.prettyprint.prettyprint-std span.pln { color: #395063; }pre.prettyprint.prettyprint-std span.tag { color: #6a93d0; }pre.prettyprint.prettyprint-std span.atv { color: #05ad97; }pre.prettyprint.prettyprint-std span.pun, pre.prettyprint.prettyprint-std span.opn, pre.prettyprint.prettyprint-std span.clo { color: #B9947B; }pre.prettyprint.prettyprint-std span.atn { color: #a95ebb; }

5

书写并添加js代码。

6

代码整体结构。

7

查看效果。