| 主题 : 获取图片 |
级别: 举人
 |
8# 发表于:2017-09-21 16:53:00 IP:222.216.*.*
网站首页轮播图片
我是做成这个效果的 具体代码如下： <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>首页</title> <meta http-equiv="x-ua-compatible-Type" content="IE=9"/> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/> <link href="${resSys}/yzw/css/style.css" type="text/css" media="screen" rel="stylesheet" /> <script src="${resSys}/yzw/js/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#index').click(function(){ alert('当前页面不支持该功能') }); $('#collect').click(function(){ alert('当前页面不支持该功能') }); }); </script> <style> * { word-wrap: break-word; } body { font: 12px/1.5 Tahoma,'Microsoft Yahei','Simsun'; color: #444; } body, ul, li { margin: 0; padding: 0; } ul li { list-style: none; } a { color: #000; text-decoration: none; } a:hover { text-decoration: underline; } a img { border: none; } .cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .cl { zoom: 1; } .frame { margin-bottom: 10px; border: 1px solid #e1e1e1; background: #FFF; } .title { padding: 0 10px; height: 32px; font-size: 14px; font-weight: 700; line-height: 32px; overflow: hidden; } .block { margin: 10px 10px 0; } .temp { margin: 1px; } .slideshow { clear: both; } .slideshow li { position: relative; overflow: hidden; } .slideshow span.title { position: absolute; bottom: 0; left: 0; margin-bottom: 0; width: 100%; height: 32px; line-height: 20px; font-size: 14px; text-indent: 10px; } .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #30000000,endColorstr = #30000000); color: #FFF; overflow: hidden; } .slidebar li { float: left; margin-right: 1px; width: 20px; height: 20px; line-height: 20px; text-align: center; font-size: 10px; cursor: pointer; } .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #50FFFFFF,endColorstr = #50FFFFFF); color: #000; font-weight: 700; } ul, li { list-style: none; } a:hover { text-decoration: underline; color: #a50001; } .frame { background: none; border: 0px solid #fff; margin-bottom: 0px; } .temp { margin: 0; } .slidebar { position: absolute; top: 0; left: 0; } .slideshow span.title, .slidebar li { background: rgba(0,0,0,0.3);margin-left:1px; filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: #FFF; overflow: hidden; } .slidebar li.on { background: rgba(255,255,255,0.5); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = #90000000,endColorstr = #90000000); color: red; font-weight: 700; } .slideshow SPAN.title { text-indent: 0px; } .block { margin: 0;position: relative; } #frameHlicAe { margin: 0px !important; border: 0px !important; } .comiis_wrap350, .comiis_wrapad { margin: 0 auto; width: 350px; } .comiis_wrapad { margin-top: 10px; } .comiis_wrapad { overflow: hidden; } .comiis_wrapad img { float: left; margin-top: 0px; } #slidesImgs li { width: 350px; height: 250px; display: none; } </style> </head> <body> <div class="header"> <a class=""><img src="/r/cms/www/default/images/logo.png" alt="" class=""></a> <div class="right"> <span id="index"><a href="#">设为首页</a></span> <span class="">|</span> <span id="collect"><a href="#">加入收藏</a></span> </div> </div> <div class="content"> [#include "../include/biaoti.html"] <div class="medium"> <div class="banner"> <div id="slideBox" class="slideBox"> <div class="bd"> <div class="comiis_wrapad" id="slideContainer"> <div id="frameHlicAe" class="frame cl"> <div class="temp"></div> <div class="block"> <div class="cl"> <ul class="slideshow" id="slidesImgs"> [@cms_content_list recommend='2' typeId='1,2,3' count='5' orderBy='4' channelId='122' channelOption='1' dateFormat='MM-dd' ] [#list tag_list as a] <li><a href="${a.url}" ><img src="${a.typeImg}" /></a><span class="title">${a.title}</span></li> [/#list] [/@cms_content_list] </ul> </div> <div class="slidebar" id="slideBar"> <ul> <li class="on">1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> </div> </div> </div> <script type="text/javascript"> SlideShow(4000); function SlideShow(c) { var a = document.getElementById("slideContainer"), f = document.getElementById("slidesImgs").getElementsByTagName("li"), h = document.getElementById("slideBar"), n = h.getElementsByTagName("li"), d = f.length, c = c || 3000, e = lastI = 0, j, m; function b() { m = setInterval(function () { e = e + 1 >= d ? e + 1 - d : e + 1; g() }, c) } function k() { clearInterval(m) } function g() { f[lastI].style.display = "none"; n[lastI].className = ""; f[e].style.display = "block"; n[e].className = "on"; lastI = e } f[e].style.display = "block"; a.onmouseover = k; a.onmouseout = b; h.onmouseover = function (i) { j = i ? i.target : window.event.srcElement; if (j.nodeName === "LI") { e = parseInt(j.innerHTML, 10) - 1; g() } }; b() } ; </script> </div> <script type="text/javascript" src="${resSys}/yzw/js/jquery1.42.min.js"></script> <script type="text/javascript" src="${resSys}/yzw/js/jquery.SuperSlide.2.1.1.js"></script> <script id="jsID" type="text/javascript"> var ary = location.href.split("&"); jQuery(".slideBox").slide( { mainCell:".bd ul", effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],mouseOverStop:ary[6],pnLoop:ary[7] }); </script> </div> </div> 我是从头开始截的，有需要的可以自己去粘自己需要部分。 做这个功能需要注意的是： 1.先写上样式，比如你要做多大的或者多少张图片轮播 2.先把这部分写死，然后再套标签 具体标签为（内容列表标签） 3.再标签里写上${a.url}和${a.title}，这样才能从前台读取到后台上传的图片 4.再后台编辑的标签名字就是在前台图片下（我做的显示标题的一条透明层。透明度为0.8）显示图片标题 5.点击图片后跳到另一个页面，显示的是在后台编辑上传的图片和内容 |
||
|---|---|---|---|
1
共1页