再发一款很Nice的Slideshow

April 9, 2009 slideshow

slideshow

这是一款来自“templateplazza.net”的 slideshow .

基于mootools，看着效果不错就想抠下来与大家分享，我这里着重讲解一下它的使用方法，有不懂的地方就尽情的问吧。

首先呢要在头部引入 “mootools.js、tpniceslideshow.js、tpniceslideshow.css”。

其中mootools.js不用我多说，一个AJAX Library，

tpniceslideshow.js这个呢就是一个Slideshow的实现类，有兴趣的朋友可以研究这个东西，里面有很多参数可自定义，
tpniceslideshow.css这个是对Slideshow的CSS基本定义，若有需要也可以直接修改这个文件。

自定义Slideshow的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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

<style type="text/css">
 /*Slideshow*/
.TPNSSwrapper {
	width: 626px; 
}
 
#TPNiceSlideShowMenu div img {
	float: left;
	margin:  8px;
}
 
/*右边滚动菜单*/
#TPNiceSlideShowMenu div {
	height: 60px;
	width: 246px;
}
 
 
/*菜单项目*/
.TPNiceSlideShowMenuContent {
text-align: left;
}
 
/*SlideShow内容区域*/
#TPNiceSlideShow {
	height: 300px;
	width: 356px;
	float: left;
}
 
/*右边滚动内容区域*/
#TPNiceSlideShowMenuWrp {
	height: 300px;
	width: 246px;
	overflow:hidden;
}
 
/*滚动条*/
.tpniceslideshow_scrollbar-vert{
	height: 300px;
	width: 22px;
	float:right;
}
 
/*滚动条按钮*/
.tpniceslideshow_handle-vert{
	width: 22px;
}
/*内定描述*/
.TPNiceSlideShowGallery .slideInfoZone {
	height: 300px;
	width: 200px;
	background: #333333;
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -150px;
	margin-left: -100px;		
}
</style>

新建Slideshow实例

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

<script type="text/javascript">
/* <![CDATA[ */
function startTPNiceSlideShow() {
	var TPNiceSlideShow = new TPSlideShowClass($('TPNiceSlideShow'), {
		timed: true,  //自动播放
		showInfopane: true, //显示简要
		showMenu: true,  //菜单是有效
		embedLinks: true, //嵌入链接
		fadeDuration: 500, //渐褪特效延时
		readMore: true, // 显示更多按键
		readMoreText: 'Read More', //更多链接文字
		showTitle: true, //显示标题
		titleLink: true, //标题链接
		showDescription: true, //显示描述
 
		scrollBar: true, //滚动条有效
		itemCount: 10,  //项目总数，影响滚动的定位
		scrollBarContent:	$('TPNiceSlideShowMenuWrp'),  //滚动内容ID
		scrollBarArea: $('tpniceslideshow_scrollbar'), //滚动条区域
		scrollBarHandle: $('tpniceslideshow_handle'),  //滚动条按钮
 
		delay: 3000 //间隔时间
	});
}
window.onDomReady(startTPNiceSlideShow);
/* ]]> */
</script>

以上内容都在head内完成的，也就是头部需要定义的，下面说说主体内容实现方法。

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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

<div class="TPNSSwrapper">
<!--左边内容显示-->
<div id="TPNiceSlideShow">
		<!--内容元素定义-->
        <div class="imageElement">
        <h3>
            The Celebrities</h3>
        <p>
            Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
        <a href="#" title="open link" class="open"></a><img src="files/11193000.jpg" class="full" alt="The Celebrities" /></div>
        <div class="imageElement">
        <h3>
            Eaque ipsa quae
        </h3>
        <p>
            illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            Nemo enim ipsam voluptatem quia voluptas
        </p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
    </div>
    <div class="imageElement">
        <h3>
            The Celebrities</h3>
        <p>
            Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/11193000.jpg" class="full" alt="The Celebrities" />
    </div>
    <div class="imageElement">
        <h3>
            Bolt - Box Office</h3>
        <p>
            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
            laudantium, totam rem aperiam</p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/12629000.jpg" class="full" alt="Bolt - Box Office" />
    </div>
    <div class="imageElement">
        <h3>
            Voluptatem sequi nesciunt</h3>
        <p>
            Neque porro quisquam est, qui dolorem ipsum quia dolor
        </p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/17018000.jpg" class="full" alt="Voluptatem sequi nesciunt" />
    </div>
    <div class="imageElement">
        <h3>
            From Oprah to Springsteen</h3>
        <p>
            Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam
            quaerat voluptatem. Ut enim a</p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/37400000.jpg" class="full" alt="From Oprah to Springsteen" />
    </div>
    <div class="imageElement">
        <h3>
            Eaque ipsa quae
        </h3>
        <p>
            illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            Nemo enim ipsam voluptatem quia voluptas
        </p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
    </div>
    <div class="imageElement">
        <h3>
            Red Carpet</h3>
        <p>
            Architecto beatae vitae dicta beatae vitae dicta</p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/22176000.jpg" class="full" alt="Red Carpet" />
    </div>
            <div class="imageElement">
        <h3>
            Eaque ipsa quae
        </h3>
        <p>
            illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            Nemo enim ipsam voluptatem quia voluptas
        </p>
        <a href="#" title="open link" class="open"></a>
        <img src="files/69460000.jpg" class="full" alt="Eaque ipsa quae " />
    </div>
    <div class="imageElement">
        <h3>
            2009 Grammy Nomination Concert</h3>
        <p>
            Quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid
            ex ea commodi consequatur?
        </p>
        <a href="#" title="open link"
            class="open"></a>
        <img src="files/23785000.jpg" class="full" alt="2009 Grammy Nomination Concert" />
    </div>
