用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!

用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!

下面代码有点多!但做出来你肯定喜欢!

用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!我不想废话了,开门见山吧。

先看演示 :http://www.gz7y.com   点精彩推荐即可看见!

如果下面代码你看不懂或者做不出来,明天等待我的视频吧。

CSS如下:
<STYLE type=text/css>
<!--
#f_div{width:230px; height:205px; margin:0 auto; overflow:hidden;}
#f_imgDiv{width:100%; height:205px; overflow:hidden;}
#f_img{filter:progid:DXImageTransform.Microsoft.Fade(Overlap=1.00); border:0;}
#f_infoDiv{width:100%;top:-16px !important;top:-18px; position:relative;}
#f_buttonDiv{width:100%; height:17px; overflow:hidden; text-align:left;}
#f_line{width:100%;height:1px;background:#fff; overflow:hidden;filter:progid:DXImageTransform.Microsoft.Alpha(startX=0, startY=0, finishX=50, finishY=100,style=1,opacity=0,finishOpacity=100)}
#f_buttonDiv div{width:1px;height:17px; background:#fff; float:right;}
#f_buttonDiv .bg{width:17px; height:17px; background:#fff; float:right; filter:Alpha(Opacity=40);}
#f_buttonDiv a{width:17px;height:11px !important;height:17px;float:right;padding-top:5px;color:#fff;font-family:Arial, Helvetica, sans-serif;font-size:10px; line-height:10px; text-align:center;display:block;overflow:hidden;text-decoration:none;position:absolute;}
#f_buttonDiv a:link,#f_buttonDiv a:visited,#f_buttonDiv a:active{color:#000;}
#f_buttonDiv a:hover{background:#FF840C;color:#fff;}
#f_buttonDiv a.on:link,#f_buttonDiv a.on:visited,#f_buttonDiv a.on:active,#f_buttonDiv a.on:hover{background:#FF840C;color:#fff;}
#f_buttonDiv a.on:hover{background:#FF6600;}
-->
</STYLE>

SQL循 环 体 如下:

