jquery简易轮播图

来源：互联网发布：建筑设计模型制作软件编辑：程序博客网时间：2024/06/06 07:02

说到轮播图，网上五花八门，很多好看的样式。但是博主当务之急是实现这个功能，这也是刚开始接触jQuery，代码很简单（三句搞定）。下面开始正式分享，包你get到：

1，建立你想实现的HTML样式，比如位置宽高边框等。

2，新建无序列表，也就是经常看到的那个半透明的点，并且绝对定位到你想要放的位置，

3，引进jQuery库，这个可以在它的官网上下载到，然后你引入就好了。

4，利用jQuery独有的快准狠几句代码就可以完成今天的轮播图制作。

成果展示：

前台HTML部分：

<body><div id="box">   <ul>     <li><img src="img/banner4.jpg"></li>     <li><img src="img/banner2.jpg"></li>     <li><img src="img/banner3.jpg"></li>     <li><img src="img/banner1.jpg"></li>   </ul>   <ol>     <li class="current"></li>     <li></li>     <li></li>       <li></li>                         </ol></div></body>

注：这里的ul li里面放的要展示的图，ol li就是那个小点点

css部分：

<style>*{  margin:0px;  padding:0px;}#box{  width:100%;  height:280px;  position:relative;  overflow:hidden;  /*若不加这句隐藏，几张图片将纵向叠加*/  }#box ol{  position:absolute;   bottom:10px;  left:47%      } ul,ol{  list-style:none;}#box ol li{  border-radius:7px; /* css新特性（圆角）这样活生生将ol方形切成了圆形，px超过方形0.5边长就是一个圆了*/  width:10px;  height:10px;  float:left;   background-color:#666;  margin:5px;  opacity: 0.4;     /*这里透明度设置会好看一丢丢*/  border:#666 1PX solid;  line-height:20px;  text-align:center;  cursor:pointer;   /*手型*/    }  #box ol li.current{    background-color:#09F;    }</style>

前台准备好了之后，现在就来实现轮播功能了，也就是点击哪个小点对应播放哪张图

<script type="text/javascript" src="js/jquery-3.1.0.js"></script><script> $(document).ready(function(){   $("#box ol li").mouseover(function(event){     var index=$(this).index();//获取当前索引值     $("#box ul li").eq(index).fadeIn().siblings().hide();//当前的eq个图淡入fadein，其他图隐藏     $(this).addClass('current').siblings().removeClass('current');       //鼠标放在哪个点上，哪个点实现current的css特性，此时其他点移除这个特性   }) });</script>

被我这么一解说是不是很简单啊，都get到了嘛？

0 0