实用资源自适应电脑和手机的jQuery焦点图轮播代码

自适应电脑和手机的jQuery焦点图轮播代码

本文分享的这款焦点图幻灯片代码是最常用的图片轮播方式,没有过多花哨的效果,使用很方便,只需准备几张banner图片即可,建议使用尺寸1024*360的图片,下面是html部分,语义很明确,没有多余的代码:

<div id="slide" class="slidebox">
 <ul class="items">
  <li><a href="#"><img src="style/h1.jpg"></a></li>
  <li><a href="#"><img src="style/h2.jpg"></a></li>
  <li><a href="#"><img src="style/h3.jpg"></a></li>
  <li><a href="#"><img src="style/h4.jpg"></a></li>
 </ul>
</div>

JQuery焦点图代码.jpg

使用该款焦点图需要引入jQuery和jquery.slidebox文件:

<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script src="style/jquery.slidebox.js"></script>
<script>
jQuery(function($){
 $('#slide').slidebox({
 duration:0.3,//滚动持续时间,单位:秒
 easing:'swing',//swing,linear//滚动特效
 delay:5,//滚动延迟时间,单位:秒
 hideClickBar:false,//不自动隐藏点选按键
 clickBarRadius:10
 });
});
</script>

下面是CSS部分代码:

.slidebox {
 position:relative;
 overflow:hidden;
 margin:15px auto;
}
.slidebox img {
 width:1024px;
 max-width:100%;
 width:100%;display:block;
}
.slidebox .items {
 position:absolute;
 padding:0;margin:0;
}
.slidebox li {
 list-style:none;
 float:left;
 padding:0;margin:0;
}
.slidebox .nums {
 position:absolute;
 right:10px;
 bottom:20px;
}
.slidebox .nums a {
 display:inline-block;
 width:14px;
 height:14px;
 background-color:#fff;
 margin:15px 10px 0 0;
 box-shadow:0 0 0 2px #000;
}
.slidebox .nums a.active {
 background-color:#f73;
}

关于按钮的位置和颜色等样式都可以在CSS里修改,比较方便。

预览效果 下载地址

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/down/166.html