<div id="f_div">
<!--图片区域-->
<div id="f_imgDiv"></div>
<div id="f_infoDiv">
<!--数字按钮区域-->
<div id="f_buttonDiv"></div>
</div>
</div>
<script>
var imgWidth=250;
var imgHeight=205;
var _timeOut_=5000;
var show_text = true; //是否显示焦点文字
var timeOut=_timeOut_;
var timeOut2=_timeOut_/2;//onmouseout img后需要切换的时间
var now=0;              //第一张图
var target="_blank";   //打开方式
var button_on ='on'; //当前焦点对应按钮的样式名
var button_off ='';//非当前焦点对应按钮的样式名
//不可修改区域
var imgUrl = new Array();
var imgText = new Array();
var imgLink = new Array();
var imgAlt= new Array();
//var menuList = new Array();//菜单menu
var ver=2; //兼容浏览器版本 默认2 为非ie
var firstTime=true;
var n =-1;
[loop=5]
imgUrl[++n]='{$Field(Picurl,Text,0,...,0,)}';
imgText[n]='<a href="{$Field(ID,GetInfoUrl,1,1)}" target="_blank" class=linkblack>{$Field(Title,Text,0,...,0,)}</a>';
imgLink[n]='{$Field(ID,GetInfoUrl,1,1)}';
imgAlt[n]='{$Field(Title,Text,0,...,0,)}';
[/loop]
var count=0;
for (i=0;i<imgUrl.length;i++) {
if( (imgUrl[i]!="") && (imgText[i]!="")&& (imgLink[i]!="")&& (imgAlt[i]!="")) {
count++;
} else {
break;
}
}
function p$(string){
document.write(string);
}
function $(id){
return document.getElementById(id);
}
//固定图片size
p$("<style> #f_img { width:"+imgWidth+"px;height:"+imgHeight+"px;</style>");
function change(){
if (ver==1){
with($('f_img').filters[0]){
Transition=1;
apply();
play();
}
}
if (firstTime){ firstTime=false;timeOut=_timeOut_/1000;}
else{
$('f_img').src=imgUrl[now];
$('f_img').alt=imgAlt[now];
$('f_imgLink').href=imgLink[now];
for (var i=0;i<count;i++) {
$('b'+i).className="button";
//$('f_menu'+i).className="";
}
$('b'+now).className="on";
//$('f_menu'+now).className="on";
now=(now>=imgUrl.length-1)?0:now+1;
timeOut=_timeOut_;
}
theTimer=setTimeout("change()", timeOut);
}
function b_change(num){
window.clearInterval(theTimer);
now=num;
firstTime=false;
change();
}
//draw 渐变line (即css:f_line)
function draw_line(){
var div = document.createElement("div");
div.id = 'f_line';
$('f_infoDiv').insertBefore(div,$('f_infoDiv').childNodes.item(0));
}
//表现层 start
//图片
var a = document.createElement("a");
a.id="f_imgLink";
a.target=target;
a.href=imgLink[now];
$('f_imgDiv').appendChild(a);
var img = document.createElement("img");
img.id="f_img";
img.width=imgWidth;
img.height=imgHeight;
img.src=imgUrl[now];
img.alt=imgAlt[now];
a.appendChild(img);
//数字按钮
for (var i=count-1;i>=0;i--){
var div_bg = document.createElement("div");
div_bg.id = 'div_bg'+i;
div_bg.className='bg';
$('f_buttonDiv').appendChild(div_bg);
var a = document.createElement("a");
a.id = 'b'+i;
a.className = (i==now+1)?"button_on":"button_off";
a.title=imgAlt[i];
a.innerHTML=i+1;
a.href='javascript:b_change('+i+')';
$('div_bg'+i).appendChild(a);
var div= document.createElement("div");
$('f_buttonDiv').appendChild(div);
}
//表现层 end
$('f_img').onmouseover=function(){window.clearInterval(theTimer);}
$('f_img').onmouseout=function(){theTimer=setTimeout("change()", timeOut2);}
try{  //滤镜版本
new ActiveXObject("DXImageTransform.Microsoft.Fade");
$('f_img').filters[0].play();
ver=1;
draw_line();
}
catch (e){ver=2;}
var theTimer = setTimeout("change()", _timeOut_/1000);
</script>

别忘了SQL查询语句:

--------------------------------------------------------------------------------
select top 5 ID,Title,Adddate,Picurl,Slide,Verific from KS_Article where verific=1 and Slide=1 order by Adddate desc  --------------------------------------------------------------------------------

如果你还不会做或者做不出来更或者看不懂代码,那请告知我,我把视频发出来。

(0)

