TechHUB - 技术文章 - 网页编程 - JavaScript

首页技术教程实用代码注册破解正则表达式网址导航电子书籍

技术文章 >> 网页编程 >> JavaScript

≡ 分类 ≡

≡ 推荐 ≡

≡ 热点 ≡

<

>

CSS+JS的图片幻灯效果

作者：不详， 来源：网络， 阅读：88， 发布时间：2014-05-22

不多作介绍，直接贴代码了，自己看一下就会明白的，兼容IE6、Firefox，演示见本站首页
以下是HTML代码：【运行代码】【复制代码】 <!DOCTYPE html PUBliC "-//W3C//DTD html 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>图片切换效果</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
#bgf {
background:#313439;
overflow: hidden;
}
#slider {
padding:2px 2px 2px 2px;
height:200px;
font-size: 12px;
}
#slider a:hover {
text-decoration: none;
}
#slider ul {
padding:0px;
margin:0px;
list-style: none;
}
#slider li {
}
#slider_pic {
display: inline;
float: left;
overflow: hidden;
width: 280px;
height: 170px;
position: relative;
}
#slider_piclist {
float:left;
position: absolute;
height: 170px;
}
#slider_piclist li {
overflow: hidden;
}
#slider_piclist img {
width: 280px;
height: 170px;
}
#slider_btn {
float: right;
width: 220px;
height: 170px;
}
#slider_btn li {
margin-left:2px;
cursor: pointer;
height: 22px;
text-align:left;
}
#bin333 {
padding:3px;
overflow: hidden;
width: 190px;
line-height: 22px;
white-space: nowrap;
text-overflow: ellipsis;
}
#bin333 a {
padding:0px 0px 0px 4px;
color:#fff;
}
#slider_btn img {
border:2px solid #fff;
vertical-align: middle;
width: 44px;
height: 22px;
filter: alpha(opacity=55);
moz-opacity: 0.55;
opacity: 0.55;
}
#slider_btn .current {
background: #97cf50;
color: #396105;
}
#slider_btn .current a {
font-weight: bold;
color: #396105;
text-decoration: none;
}
#slider_btn .current a:hover {
font-weight: bold;
color: #000;
text-decoration: none;
}
#slider_btn .current img {
filter: alpha(opacity=100);
moz-opacity: 1;
opacity: 1;
}
#slider_opdiv {
background:#440000;
height: 40px;
}
#slider_txt {
clear:both;
color: #333;
background:#fff;
margin-top:3px;
padding:3px 3px 0px 3px;
height:33px;
overflow:hidden;
}
#slider_txt li {
line-height: 16px;
}
#slider_txt li strong {
color: #ffcc00;
}
#slider_txt .normal {
display: none;
}
</style>
<script type="text/javascript">

</script>
</head>
<body>
<table cellpadding="3" cellspacing="1" align="center" border="0" bgcolor="">
<tr>
<td width="505" align="left" valign="top" bgcolor="#999999">
<div id="bgf">

<div id="slider">
<div id="slider_pic">
<div id="slider_piclist">
<ul>
<li><a href="http://img.autohome.com.cn/Shows/2007/4/26/car-26-10-53-49-273629091.jpg"><img alt="福特野马 2007上海车展" src="http://img.autohome.com.cn/Shows/2007/4/26/car-26-10-53-49-273629091.jpg" border=0></a></li>
<li><a href="http://www.yxqcc.com/admin/uploadpic/200676143220DSCN0243.JPG"><img alt="上海车展美女"
src="http://www.yxqcc.com/admin/uploadpic/200676143220DSCN0243.JPG" border=0></a></li>
<li><a href="http://www.qlwsq.cn/duovbbs/upload/1418-1-1.jpg"><img alt="(上海车展图片)香车美女" src="http://www.qlwsq.cn/duovbbs/upload/1418-1-1.jpg" border=0></a></li>
<li><a href="http://auto.tom.com/dimg/2009/0424/img-1242154404370.jpg"><img alt="2009上海车展十大最漂亮车模"
src="http://auto.tom.com/dimg/2009/0424/img-1242154404370.jpg" border=0></a></li>
<li><a href="http://content.metroer.com/files/2009/04/150.jpg"><img alt="2009年上海车展车模" src="http://content.metroer.com/files/2009/04/150.jpg" border="0"></a></li>
<li><a href="http://hiphotos.baidu.com/lavy/pic/item/086fa534e440b894d1a2d375.jpg"><img alt="2009年上海车展车模" src="http://hiphotos.baidu.com/lavy/pic/item/086fa534e440b894d1a2d375.jpg" border="0"></a></li>
</ul>
</div>

