superslide实现图片轮播

最新推荐文章于 2024-01-11 10:43:58 发布

hangyejiadao

最新推荐文章于 2024-01-11 10:43:58 发布

阅读量2.3k

点赞数

分类专栏： Js

本文链接：https://blog.csdn.net/hangyejiadao/article/details/54313156

版权

Js 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

zzsc.css代码:

/* css 重置 */
body,div,ul,li { padding: 0; margin: 0; }
ul { list-style: none ; }
img { border: none; }
a { blr: expression(this.onFocus=this.blur()); outline: none; }

/*本例css*/
.chinaz { width: 800px; height: 330px; margin:25px auto; position: relative; overflow:hidden; margin-bottom: 15px; }

/*数字按钮样式*/
.chinaz .num { overflow:hidden; height: 25px; position: absolute; bottom:12px; left: 15px; zoom:1; z-index:3 }
.chinaz .num li { width: 25px; height: 25px; line-height: 25px; text-align: center; font-weight: 400; font-family: "微软雅黑", Arial; color: #FFFFFF; background: #444444; margin-right: 10px; border-radius:50%; cursor:pointer; float: left; }
.chinaz .num li.on { background: #FF7700; } /*当前项*/

/*上一个  下一个*/
.chinaz .prev,
.chinaz .next { display: none; width: 40px; height: 100px; background: url(../images/btn.png) no-repeat; position: absolute; top: 115px;}
.chinaz .prev { left: 0; }
.chinaz .next { right: 0; background-position: right }

html代码:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>大话主席jQuery多屏渐隐过渡焦点图/幻灯片 - 聚合素材网演示页www.juheweb.com</title>
    <link rel="stylesheet" type="text/css" href="css/zzsc.css" />
    <script src="js/jquery1.42.min.js" type="text/javascript"></script>
    <script src="js/jquery.superslide.2.1.1.js" type="text/javascript"></script>
</head>
<body>
    <!-- 代码 开始 -->
    <div class="chinaz">
        <ul class="51buypic">
            <li><img src="images/0.jpg" /></li>
            <li><img src="images/1.jpg" /></li>
            <li><img src="images/2.jpg" /></li>
            <li><img src="images/3.jpg" /></li>
            <li><img src="images/4.jpg" /></li>
            <li><img src="images/5.jpg" /></li>
            <li><img src="images/6.jpg" /></li>
            <li><img src="images/7.jpg" /></li>
            <li><img src="images/7.jpg" /></li>
        </ul>
        <a class="prev" href="javascript:void(0)"></a>
        <a class="next" href="javascript:void(0)"></a>
        <div class="num">
            <ul></ul>
        </div>
    </div>
    <script>
        /*鼠标移过，左右按钮显示*/
        $(".chinaz").hover(function () {
            $(this).find(".prev,.next").fadeTo("show", 0.1);
        }, function () {
            $(this).find(".prev,.next").hide();
        })
        /*鼠标移过某个按钮 高亮显示*/
        $(".prev,.next").hover(function () {
            $(this).fadeTo("show", 0.7);
        }, function () {
            $(this).fadeTo("show", 0.1);
        })
        $(".chinaz").slide({ titCell: ".num ul", mainCell: ".51buypic", effect: "fold", autoPlay: true, delayTime: 700, autoPage: true });
    </script>


    <!--以下代码不作为插件效果内容 -->
    <style>
        .jhp {
            padding: 5px 0px;
            text-align: center;
            font-size: 12px;
            clear: both;
            margin: 0px;
        }

        .d_foot_o {
            text-align: center;
            margin: 35px 0 10px 0;
            clear: both;
        }
    </style>



</body>
</html>