相关推荐

  • 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!

    用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程! 下面代码有点多!但做出来你肯定喜欢! 用纯CSS+DIV写的漂亮Flash幻灯片及SQL标签教程!我不想废话了,开门见山吧. 先看演示 :http://www.gz7y.com   点精彩推荐即可看见! 如果下面代码你看不懂或者做不出来,明天等待我的视频吧. CSS如下: <STYLE type=text/css> <!-- #f_div{width:230px; height:205px; margin:0 auto; ov

  • 纯css+js写的一个简单的tab标签页带样式

    最近经常要用tab标签页,所以写了一个简单的,以后用的话直接拷贝一个,稍微改改就OK了. 先看效果图:  接下来看下代码怎么写的吧: 一.sp文件easytab.jsp 复制代码 代码如下: <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <% String path = request.getContextPath(); String b

  • XHTML下css+div布局总结 超强推荐

    xml(extensible Markup Language)的出现,结构化文档和数据有了一个通用的.科适应的格式,不仅仅应用在web上,也可以应用在任何地方.标准称为可能.XHTML是The Extensible HyperText Markup Language可扩展标识语言的缩写.在HTML4.0的基础上,用XML的规则对其进行扩展,得到了XHTML.它实现HTML向XML的过渡.CSS是Cascading Style Sheets层叠样式表的缩写.纯CSS布局与结构式XHTML相结合能帮

  • 纯js+html和纯css+html制作手风琴效果

    本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下 一.纯css+html的手风琴效果 这种用css写的手风琴比较简单,主要是应用到css中的,transition属性. 代码如下: <!DOCTYPE HTML> <html> <head> <style> body{background: url('bg.gif') repeat;} ul,li,p{margin: 0px;padding: 0px;lis

  • 纯JavaScript手写图片轮播代码

    废话不多说了,直接给大家贴js代码实现手写图片轮播的代码了,代码非常简单,具体代码如下所示: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>js图片轮播切换</title> <style type="text/css"> .imgCon{width: 400px;height: 400px;border: 2p

  • 纯css实现窗户玻璃雨滴逼真效果

    这里仅是用CSS技术来演示这样的一个场景,可能并不太实用.然而这是一个探索CSS新功能的最佳机会.可以让你尝试使用一些新特性和新工具.并且逐渐将在工作中实践.在制作窗口雨滴效果,将使用到HAML和Sass. 案例效果 查看演示 源码下载 看到上面的效果是不是有点像人站室内看窗外雨中的夜景,窗户上雨滴的效果是那么的真实,窗外的夜景却又是那么的模糊.咱们不在诗意化了,我想大家更为关注的是用什么样的技术来实现这样的一个效果. 预处理器 在这个示例中,使用了HAML和Sass来替代我们熟悉的HTML和C

  • div+css div+css divcss布局入门教程 迅雷下载

    你正在学习 CSS 布局吗?是不是还不能完全掌握纯 CSS 布局?通常有两种情况阻碍你的学习:     第 CSS 处理页面的原理.在你考虑你的页面整体表现效果前,你应当先考虑内容的语义和结构, 然后再针对语义.结构添加 CSS.这篇文章将告诉你应该怎样把 HTML 结构化.     另一种原因是你对那些非常熟悉的表现层属性(例如:cellpadding,.hspace.align="left"等等)束手无策,不知道该 转换成对应的什么 CSS语句.当你解决了第 HTML,我再给出一个

  • 纯CSS实现标签导航制作

    在网上搜索了一下都没怎么看到纯用CSS制作标签导航方面的教程或者说明,大部分都是要涉及到JS的编写的.这对于很多CSS学习中的人来说实在有些不够体贴,既然没人做那我来先来试试!我在这里做的CSS标签导航是纯CSS无JS无背景图片的绿色导航.此文章适合初学者,高手可以路过,呵呵! nav02 *{ margin:0; padding:0; } .mainNav{ margin:0 20px; height:47px; border-bottom:2px solid #000; } ul{ marg

  • 布局用CSS+DIV的优点总结

    采用CSS+DIV对网站重构日趋被大家重视起来了,尤其是大型站点,像阿里巴巴.163等大型门户站点就已经完成了重构工作.本人在去年就已经有了使用CSS+DIV来编写网页源码的习惯了,个人感觉这种方法确实比传统的TABLE形式的源码架构强多了. 1:表现和内容相分离 将设计部分剥离出来放在一个独立样式文件中,HTML文件中只存放文本信息. 2:提高搜索引擎对网页的索引效率 用只包含结构化内容的HTML代替嵌套的标签,搜索引擎将更有效地搜索到你的网页内容,并可能给你一个较高的评价. 3:提高页面浏览

  • 网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容

    网页布局+纯CSS纵向下拉菜单 IE6/IE7兼容 网页布局+纯CSS纵向下拉菜单 *{ margin:0; padding:0; border:0; } html{ background:#bfc4c7;/*背景颜色*/ } body{ font:12px/150% '宋体'; margin:0 auto; width:770px; text-align:center; } #menu,#nav,#footer{ clear:both; } #nav{ padding-left:20px; t

随机推荐