jQuery基于swiper.js制作响应式的主机商城软件产品项目列表布局,通过左右按钮控制产品列表滚动。默认支持自动滚动效果代码。

 

 使用方法:

1、head引入css文件

1
2
3
4
5
<!--swiper框架样式-->
<link rel="stylesheet" type="text/css" href="statics/css/swiper-3.4.2.min.css" />
<!--主要样式-->
<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

1
2
<!--jquery框架-->
<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
<div class="pc-bg-container">
    <div class="home-market-section">
        <li class="section-title">
            <a href="#">主机商城</a>
        </li>
        <div class="section-inner">
            <div class="swiper-container swiper-container-horizontal">
                <div class="swiper-wrapper">
                    <!--下文中的data-swiper-parallax属性是swiper的视差效果,如果觉得污染代码,可以删除-->
                    <div class="swiper-slide">
                        <a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20180921020340_20340.png" width="75">
                                <h3>企业云盘</h3>
                                <p>企业文件存储管理与协作云平台</p>
                                <div class="time"><span>¥1155</span>/年</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20181207091159_89245.png" width="75">
                                <h3>泰克双创实践云平台</h3>
                                <p>基于云主机建设的多功能实训平台</p>
                                <div class="time"><span>¥1550000</span>/年</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20180921020451_45996.png" width="75">
                                <h3>视频云服务套餐</h3>
                                <p>快速开启直播,引燃商业价值</p>
                                <div class="time"><span>¥3600</span>/年</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20180921020526_82811.png" width="75">
                                <h3>迅响响应式定制建站</h3>
                                <p>开年大吉,建站立减2000</p>
                                <div class="time"><span>¥800</span>/年</div>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20180921020703_68805.png" width="75">
                                <h3>智迅云客服</h3>
                                <p>新一代的云客服解决方案</p>
                                <div class="time"><span>¥180</span>/月</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20190117112043_63875.png" width="75">
                                <h3>云匣子</h3>
                                <p>多终端运维的云堡垒机</p>
                                <div class="time"><span>¥360</span>/月</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20190117112001_88334.png" width="75">
                                <h3>交管局满分学习系统</h3>
                                <p>文件上传、在线转码、存储管理</p>
                                <div class="time"><span>¥200000</span>/年</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20190117111422_72284.png" width="75">
                                <h3>金华威云视频会议</h3>
                                <p>新一代云视频会议解决方案</p>
                                <div class="time"><span>¥800</span>/年</div>
                            </div>
                        </a>
                    </div>
                    <div class="swiper-slide">
                        <a href="#" data-swiper-parallax="-100" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20190117111315_56863.png" width="75">
                                <h3>虚拟化下一代防火墙</h3>
                                <p>All in One设计的虚拟防火墙</p>
                                <div class="time"><span>¥1600</span>/年</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-400" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20190117111227_50389.png" width="75">
                                <h3>云图管家</h3>
                                <p>简单高效地保障企业文件资料安全</p>
                                <div class="time"><span>¥5000</span>/次</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-700" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20190223102649_33013.png" width="75">
                                <h3>永洪敏捷BI</h3>
                                <p>云上的数据展示分析工具</p>
                                <div class="time"><span>¥200</span>/月</div>
                            </div>
                        </a>
                        <a href="#" data-swiper-parallax="-1000" data-swiper-parallax-scale="0.5" data-swiper-parallax-opacity="0.5">
                            <div class="inner-content">
                                <img src="statics/images/20190117110258_76566.png" width="75">
                                <h3>网银混合云咨询实施服务</h3>
                                <p>提供咨询、规划、设计和实施服务</p>
                                <div class="time"><span>¥1050000</span>/次</div>
                            </div>
                        </a>
                    </div>
                </div>
                <div class="swiper-pagination"></div>
            </div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-button-next"></div>
        </div>
    </div>
</div>
<script src="statics/js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
    new Swiper(".pc-bg-container .home-market-section .swiper-container", {
        loop: !0,
        speed: 500,
        autoplay: {
            delay: 3e3,
            disableOnInteraction: false
        },
        slidesOffsetBefore: 0,
        parallax: !0,
        pagination: {
            el: ".pc-bg-container .swiper-pagination",
            clickable: true
        },
        navigation: {
            nextEl: ".swiper-button-next",
            prevEl: ".swiper-button-prev"
        }
    })
});
</script>

发表评论

后才能评论