轮播图在很多网站都会出现,有横向轮播图、纵向轮播图、淡入淡出轮播图、3D轮播图……等等
本站使用的是JQ制作的轮播图。 接下来我们用一个简单的JQ程序实现简单的轮播切换
准备工具:
1.JQ类库一份
2.html编辑器
3.浏览器(推荐最新火狐或谷歌)
远离IE—珍爱生命
如果有JQ类库的小伙伴就不用管下面这一步,如果没有JQ的可以用下面这个代码使用百度的JQ
//使用百度jq类库 <script src="https://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
过程很快的,不会太麻烦,CSS和HTML我会直接发出来并写上一些重要的注释,该文章主要是用JQ
<div class="container"> <div class="pic">//4张轮播图片 start <div class="content" style="display:block;">//单独的一个图片div设置默认显示 <a href="#"> <img src="img/1.jpg" alt=""/> </a> </div> <div class="content"> <a href="#"> <img src="img/2.jpg" alt=""/> </a> </div> <div class="content"> <a href="#"> <img src="img/3.jpg" alt=""/> </a> </div> <div class="content"> <a href="#"> <img src="img/4.jpg" alt=""/> </a> </div> </div>//4张轮播图片 end <div class="btn"> <ul> <li class="but"></li>//单独的一个类设置默认样式 <li></li> <li></li> <li></li> </ul> </div> </div>
css:
*{ margin:0;//初始化就不说了 padding:0; } .container{ width:400px;//设置整个包裹图片和按钮的盒子宽度高度以及居中显示 height:200px; margin:20px auto 0; } .content{//所有的图片都初始化为不显示,并设置绝对定位 PS:第一张图在html中设置display:block;默认显示 display:none; position:absolute; } .content a img{//设置图片默认宽度高度 width:400px; height:200px; } /*轮播按钮*/ .btn{ position:relative;//使用相对定位设置 右浮动 距离顶部定位180px float:right; top:180px; z-index: 9999;//设置按钮在最顶层 以免按钮被淹没在图片最下面 } .btn ul li{ width:10px; height:10px; border-radius:50%;//圆形按钮 list-style-type:none;//初始化li圆点 display:inline-block;//横向排列 其实左浮动也可以 background: #9e9d9c; cursor:pointer; } /*轮播时按钮样式*/ .btn ul li.but{//JQ使用的时候点击按钮改变颜色 background: #53baff; }
最重要的JQ脚本 其实轮播的jq很简单,只有几行代码即可实现轮播效果
<script type="text/javascript"> var i = 0;//设置i并初始化为0(因为程序都是0开始的) $(".btn ul li").click(function () { //当轮播下面的按钮被点击的时候 i = $(this).index();//将点击的元素下标(位置,第一个为0,第二个为1……)赋值给i以便后面使用 //然后将当前图片用eq索引当前按钮位置,并淡出(消失)遍历进入第二张图片 $(".container .content").eq(i).fadeIn().siblings().fadeOut(); //使用this关键字后就可以不用eq索引了因为本身就是点击的按钮 //将当前点击的按钮类换成预先在css里面设置好的 "but"类,同样的遍历之后清除此类 $(this).addClass("but").siblings().removeClass("but"); //之后。。一个简单的点击轮播图实现了 }); //轮播图毕竟是要自动轮播的接下来就用js的定时函数setInterval()来定时更换轮播的图片与按钮的类 function start() {//自定义函数 start()用来定时更换 i++;//将全局变量i自增1 if (i > 3)//判断如果大于3(因为只有4张图片 0 1 2 3) i = 0;//就把i初始化为0(转到第一张图片) $(".container .content").eq(i).fadeIn().siblings().fadeOut();//之后的和点击一样了,可以看看上面的 //此处需要注意,因为是自动轮播的,所以需要用eq来索引当前图片的位置,来修改按钮类 $(".btn ul li").eq(i).addClass("but").siblings().removeClass("but"); } setInterval("start()", 3000); </script>
然后就……没有然后了……一个简单的自动、点击轮播图就做完了,本站的轮播图添加了左右切换……这个原理也是很简单的,判断当前i位置在根据图片数量进行切换
17条评论登录后可见