<style>
.scrollable {
position: relative;
width: 820px;
}
.scrollable .prev, .scrollable .next {
position: absolute;
top: 50px;
color: #666;
cursor: pointer;
}
.scrollable .prev { left: 10px; }
.scrollable .next { right: 10px; }
.scrollable .disable { color: #ddd; cursor: default; }
.scrollable .ks-switchable-nav {
position: absolute;
right: 30px;
top: -10px;
}
.scrollable .ks-switchable-nav li {
float: left;
padding: 5px;
font-size: 18px;
cursor: pointer;
}
.scrollable .ks-switchable-nav li.ks-active {
color: #C8282B;
}
.scroller {
position: relative;
width: 680px;
height: 120px;
border: 1px solid #ccc;
background-color: #F9F9F9;
margin: auto;
overflow: hidden;
}
.scroller .ks-switchable-content img {
float: left;
width: 100px;
height: 75px;
padding: 2px;
margin: 20px 15px;
background-color: #fff;
border: 1px solid #ccc;
display: inline !important;
}
</style>
<body>
<div id="demo4" class="J_TWidget scrollable" data-widget-type="Carousel" data-widget-config="{
'effect': 'scrollx',
'easing': 'easeOutb',
'steps': 5,
'viewSize': [680],
'circular': false,
'prevBtnCls': 'prev',
'nextBtnCls': 'next',
'disableBtnCls': 'disable'
}">
<span id="scroller-prev" class="prev disable"><<</span>
<span id="scroller-next" class="next">>></span>
<div style="position: relative;" class="scroller">
<div style="position: absolute; width: 2040px;" class="ks-switchable-content">
<!-- 1-5 -->
<img style="display: block; float: left;" src="蓝地/image/jt.png" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<!-- 5-10 -->
<img style="display: block; float: left;" src="蓝地/image/jt.png" />
<img style="display: block; float: left;" src="蓝地/image/jt.png" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<!-- 10-15 -->
<img style="display: block; float: left;" src="蓝地/image/jt.png" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
<img style="display: block; float: left;" src="蓝地/image/jt.png" />
<img style="display: block; float: left;" src="http://XXX.jpg" />
</div>
<ul class="ks-switchable-nav">
<li class="ks-active">.</li>
<li>.</li>
<li>.</li>
</ul>
</div>
</div>
淘宝的代码复制在html中是不是显示不出效果,为什么在html中没有滚动效果,还是说放在淘宝中就可以了?
答案:2 悬赏:10 手机版
解决时间 2021-03-18 14:11
- 提问者网友:嗝是迷路的屁
- 2021-03-18 04:03
最佳答案
- 五星知识达人网友:蓝房子
- 2021-03-18 04:20
应该是没有JS的支持吧!
全部回答
- 1楼网友:毛毛
- 2021-03-18 04:35
请设置direction的参数来设定活动字幕的滚动方向
down:向下滚动;
left:向左滚动;
right:向右滚动;
up:向下滚动。
代码如下:
我要举报
如以上问答信息为低俗、色情、不良、暴力、侵权、涉及违法等信息,可以点下面链接进行举报!
大家都在看
推荐资讯