</div>
<!--右边菜单-->
<div id="TPNiceSlideShowMenuWrp">
    <div id="TPNiceSlideShowMenu">
    	<!--菜单项定义-->
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/11193001.jpg" alt="The Celebrities" />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
                    <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/17018001.jpg" alt="The Celebrities" />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
                    <span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/12629001.jpg" alt="Bolt - New Box Office" />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">Bolt - New Box Office</span><br />
                    <span class="tpnssmenu_desc">Sed ut perspiciatis unde omnis iste natus </span>
                </a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/17018001.jpg" alt="Voluptatem sequi nesciunt" />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">Voluptatem sequi nesciunt</span><br />
                    <span class="tpnssmenu_desc">Neque porro quisquam est, qui dolorem </span></a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
                    <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/37400001.jpg" alt="From Oprah to Springs ..." />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">From Oprah to Springs ...</span><br />
                    <span class="tpnssmenu_desc">Sed quia non numquam eius modi tempora incidunt ut
                    </span></a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/69460001.jpg" alt="Eaque ipsa quae " />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">Eaque ipsa quae </span>
                    <br />
                    <span class="tpnssmenu_desc">Eaque ipsa quae ab illo </span></a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
                    <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/22176001.jpg" alt="Red Carpet" />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">Red Carpet</span><br />
                    <span class="tpnssmenu_desc">Architecto beatae vitae dicta</span> </a>
            </p>
        </div>
        <div class="TPNiceSlideShowMenuContent">
            <img src="files/23785001.jpg" alt="2009 Grammy Nominat .." />
            <p>
                <a href="javascript:void(0);"><span class="tpnssmenu_title">2009 Grammy Nominat ..</span><br />
                    <span class="tpnssmenu_desc">Quis nostrum exercitationem</span> </a>
            </p>
        </div>
 
    </div>
</div>
<!--滚动条-->
<div id="tpniceslideshow_scrollbar" class="tpniceslideshow_scrollbar-vert">
    <div id="tpniceslideshow_handle" class="tpniceslideshow_handle-vert">
    </div>
</div>
</div>

其中

1
2
3
4
5

<div class="imageElement">
<h3>The Celebrities</h3>
<p>Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse</p>
<a href="#" title="open link" class="open"></a><img src="files/11193000.jpg" class="full" alt="The Celebrities" />
</div>

与

1
2
3
4
5
6
7

<div class="TPNiceSlideShowMenuContent">
<img src="files/11193001.jpg" alt="The Celebrities" />
<p>
<a href="javascript:void(0);"><span class="tpnssmenu_title">The Celebrities</span><br />
<span class="tpnssmenu_desc">Quis autem vel eum iure re</span> </a>
</p>
</div>

应该是一一对应的的关系，一个是要显示的内容，另一个是对应的菜单项.

加项目的时候应使用上面的格式同时添加要显示的内容和菜单项即可。

大家应该可以搞定了吧，本站提供效果演示和下载，大家慢慢研究吧，有问题可在此提出，即时解答.

Tags: ,

Comments (9)

 

  1. simaopig says:
    April 9, 2009 at 3:44 pm

    It’s very nice .

    So good and so strong.

    :razz:

    [Reply]

  2. LAONB says:
    April 9, 2009 at 4:56 pm

    太棒了，之前有研究这种代替FLASH幻灯，结果CSS哪里出问题，页脚跑上面去了，就放弃了，今天晚上回来好好试试这个好东西。 :cool:

    [Reply]

    • Feng says:
      April 10th, 2009 at 1:04 am

      好运 :)

      [Reply]

  3. bolo says:
    April 9, 2009 at 8:35 pm

    随着css+div和js的强大，感觉很多效果已经不用flash实现了

    [Reply]

    • Feng says:
      April 10th, 2009 at 12:59 am

      是啊，由于Flash的弊端和JS+CSS的优势，才有JS今天的影响力。

      [Reply]

  4. LAONB says:
    April 10, 2009 at 2:21 pm

    呵呵，缺点就是每次需要改的内容比较多，如果换5套图，小图就要全改一遍，介绍页要在DW里改一遍，还有链接地址
    不过有这么专业的老师在，一段时间后我会提高许多啊 :shock:

    [Reply]

    • Feng says:
      April 10th, 2009 at 4:19 pm

      一些效果比较靓的东西用起来往往麻烦些，也可以做个后台不过用起来一样的麻烦还不如在DW改来的快

      [Reply]

  5. LAONB says:
    April 10, 2009 at 3:25 pm

    我把第一块放到CSS中
    第二块放入头部PHP添加了调用JS
    第三块当做新闻，用HTML复制
    :cry: 最后没成，可以滚轮滑动了，但是大图不变
    肯定是我自己没整明白，调用的不太清楚 :oops:

    [Reply]

  6. LAONB says:
    May 8, 2009 at 12:19 am

    直到今天我才弄明白这个东西，太兴奋了。

    [Reply]

Leave a Reply