使用SuperSlide制作首页轮播图

最新推荐文章于 2024-03-17 09:48:11 发布

iziminy

最新推荐文章于 2024-03-17 09:48:11 发布

阅读量5.3k

点赞数

分类专栏： JavaScript jQuery

本文链接：https://blog.youkuaiyun.com/zimin1985/article/details/22054947

版权

JavaScript 同时被 2 个专栏收录

41 篇文章

订阅专栏

jQuery

29 篇文章

订阅专栏

SuperSlide 可以解决网站大部分特效展示问题，使网站代码规范整洁，方便维护更新

<!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=utf-8" />
<title>无标题文档</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script src="https://superslide.googlecode.com/files/jquery.SuperSlide.2.1.1.js" type="text/javascript"></script>
</head>
<style>
* {
    list-style: none outside none;
    margin: 0;
    padding: 0;
}
body {
    background: none repeat scroll 0 0 #FFFFFF;
    font: 12px/22px 宋体;
}
img {
    border: 0 none;
}
a {
    color: #333333;
    text-decoration: none;
}
a:hover {
    color: #1974A1;
}
.js {
    margin: 10px auto 0;
    width: 90%;
}
.js p {
    font-weight: bold;
    overflow: hidden;
    padding: 5px 0;
}
.js p span {
    float: right;
}
.js p span a {
    color: #FF0000;
    text-decoration: underline;
}
.js textarea {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    border-color: #AAAAAA #CCCCCC #CCCCCC #AAAAAA;
    border-image: none;
    border-right: 1px solid #CCCCCC;
    border-style: solid;
    border-width: 2px 1px 1px 2px;
    height: 50px;
    padding: 5px;
    width: 98%;
}
.TB-focus {
    border: 1px solid #D8D8D8;
    height: 168px;
    overflow: hidden;
    position: relative;
    width: 488px;
}
.TB-focus .hd {
    bottom: 10px;
    padding-left: 2px;
    position: absolute;
    right: 9px;
    z-index: 1;
}
.TB-focus .hd li {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #D8D8D8;
    color: #FF6600;
    cursor: pointer;
    float: left;
    font-size: 13px;
    height: 18px;
    line-height: 18px;
    margin-left: -1px;
    opacity: 0.7;
    overflow: visible;
    text-align: center;
    width: 18px;
}
.TB-focus .hd li.on {
    background: none repeat scroll 0 0 #FF6600;
    color: #FFFFFF;
    font-weight: bold;
    opacity: 1;
    position: relative;
    z-index: 2;
}
</style>
<script>
document.οncοntextmenu=function(){ return false }
$(function (){
	
	jQuery(".TB-focus").slide({ mainCell:".bd ul",effect:"fold",autoPlay:true,delayTime:200 });
	
});

</script>
<body>
<div class="TB-focus" style="margin:0 auto">
    <div class="hd">
        <ul>
            <li class="on">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
        </ul>
    </div>
    <div class="bd">
        <ul style="position: relative; width: 488px; height: 22px;">
            <li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;">
                <a href="http://www.SuperSlide2.com" target="_blank">
                    <img src="http://www.superslide2.com/otherDemo/2.1/images/1.png">
                </a>
            </li>
            <li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;">
                <a href="http://www.SuperSlide2.com" target="_blank">
                    <img src="http://www.superslide2.com/otherDemo/2.1/images/2.jpg">
                </a>
            </li>
            <li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;">
                <a href="http://www.SuperSlide2.com" target="_blank">
                    <img src="http://www.superslide2.com/otherDemo/2.1/images/3.jpg">
                </a>
            </li>
            <li style="position: absolute; width: 488px; left: 0px; top: 0px;">
                <a href="http://www.SuperSlide2.com" target="_blank">
                    <img src="http://www.superslide2.com/otherDemo/2.1/images/4.jpg">
                </a>
            </li>
            <li style="position: absolute; width: 488px; left: 0px; top: 0px; display: none;">
                <a href="http://www.SuperSlide2.com" target="_blank">
                    <img src="http://www.superslide2.com/otherDemo/2.1/images/5.jpg">
                </a>
            </li>
        </ul>
    </div>
</div>
</body>
</html>