js jquery 轮播图的使用方法（jquery.SuperSlide）

爱被打了一巴掌 2024-04-24 21:01 2阅读 0赞

### 网站顶部轮播图demo ###

<div class="fd-fangshan-lbtDiv">
    				<img src="/${res}/img/new-lbt-title.png" class="fd-new-lbt-title">
    				<div class="fd-fangshan-lbt">
    					<div class="bd">
    						<ul class="fd-fangshan-lbt-img1"></ul>
    						<ul class="fd-fangshan-lbt-img2"></ul>
    						<ul class="fd-fangshan-lbt-img3"></ul>
    					</div>
    					<script>
    						// banner轮播图
    						jQuery(".fd-fangshan-lbt").slide({
          
    							autoPlay: true,
    							easing:"easeInQuint",
    							delayTime:700
    						});
    					</script>
    				</div>
    			</div>

/*顶部轮播图start*/
    .fd-fangshan-lbtDiv{
    	position: relative;
    }
    .fd-new-lbt-title{
    	position: absolute;
    	top: 30px;
    }
    
    .fd-fangshan-lbt{
    	position: absolute;
    	width: 500px;
    	height: 160px;
    	left: 530px;
    }
    .fd-fangshan-lbt .bd ul{
    	width: 500px;
    	height: 160px;
    }
    .fd-fangshan-lbt-img1{
    	background: url('../img/new-lbt-one.png') no-repeat;
    }
    .fd-fangshan-lbt-img2{
    	margin-left: 48px;
    	background: url('../img/new-lbt-two.png') no-repeat;
    }
    .fd-fangshan-lbt-img3{
    	margin-left: 56px;
    	background: url('../img/new-lbt-three.png') no-repeat;
    }
    /*顶部轮播图end*/

--------------------

### 基础效果： ###

###### 1、引用jQuery.js 和 jquery.SuperSlide.js ######

###### 因为SuperSlide是基于jQuery的插件，所以前提必须先引用jQuery，再引用SuperSlide ######

###### 2、编写HTML ######

###### 以下是默认的HTMl结构，分别是 “.hd” 里面包含ul， “.bd” 里面包含ul ######

<div class="slideTxtBox">
        <div class="hd">
            <ul><li>教育</li><li>培训</li><li>出国</li></ul>
        </div>
        <div class="bd">
            <ul>
                <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
                ...
            </ul>
            <ul>
                <li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
                ...
            </ul>
            <ul>
                <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
                ...
            </ul>
        </div>
    </div>

###### 3、编写CSS，为HTML赋予样色 ######

###### 认真检查您的css，保证兼容大部分浏览器前提下再调用SuperSlide ######

.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
    .slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 20px; border-bottom:1px solid #ddd;  position:relative; }
    .slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
    .slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
    .slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
    .slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
    .slideTxtBox .bd li{ height:24px; line-height:24px;   }
    .slideTxtBox .bd li .date{ float:right; color:#999;  }

###### 4、调用SuperSlide ######

###### 在本例中，请在 “.slideTxtBox” div结束后立刻调用 SuperSlide，这样会得到最好的效果，避免整个页面加载后再调用 SuperSlide； ######

###### 因为是默认HTML结构，所以参数都为默认值，不用填写titCell、mainCell等。 ######

## 更多基础效果：[superslide-More-Demo][] ##

[superslide-More-Demo]: http://www.superslide2.com/demo.html