Jquery实现supesite首页图文轮换，附带摘要的方法

我没有演示网站，只有本地测试站，所以只能给大家看图了，有钱的碰个钱场，没钱的捧个(::33::) 场

supesite首页图文轮换，附摘要。摘要的代码因为有自动换行符，所以用flash等方法不容易实现，以Jquery+Div层的方式比较容易。还有两个js文件，占位引蜘蛛http://www.we170.com，同时流氓一次，期待大家到本站下载http://www.we170.com/me/41.html

1. <!--大图轮换区-->
   
2. <DIV id=highlight>
   
3. <DIV id=featured>
   
4. <!--标签开始 -->
   
5.   <!--{block name="spacenews" parameter="grade/5/haveattach/2/limit/0,6/cachetime/900/subjectlen/35/subjectdot/1/showdetail/1/messagelen/100/showcategory/1/cachename/index-pic/tpl/data"}--><!--index-pic-->
   
6. <!--{eval $i=1;}-->
   
7.    <!--{loop $_SBLOCK['index-pic'] $key $value}-->
   
8. <DIV class=image id=image_xixi-0$i>
   
9. <A title=$value[subjectall] href="$value['url']/" target=_blank>
   
10. <IMG alt=$value[subjectall] src="$value[a_thumbpath]" width="356" height="274">
    
11. </A>
    
12. <DIV class=word>
    
13. <H3>$value[subject]</H3>
    
14. <P>$value[message]</P>
    
15. </DIV>
    
16. </DIV>
    
17. <!--{eval $i++;}-->
    
18.    <!--{/loop}-->
    
19.    <!--标签结束 -->
    
20. </DIV>
    
21. <DIV id=thumbs>
    
22. <UL>
    
23.   <LI class="first btnPrev"><IMG id=play_prev
    
24.   src="images/btn_prev.gif"> </LI>
    
25.   <!--{eval $i=1;}-->
    
26.    <!--{loop $_SBLOCK['index-pic'] $key $value}-->
    
27.    <LI class=slideshowItem><A id=thumb_xixi-0$i
    
28.   href="#image_xixi-0$i"><IMG height=20
    
29.   src="$value[a_thumbpath]" width=28> </A></LI>
    
30.   <!--{eval $i++;}-->
    
31.    <!--{/loop}-->
    
32.   <LI class="last btnNext"><IMG id=play_next
    
33.   src="images/btn_next.gif">
    
34.   </LI></UL></DIV>
    
35. 
    
36.   
    
37. <SCRIPT type=text/javascript>
    
38. var target = ["xixi-01","xixi-02","xixi-03","xixi-04","xixi-05","xixi-06"];
    
39. </SCRIPT>
    
40.         </div>
    
41. 
    
42.     <!--大图轮换区  end -->

复制代码

css样式

1. #featured {
   
2.   OVERFLOW: hidden; WIDTH: 354px; POSITION: relative; HEIGHT: 204px
   
3. }
   
4. #featured .word {
   
5.   PADDING-RIGHT: 5px; PADDING-LEFT: 5px; Z-INDEX: 10; BACKGROUND:#222; LEFT: 0px; PADDING-BOTTOM: 5px; WIDTH: 350px; COLOR: #fff; BOTTOM: 0px; PADDING-TOP: 5px; POSITION: absolute; HEIGHT: 46px
   
6. }
   
7. #featured .word H3 {
   
8.   FONT-SIZE: 13px
   
9. }
   
10. #featured .ui-els-hide {
    
11.   DISPLAY: none
    
12. }
    
13. #thumbs {
    
14.   WIDTH: 354px;
    
15.   LIST-STYLE-TYPE: none;
    
16.   HEIGHT: 28px;
    
17.   background-color: #000000;
    
18. }
    
19. * HTML #thumbs {
    
20.   HEIGHT: 100%
    
21. }
    
22. #thumbs LI {
    
23.   DISPLAY: inline; FLOAT: left; WIDTH: 32px; MARGIN-RIGHT: 4px; HEIGHT: 24px
    
24. }
    
25. #thumbs UL {
    
26.   MARGIN-TOP: 3px
    
27. }
    
28. #thumbs LI.last_img {
    
29.   MARGIN-RIGHT: 4px
    
30. }
    
31. #thumbs LI.first {
    
32.   MARGIN: 5px 10px 0pt 15px; WIDTH: 20px; CURSOR: pointer; HEIGHT: 13px
    
33. }
    
34. #thumbs LI.last {
    
35.   MARGIN: 5px 12px 0pt 8px; WIDTH: 20px; CURSOR: pointer; HEIGHT: 13px
    
36. }
    
37. #thumbs LI A {
    
38.   BORDER-RIGHT: #9c9c9c 2px solid; BORDER-TOP: #9c9c9c 2px solid; DISPLAY: block; FONT-SIZE: 0px; BORDER-LEFT: #9c9c9c 2px solid; WIDTH: 28px; BORDER-BOTTOM: #9c9c9c 2px solid
    
39. }
    
40. #thumbs LI A:hover {
    
41.   BORDER-RIGHT: #99cc33 2px solid; BORDER-TOP: #99cc33 2px solid; BORDER-LEFT: #99cc33 2px solid; BORDER-BOTTOM: #99cc33 2px solid
    
42. }
    
43. #thumbs LI A.current {
    
44.   BORDER: #5FC243 2px solid;
    
45. }
    
46. #thumbs LI.first IMG {
    
47.   BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    
48. }
    
49. #thumbs LI.last IMG {
    
50.   BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-RIGHT-WIDTH: 0px
    
51. }
    

复制代码

第一步、下载js文件加入到你所需要的页面的head内，例如index.html.php
像这样

1. <script src="js/jquery.js" type="text/javascript"></script>
   
2. <script src="js/slide.js" type="text/javascript"></script>
   

复制代码

第二步、把css样式代码加到你的样式表里，或者

1. <style>代码</style>

复制代码

加到index.html.php这里面
第三步、在合适的地方加上轮换代码。
在不清楚怎么弄的话，在此留言或者到我站留言。
最近这里人气不咋地。。(::28::)

[ 本帖最后由 runlay 于 2008-8-27 07:49 编辑 ]

又见好帖...太谢谢了，我收藏起来!   


http://www.coo-mm.com/

[ 本帖最后由 joyochina 于 2008-8-26 18:49 编辑 ]

没看明白怎么用

好贴啊，顶起！

不错不错,支持

有冲突 common.js

哇,,
顶到你残废啊...
好贴, 收起来,

太复杂了
设计不合理啊

又见好帖...太谢谢了，我收藏起来!