Drupal 7 开发内部培训资料, 分头诗人

有模块是否实现这个功能?点击左右按钮可以进行滑动,滑动为一个步长。

赞成!
0
否决!

  

点击左右按钮可以进行滑动,滑动为一个步长

3 个回答

赞成!
0
否决!

不知道你说的是不是类似这个效果“Drupal 7 案例”,这个模块我没找到,我是直接用jQuery.carouFredSel 下载并放在当前 drupal theme下面的 yourtheme/js 文件夹。

然后在theme的info文件加入

1
scripts[] = js/jquery.carouFredSel-6.0.4.js

 

再复制page.tpl.php 一份,改名为 page--front.tpl.php 作为首页模版,编辑首页模版,加入下面代码:

 

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
<div id="homepage"> 
<script type="text/javascript" language="javascript">
   jQuery(function() {
    // Scrolled by user interaction
    jQuery('#foo2').carouFredSel({
     auto: false,
     prev: '#prev2',
     next: '#next2',
     width: 1005,
     height: 215,
     mousewheel: true,
     scroll: 1,
     swipe: {
      onMouse: true,
      onTouch: true
     }
    });
   });
  </script>
<div class="list_carousel">
    <ul id="foo2">
      <li>
  <div class="hb">
   <div class="hb-img"><a href="ecommerce-technology" class="hb-img-01">e-Commerce Technology</a></div>
    <h2><a href="ecommerce-technology">e-Commerce Technology</a></h2>
  </div></li>
      <li>
  <div class="hb">
   <div class="hb-img"><a href="ecommerce-operation" class="hb-img-02">e-Commerce Operation Services</a></div>
    <h2><a href="ecommerce-operation">e-Commerce Operation Services</a></h2>
  </div></li>
      <li>
  <div class="hb">
   <div class="hb-img">
<a href="e-commerce-professional-services" class="hb-img-03">e-Commerce Professional Services</a></div>
    <h2><a href="e-commerce-professional-services">e-Commerce Professional Services</a></h2>
  </div></li>
      <li>
  <div class="hb">
   <div class="hb-img"><a href="digital-markeing" class="hb-img-04">Digital Marketing</a></div>
    <h2><a href="digital-markeing">Digital Marketing</a></h2>
  </div></li>
    </ul>
    <div class="clearfix"></div>
    <a id="prev2" class="prev" href="#">&lt;</a>
    <a id="next2" class="next" href="#">&gt;</a>
  </div>
</div>

 

然后在pages.css里面加入下面 css

 

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
.hb{ padding:10px 0 0 0; float:left;}
.hb h2{font-size:16px; text-align:center;}
.hb h2 a{ color:#595757;}
.hb .hb-img{padding:3px;background: white;width:320px; height:157px;
border:1px #ccc solid;-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 2px 2px 3px rgba(0,0,0,.3);
-moz-box-shadow: 2px 2px 3px rgba(0,0,0,.3);
-webkit-box-shadow: 2px 2px 3px rgba(0,0,0,.3);}
.hb a.hb-img-01{ text-indent:-9999px; display:block;
background: url('../images/h01.png') no-repeat; width:320px; height:157px;}
.hb a.hb-img-02{ text-indent:-9999px; display:block;
background: url('../images/h02.png') no-repeat; width:320px; height:157px;}
.hb a.hb-img-03{ text-indent:-9999px; display:block;
background: url('../images/h03.png') no-repeat; width:320px; height:157px;}
.hb a.hb-img-04{ text-indent:-9999px; display:block;
background: url('../images/h04.png') no-repeat; width:320px; height:157px;}
   .list_carousel {
    margin: 0;
    width: 1000px; position:relative;
   }
   .list_carousel ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
   }
   .list_carousel li {
    font-size: 40px;
    color: #999;
    text-align: center;width:330px; height:210px;
    padding: 0 0 0 0;
    margin: 0 5px 0 0;
    display: block;
    float: left;
   }
.list_carousel #prev2{ position:absolute;left:-40px; z-index:9999;top: 80px;
display:block; text-indent:-9999px;
background: url('../images/arrow-left.png') no-repeat; width:37px; height:43px;}
.list_carousel #next2{ position:absolute;right:-40px;top: 80px; display:block;
text-indent:-9999px;
background: url('../images/arrow-right.png') no-repeat; width:37px; height:43px;}

 

清空缓存测试下。

 

赞成!
0
否决!

jcarousel

赞成!
0
否决!

2个都很好,谢谢