</div>
<div id="slider_btn">
<ul>
<li class="current"><div id="bin333"><a href="http://img.autohome.com.cn/Shows/2007/4/26/car-26-10-53-49-273629091.jpg">福特野马 2007上海车展</a></div></li>
<li class="normal"><div id="bin333"><a href="http://www.yxqcc.com/admin/uploadpic/200676143220DSCN0243.JPG">上海车展美女</a></div></li>
<li class="normal"><div id="bin333"><a href="http://www.qlwsq.cn/duovbbs/upload/1418-1-1.jpg">(上海车展图片)香车美女</a></div></li>
<li class="normal"><div id="bin333"><a href="http://auto.tom.com/dimg/2009/0424/img-1242154404370.jpg">2009上海车展十大最漂亮车模</a></div></li>
<li class="normal"><div id="bin333"><a href="http://content.metroer.com/files/2009/04/150.jpg">2009年上海车展车模(美女)</a></div></li>
<li class="normal"><div id="bin333"><a href="http://hiphotos.baidu.com/lavy/pic/item/086fa534e440b894d1a2d375.jpg">2009年上海车展车模(汽车)</a></div></li>
</ul>
</div>
<div id="slider_txt">
<ul>
<li class="current"><strong>福特野马 2007上海车展</strong><br />福特野马 2007上海车展福特野马 2007上海车展福特野马 2007上海车展福特野马 2007上海车展福特野马 2007上海车展... </li>
<li class="normal"><strong>上海车展美女</strong><br />上海车展美女上海车展美女上海车展美女上海车展美女... </li>
<li class="normal"><strong>(上海车展图片)香车美女</strong><br />(上海车展图片)香车美女(上海车展图片)香车美女... </li>
<li class="normal"><strong>2009上海车展十大最漂亮车模</strong><br />我这里介绍的是2009上海车展十大最漂亮车模,2009上海车展十大最漂亮车模,2009上海车展十大最漂亮车模... </li>
<li class="normal"><strong>2009年上海车展车模(美女)</strong><br />2009年上海车展车模2009年上海车展车模2009年上海车展车模... </li>
<li class="normal"><strong>2009年上海车展车模(汽车)</strong><br />2009年上海车展车模2009年上海车展车模2009年上海车展车模2009年上海车展车模2009年上海车展车模2009年上海车展车模... </li>
</ul>
</div>
</div>

</div>
</td>
</tr>
</table>
</body>
</html> 下面是一段PHP引用的例子： $sql = "select id,title,imageurl,content from tableName where isimage=1 order by id desc limit 6";
$re = mysql_query($sql);
if(mysql_num_rows($re) > 0){
    $slider_piclist = '';
    $slider_txt = '';
    $slider_btn = '';
    $i = 1;
    $slider_class = 'current';
    while($rs = mysql_fetch_array($re)){
        if($i > 1){
            $slider_class = 'normal';
        }
        $slider_piclist .= '<li><a href="/article.php?id='.$rs[0].'"><img alt="'.$rs[1].'" src="'.$rs[2].'" border="0"></a></li>';
        $slider_txt .= '<li class="'.$slider_class.'"><strong>'.$rs[1].'</strong><br />'.utf_substr(strip_tags($rs[3]),70).'... </li>';
        $slider_btn .= '<li class="'.$slider_class.'"><div id="bin333"><a href="/article.php?id='.$rs[0].'">'.trim($rs[1]).'</a></div></li>';
        $i++;
    }

    echo '
    <div id="bgf">
        
        <div id="slider">
            <div id="slider_pic">
                <div id="slider_piclist">
                    <ul>'.$slider_piclist.'</ul>
                </div>
            </div>
            <div id="slider_btn">
                <ul>'.$slider_btn.'</ul>
            </div>
            <div id="slider_txt">
                <ul>'.$slider_txt.'</ul>
            </div>
        </div>
        
    </div>
    ';
}

标签：CSS JS 幻灯

以下是用户评论查看全部评论