jQuery实现轮播图效果

 更新时间:2019年11月26日 10:37:02   作者:有一个进大厂的梦   我要评论
这篇文章主要为大家详细介绍了jQuery实现轮播图效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

使用jQuery实现轮播图,废话不多说,直接上代码了。

HTML部分

其中,图片和路径是我电脑中的,你需要自己准备好图片,然后写你自己图片的路径。

<div class="slider">
 <ul>
 <li><a href="#" ><img src="images/1.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/2.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/3.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/4.jpg" alt=""></a></li>
 <li><a href="#" ><img src="images/5.jpg" alt=""></a></li>
 </ul>
 
 <div class="arrow">
 <span class="left"><</span>
 <span class="right">></span>
 </div>

 <div class="box">
 <ul>
 <li class="show"></li>
 <li></li>
 <li></li>
 <li></li>
 <li></li>
 </ul>
 </div>
</div>

CSS部分

* {
margin: 0;
padding: 0;
list-style: none;
}

.slider {
width: 790px;
height: 340px;
margin: 100px auto;
position: relative;
}

.slider>ul>li {
display: none;
position: absolute;
}

.slider li:first-child {
display: block;
}

.arrow {
display: none;
}

.slider:hover .arrow,
.slider:hover .box {
display: block;
}

.left,
.right {
width: 30px;
height: 60px;
font-size: 30px;
background-color: rgba(0, 0, 0, 0.1);
color: white;
position: absolute;
top: 50%;
margin-top: -30px;
line-height: 60px;
text-align: center;
cursor: pointer;
}

.left:hover,
.right:hover {
background-color: rgba(0, 0, 0, .5);
}

.left {
left: 0;
}

.right {
right: 0;
}

.box {
width: 150px;
height: 20px;
position: absolute;
left: 50%;
margin-left: -75px;
bottom: 20px;
display: none;
}

.box li {
width: 12px;
height: 12px;
background-color: white;
border-radius: 50%;
display: inline-block;
float: left;
margin-left: 12px;
}

.show{
background-color: orangered !important;
}

JS部分

你要引入jQuery这个库,然后才能使用它。我这里的jQuery库版本是jquery-1.12.4。

$(function() {
var num = 0;
$(".right").click(function() {
num++;
if (num === $(".slider>ul>li").length) {
num = 0;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
});

$(".left").on("click", function() {
num--;
if (num === -1) {
num = $(".slider>ul>li").length - 1;
}
$(".slider li").eq(num).fadeIn().siblings("li").fadeOut();
$(".box li").eq(num).addClass("show").siblings("li").removeClass("show");
});

$(".box li").on("click", function() {
var idx = $(this).index();
$(".slider li").eq(idx).fadeIn().siblings("li").fadeOut();
$(".box li").eq(idx).addClass("show").siblings("li").removeClass("show");
});
});

效果图

以上就是jQuery实现轮播图效果的所有代码,希望对您有帮助!

更多关于轮播图效果的专题,请点击下方链接查看学习

javascript图片轮播效果汇总

jquery图片轮播效果汇总

Bootstrap轮播特效汇总

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

相关文章

  • jquery cookie的用法总结

    jquery cookie的用法总结

    本篇文章主要是对jquery cookie的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2013-11-11
  • IE8下Jquery获取select选中的值post到后台报错问题

    IE8下Jquery获取select选中的值post到后台报错问题

    IE8下出现的问题是直接将selectedValue post发送到后台,后台接收时会报错,这是因为IE8下selectedValue当成了数组,后台无法识别
    2014-07-07
  • 简单实现jQuery级联菜单

    简单实现jQuery级联菜单

    这篇文章主要为大家详细介绍了如何简单实现jQuery级联菜单,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-01-01
  • jquery实现简单的无缝滚动

    jquery实现简单的无缝滚动

    这里给大家分享的是使用jQuery实现简单的无缝滚动的效果,其思路是我们通过js控制 ul 标签的margin 来实现滚动。横向滚动则是控制 margin-left ; 纵向滚动则是控制 margin-top;,有需要的小伙伴可以参考下。
    2015-04-04
  • 利用jQuery解析获取JSON数据

    利用jQuery解析获取JSON数据

    这篇文章主要为大家详细介绍了利用jQuery解析获取JSON数据的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-04-04
  • jQuery插件jRumble实现网页元素抖动

    jQuery插件jRumble实现网页元素抖动

    jRumble是jquery的插件,可以让你选择的元素抖动。 调用时只需一句代码即可,有些抖动效果还挺可爱,可自定义的抖动效果,十分的炫酷,有需要的小伙伴可以参考下。
    2015-06-06
  • JQuery伸缩导航练习示例

    JQuery伸缩导航练习示例

    伸缩的导航有不少优点的,可以在有限的空间里容下很多的内容,下面有个不错的示例用到JQuery,感兴趣的朋友可以参考下
    2013-11-11
  • jquery表单提交带错误信息提示效果

    jquery表单提交带错误信息提示效果

    本篇文章主要介绍了jquery表单提交带错误信息提示效果的实例,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • Easyui笔记2:实现datagrid多行删除的示例代码

    Easyui笔记2:实现datagrid多行删除的示例代码

    本篇文章主要介绍了Easyui笔记2:实现datagrid多行删除,详细介绍了完成一个多行勾选并删除的功能。有兴趣的可以了解一下。
    2017-01-01
  • 基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    基于Jquery的文字滚动跑马灯插件(一个页面多个滚动区)

    文字逐行或多行滚动跑马灯插件,基于Jquery。命名为Jquery.RollTitle。支持在一个页面声明多个滚动区 (就为了要这点才写了这个)
    2010-07-07

最新评论