jquery简易轮播图

最新推荐文章于 2022-09-03 10:39:40 发布

ljw_Josie

最新推荐文章于 2022-09-03 10:39:40 发布

阅读量581

点赞数 1

分类专栏： web前端取经路上要好好学jQuery

本文链接：https://blog.csdn.net/ljw_Josie/article/details/52433131

版权

web前端取经路上同时被 2 个专栏收录

30 篇文章 0 订阅

订阅专栏

要好好学jQuery

3 篇文章 0 订阅

订阅专栏

说到轮播图，网上五花八门，很多好看的样式。但是博主当务之急是实现这个功能，这也是刚开始接触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到了嘛？

ljw_Josie

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery简易轮播图

说到轮播图，网上五花八门，很多好看的样式。但是博主当务之急是实现这个功能，这也是刚开始接触jQuery，代码很简单（三句搞定）。下面开始正式分享，包你get到：1，建立你想实现的HTML样式，比如位置宽高边框等。2，新建无序列表，也就是经常看到的那个半透明的点，并且绝对定位到你想要放的位置，3，引进jQuery库，这个可以在它的官网上下载到，然后你引入就好了。4，利用jQuer
复制链接

扫一扫

专栏目录