服务器之家:专注于服务器技术及软件下载分享
分类导航

node.js|vue.js|jquery|angularjs|React|json|js教程|

服务器之家 - 编程语言 - JavaScript - jquery - 使用jquery实现轮播图效果

使用jquery实现轮播图效果

2021-12-24 15:05爱吃糖果儿哒莲 jquery

这篇文章主要为大家详细介绍了使用jquery实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

今天给大家分享的是利用jquery实现轮播图的效果,废话不多说咯,直接上代码,当然每行代码会有注释了,这样也便于理解哦。

第一步:先引进jquery文件

?
1
<script src="./jquery.js"></script>

第二步:html样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<div id="banner">
  <!-- 图片 -->
  <ul id="banner_img">
   <li>
    <img src="./img/1.jpg" alt="">
   </li>
   <li>
    <img src="./img/2.jpg" alt="">
   </li>
   <li>
    <img src="./img/3.jpg" alt="">
   </li>
   <li>
    <img src="./img/4.jpg" alt="">
   </li>
  </ul>
  <!-- 圆点 -->
  <ul id="banner_yuandian">
   <li class="active">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
  </ul>
  <!-- < >箭头指向 -->
  <button id="banner_back"><</button>
  <button id="banner_next">></button>
 </div>

第三步:css样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<style>
  *{
   margin: 0;
   padding: 0;
   list-style: none;
  }
  #banner{
   position: relative;
  }
  /*图片样式 */
  #banner #banner_img{
   width: 300px;
   height: 300px;
   border: 2px red solid;
  }
  #banner #banner_img img{
   width: 300px;
   height: 300px;
  }
  #banner #banner_img>li{
   display: none;
  }
  #banner #banner_img :first-child{
   display:block;
  }
  /* 圆点样式 */
  #banner_yuandian{
   position: absolute;
   bottom: 10px;
   display: flex;
   margin-left: 35px;
 
  }
  #banner_yuandian li{
   margin-left: 30px;
   width: 20px;
   height: 20px;
   border: 1px red solid;
   border-radius: 50%;
   text-align: center;
  }
  #banner_yuandian li:hover{
   background: orange;
  }
  #banner_yuandian .active{
   background: orange;
  }
  /* 箭头样式 */
  #banner_back{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
  }
  #banner_next{
   width: 30px;
   height: 30px;
   position: absolute;
   margin-top: -150px;
   margin-left: 273px;
  }
</style>

第四步:js样式

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<script>
  
  //设置图片,圆点,箭头共同的下标 从0开始
  var index=0;
 
  //封装轮播的函数 第一步
  function show(){
   //下标每次+1增加
   index+=1;
   //如果下标大于等于图片的长度数,返回第一张图,即是下标index=0就行
   if(index>=$("#banner_img>li").length){
    index=0;
   }
 
   //让li的每张图片点击时显示自己,其他兄弟隐藏
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //圆点的下标也需要封装一下样式
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  }
 
  //利用计时器达到轮播效果 第二步
  var x=setInterval(show,2000);
 
  //鼠标移动到图片上时清除计时器,移出之后重新加入计时器
  $("#banner_img>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )
 
 
  //圆点设置,点击圆点,切换相应图片 第三步
  $("#banner_yuandian>li").on("click",function(){
   //点击圆点时的下标取共同下标
   var index=$(this).index();//出错的地方index()语法
 
   //点击下标时展现对应的图片,其他兄弟图隐藏
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //点击圆点,添加样式,其他删除
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
  
  })
 
  //鼠标滑动上去滑动出来要清除计时器和再次设置计时器 第四步
  $("#banner_yuandian>li").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
   }
  )
   
 
  //箭头设置 第五步
  
  $("#banner_back").on("click",function(){
   //点击一次减去1
   index--;
   //当下标小于0时,就返回第一张图
   if(index<0){
    index=0;
   }
 
   
   //点击下标时展现对应的图片,其他兄弟图隐藏
   $("#banner_img>li").eq(index).show(1000).siblings().hide(1000);
   //点击圆点,添加样式,其他删除
   $("#banner_yuandian>li").eq(index).addClass("active").siblings().removeClass("active");
 
  })
  //下一张 可以直接调用
  $("#banner_next").on("click",function(){
   show();
  })
 
  //点击button按钮再次清除计时器和添加计时器
  $("button").hover(
   function(){
    clearInterval(x);
   },
   function(){
    x=setInterval(show,2000);
 }
)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持服务器之家。

原文链接:https://blog.csdn.net/weixin_53587096/article/details/111936865

延伸 · 阅读

精彩推荐
  • jqueryjQuery是用来干什么的 jquery其实就是一个js框架

    jQuery是用来干什么的 jquery其实就是一个js框架

    jQuery是一bai个简洁而快速的JavaScript库,可用于du简化zhi事件处理,HTML文档遍历,Ajax交互和dao动画,以更快速开发网站...

    jQuery教程网8842022-01-17
  • jqueryjquery插件实现图片悬浮

    jquery插件实现图片悬浮

    这篇文章主要为大家详细介绍了jquery插件实现图片悬浮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    阿飞超努力5802022-03-03
  • jqueryjQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

    jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能

    这篇文章主要介绍了jQuery使用hide()、toggle()函数实现相机品牌展示隐藏功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考...

    Schieber11822022-01-11
  • jqueryjquery插件实现搜索历史

    jquery插件实现搜索历史

    这篇文章主要为大家详细介绍了jquery插件实现搜索历史,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    阿飞超努力8462022-03-09
  • jqueryjQuery treeview树形结构应用

    jQuery treeview树形结构应用

    这篇文章主要为大家详细介绍了jQuery treeview树形结构应用,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    Lqq77s9342022-02-20
  • jqueryjQuery实现本地存储

    jQuery实现本地存储

    这篇文章主要为大家详细介绍了jQuery实现本地存储,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    李大璟10682021-12-16
  • jqueryjQuery实现鼠标拖动图片功能

    jQuery实现鼠标拖动图片功能

    这篇文章主要介绍了jQuery实现鼠标拖动图片功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以...

    lucascube5812022-02-10
  • jqueryjquery实现穿梭框功能

    jquery实现穿梭框功能

    这篇文章主要为大家详细介绍了jquery实现穿梭框功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...

    陈涛辉8412022-01-04