手机版首页顶部的滚动广告怎么做的？

admin

1）用火狐浏览器插件User Agent Switcher，进入到iphone 3.0，在PC端模拟手机端访问。
2）进入后台，上面一排选【快捷菜单】，左边就显示出【标签设置】
3）选【网站主页】
4）下面就一样了，双击右边的内容区域，进入标签管理

5）这里要选自定义代码

1. <style>
   
2. body{max-width:640px; margin:auto;}
   
3. .ShowSlide{
   
4.         width:100%;
   
5.         border-top:#DDD solid 1px;
   
6.         border-bottom:#DDD solid 1px;
   
7.         margin:10px auto;
   
8.         background:#FFF;
   
9.         position:relative;
   
10. }
    
11. #slide,#slide .cell,#slide .cell img {
    
12.         height:auto;
    
13. }
    
14. #slide{
    
15.         position:static;
    
16.         z-index:2;
    
17.         background-color:#f3f3f3;
    
18.         margin:auto;
    
19.         width:100%;
    
20.         overflow: hidden;
    
21.         -webkit-user-select:none;
    
22.         -moz-user-select:none;
    
23.         -ms-user-select:none;
    
24.         -o-user-select:none;
    
25.         user-select:none;
    
26. }
    
27. #slide .cell{
    
28.         position:relative;
    
29.         z-index:2;
    
30.         width:100%;
    
31.         vertical-align:middle;
    
32.         display:table-cell;
    
33. }
    
34. #slide .cell .title {
    
35.         display:none;
    
36. }
    
37. #slide .cell img {
    
38.         vertical-align:top;
    
39.         width:100%;
    
40.         height:auto;
    
41.         display:block;
    
42.         cursor:pointer;
    
43. }
    
44. #indicator {
    
45.         position:absolute;
    
46.         width:100%;
    
47.         bottom:0;
    
48.         left:0;
    
49.         text-align:center;
    
50. }
    
51. #indicator li {
    
52.         color:#fff;
    
53.         margin:0 4px;
    
54.         text-indent:-999em;  
    
55.         width:8px;
    
56.         height:8px;
    
57.         border-radius:8px;  
    
58.         display:inline-block;
    
59.         overflow:hidden;
    
60.         background-color:#ccc;
    
61. }
    
62. #indicator .active {
    
63.         background-color:#f50;
    
64. }
    
65. </style>
    
66. <div class="ShowSlide">
    
67. <script src="/shop/images/wap/slide.js"></script>
    
68. <div id="slide" class="clearfix" style="display:none">
    
69.         <div id="content">
    
70. <!--
    
71. EOT;
    
72. foreach($listdb AS $rs){extract($rs);
    
73. print <<<EOT
    
74. -->
    
75.                 <li class='cell'><a href="$url" title="$title"><img src="$picurl" name="$picurl"/><span class='title'>$title</span></a></li>
    
76. <!--
    
77. EOT;
    
78. }
    
79. print <<<EOT
    
80. -->
    
81.         </div>
    
82.         <ul id="indicator"></ul>
    
83.         <span class="prev" id="slide_prev" style="display:none">上一张</span><span class="next" id="slide_next" style="display:none">下一张</span>
    
84. </div>
    
85. <script>
    
86. (function($){
    
87.         var list = $('#content').find('.cell');
    
88.         if(list.length > 0){
    
89.                 $('#slide').show();
    
90.                 var txt = '';
    
91.                 $('#content').find('.cell').each(function(i){
    
92.                         if(i === 0){
    
93.                                 txt += '<li class="active">1</li>';
    
94.                         }else{
    
95.                                 txt += '<li>'+(i+1)+'</li>';
    
96.                         }
    
97.                 });
    
98.                 $('#indicator').html(txt);
    
99.                 setTimeout(function(){new C_Scroll({container:'slide',content:'content',ct:'indicator',size:'400',intervalTime:5000,lazyIMG:!!0});},200);
    
100.         }
     
101.         /*$('#content img').click(function(){
     
102.                 var pics=$(this).attr("src");
     
103.                 var picdbs=new Array();
     
104.                 var i=0;
     
105.                 $('#content img').each(function(){
     
106.                         var thisurl=$(this).attr("src");
     
107.                         picdbs[i]=thisurl;
     
108.                         i++;
     
109.                 });
     
110.                 view_pic1(pics,picdbs);
     
111.         });*/
     
112. })(jQuery);
     
113. /*function view_pic1(pic,picdbs) {       
     
114.         wx.previewImage({
     
115.           current: pic,
     
116.           urls:picdbs
     
117.         });
     
118. }*/
     
119. </script>
     
120. </div>

复制代码

只有选齐博提供的这个自定义代码，广告才能正确显示，否则，图片总是无法调整大小。

此外，这个广告图片推荐大小是640x344，或者320x152