logo

哈达波斯网|专注网站

脚本

SuperSlide全屏100%宽度自适应焦点图jquery

脚本  2018/4/10 19:34:37  管理员  

全屏100%宽度自适应焦点图jquery插件感谢大话主席作者的贡献。感谢这个插件。自适应焦点图很不错。所以我收藏了下。喜欢的话你也可以下载一个。

<div class="block_home_slider">
  <div id="home_slider" class="flexslider">
    <ul class="slides">
      <li>
        <div class="slide"> <img src="image/pic_home_slider_1.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
      <li>
        <div class="slide"> <img src="image/pic_home_slider_2.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
      <li>
        <div class="slide"> <img src="image/pic_home_slider_3.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
      <li>
        <div class="slide"> <img src="image/pic_home_slider_4.jpg" alt="" />
          <div class="caption">
            <p class="title">国内金准营销服务中心</p>
            <p>90天让您的网站升级100倍。国内金准营销服务中心.国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心国内金准营销服务中心</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
<script type="text/javascript">
$(function () {
$('#home_slider').flexslider({
	animation : 'slide',
	controlNav : true,
	directionNav : true,
	animationLoop : true,
	slideshow : false,
	useCSS : false
});

});
</script> 
</div>


css

.block_home_slider {
	padding: 1px;
	position: relative;
	background-color: #ffffff;
	border: 4px solid #f2f2f2;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	behavior: url(js/PIE.htc); /*半透明兼容*/
	text-align: center;
	line-height: 0px;
	margin-right: auto;
	margin-left: auto;
}  /*底部小图标*/
.block_home_slider .slide {position:relative;}
.block_home_slider .caption {padding:13px 16px 12px; position:absolute; left:0px; right:0px; bottom:0px; background:url(bg_caption.png); text-align:left;}
.block_home_slider .caption p {padding-bottom:0px; font-size:11px; color:#dedede; text-shadow:0px -1px #000000; line-height:17px;}
.block_home_slider .caption p.title {padding-bottom:6px; font-size:15px; color:#ffffff; font-weight:bold; line-height:normal;}
.block_home_slider .flex-direction-nav a {width:25px; height:25px; margin-top:-27px; display:block; position:absolute; top:50%; background-repeat:no-repeat; background-image:url(sprite_arrow_2.png); text-indent:-9000px;}
.block_home_slider .flex-direction-nav a.flex-prev {left:6px; background-position:left top;}
.block_home_slider .flex-direction-nav a.flex-prev:hover {background-position:left bottom;}
.block_home_slider .flex-direction-nav a.flex-next {right:6px; background-position:right top;}
.block_home_slider .flex-direction-nav a.flex-next:hover {background-position:right bottom;}
.block_home_slider .flex-control-paging {padding-top:15px; display:inline-block;}
.block_home_slider .flex-control-paging li {
	margin: 0px;
	padding: 0px;
	float: left;
	overflow: hidden;
	list-style-type: none;
}
.block_home_slider .flex-control-paging li a {width:12px; height:12px; display:block; background-repeat:no-repeat; background-image:url(sprite_nav_3.png); text-indent:-9000px; cursor:pointer;}
.block_home_slider .flex-control-paging li a.flex-active {background-position:right top;}

.block_home_post_feature {width:300px;}
.block_home_post_feature p {padding-bottom:0px;}



.flexslider {margin: 0; padding: 0;}
.flexslider .slides > li {
	display: none;
	-webkit-backface-visibility: hidden;
	list-style-type: none;
} /* Hide the slides before the JS is loaded. Avoids image jumping */
.flexslider .slides img {width: 100%; display: block;}
.flex-pauseplay span {text-transform: capitalize;}


js加载部分

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.flexslider-min.js"></script>


网站首页  | 最新公告  | 漏洞修补  | 网站模板  | 知识文档  | 与我联系
Copyright © 2015 jlasp.com All Rights Reserved.
哈达波斯网|专注网站 版权所有
地址:吉林省吉林市昌邑区 联系QQ:383612004 联系人:董先生
未经本站授权,禁止复制或建立镜像,内容仅用于学习参考!
ICP备案号:吉ICP备15000891号-1 | 

吉公网安备 22020202000301号