7.2,7.5都支持新的纯JS+CSS+DIV首页焦点效果图：谷歌浏览器都马上不支持Flash了早点替换掉



原来的Flash效果


 

步骤：

1、后台，标签模板》管理标签模板，增加【新闻页面焦点图调用lyz20191230】名字自己随便取

页面模板内容：

1. <div class="wa8_focus" id="wa8_focus01">  
2.     <ul>  
3.       [!--empirenews.listtemp--]<!--list.var1-->[!--empirenews.listtemp--]  
4. </ul>  
5.     <a href="javascript:void(0);" class="unslider-arrow04 prev"><img class="arrow" id="al" src="[!--news.url--]skin/default/images/arrowl.png" alt="prev" width="20" height="35"></a>  
6.     <a href="javascript:void(0);" class="unslider-arrow04 next"><img class="arrow" id="ar" src="[!--news.url--]skin/default/images/arrowr.png" alt="next" width="20" height="37"></a>  
7. </div>  
8. <script>  
9. $(document).ready(function(e) {  
10.     var unslider04 = $('#wa8_focus01').unslider({  
11.         dots: true  
12.     }),  
13.     data04 = unslider04.data('unslider');  
14.       
15.     $('.unslider-arrow04').click(function() {  
16.         var fn = this.className.split(' ')[1];  
17.         data04[fn]();  
18.     });  
19. });  
20. </script>  

列表内容模板
 

1. <li><a href="[!--titleurl--]" target="_blank"><img src="[!--titlepic--]" alt="[!--title--]" width="430" height="297" /></a></li>  

2、确定新增的标签ID，每个人自己增减不一样，以自己增加的为准。




3、CSS样式增加到文件skindefaultcssstyle.css内：
 

1.    
2. /*lyz 首页js焦点图20191230 end*/  
3. .wa8_focus { position: relative; overflow: auto; text-align: center;}  
4. .wa8_focus li { list-style: none; }  
5. .wa8_focus ul li { float: left; }  
6. #wa8_focus01 { width: 440px;}  
7. #wa8_focus01 .dots { position: absolute; left: 0; right: 0; bottom: 20px;}  
8. #wa8_focus01 .dots li  
9. {  
10.     display: inline-block;  
11.     width: 10px;  
12.     height: 10px;  
13.     margin: 0 4px;  
14.     text-indent: -999em;  
15.     border: 2px solid #fff;  
16.     border-radius: 6px;  
17.     cursor: pointer;  
18.     opacity: .4;  
19.     -webkit-transition: background .5s, opacity .5s;  
20.     -moz-transition: background .5s, opacity .5s;  
21.     transition: background .5s, opacity .5s;  
22. }  
23. #wa8_focus01 .dots li.active  
24. {  
25.     background: #fff;  
26.     opacity: 1;  
27. }  
28. #wa8_focus01 .arrow { position: absolute; top: 130px;}  
29. #wa8_focus01 #al { left: 15px;}  
30. #wa8_focus01 #ar { right: 15px;}  
31. /*lyz 首页js焦点图20191230 end*/  

 

4、两个箭头的图片文件，自己做或者到网站xtili.com自行右键另存为，放置在skindefaultimages文件夹上传。

5、js文件增加两个文件到skindefaultjsjquery-3.3.1.min.js自己网上找，另外一个文件unslider.min.js
 

6、首页模板增加内容：
 

1. <script type="text/javascript" src="[!--news.url--]skin/default/js/jquery-3.3.1.min.js"></script>  
2. lt;script type="text/javascript" src="[!--news.url--]skin/default/js/unslider.min.js"></script>  

焦点图位置替换为，其中的16为第2点内的ID16：

1. <!-- 焦点图片，调用默认模型带标题图片的头条信息 -->  
2.             [ecmsinfo]'55,56,57,58,59,60',5,18,0,0,16,1[/ecmsinfo]  

附件：箭头图片、文件jquery-3.3.1.min.js和文件unslider.min.js