用jquery简单实现图片轮播效果,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
} ul {
list-style: none;
} .slideShow {
width: 600px;
height: 350px; /*其实就是图片的宽度和高度*/
border: 1px #eeeeee solid;
margin: 100px auto;
position: relative;
overflow: hidden; /*此处需要将溢出框架的图片部分隐藏*/
} .slideShow ul {
width: 3000px;
position: relative; /*此处需注意relative : 对象不可层叠,但将依据left,right,top,bottom等属性在正常文档流中偏移位置,如果没有这个属性,图片将不可左右移动*/
} .slideShow ul li {
float: left; /*让五张图片左浮动,形成并排的横着布局,方便点击按钮时的左移动*/
width: 600px;
} .slideShow .showNav {
position: absolute; /*用绝对定位给数字按钮进行布局*/
right: 10px;
bottom: 5px;
text-align: center;
font-size: 12px;
line-height: 20px;
} .slideShow .showNav span {
cursor: pointer;
display: block;
float: left;
width: 20px;
height: 20px;
background: #ff5a28;
margin-left: 2px;
color: #fff;
} .slideShow .showNav .active {
background: #b63e1a;
}
</style>
</head>
<body>
<div class="slideShow">
<ul>
<li><a href="#"><img src="data:image/pic1.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic2.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic3.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic4.png" alt=""></a></li>
<li><a href="#"><img src="data:image/pic5.png" alt=""></a></li>
</ul>
<div class="showNav">
<span class="active">1</span>
<span>2</span>
<span>3</span>
<span>4</span>
<span>5</span>
</div>
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var slideShow = $(".slideShow"), //获取最外层框架的名称
ul = slideShow.find('ul'),
showNumber = slideShow.find('.showNav span'), //获取按钮
oneWidth = slideShow.find('ul li').eq(0).width(); //获取每个图片的宽度
var timer = null; //定时器返回值,主要用于关闭定时器
var iNow = 0; //iNow为正在展示的图片索引值,当用户打开网页时首先显示第一张图,即索引值为0
showNumber.on('click', function () { //为每个按钮绑定一个点击事件
$(this).addClass('active').siblings().removeClass('active'); //按钮点击时为这个按钮添加高亮状态,并且将其他按钮高亮状态去掉
var index = $(this).index(); //获取哪个按钮被点击,也就是找到被点击按钮的索引值
iNow = index;
ul.animate({'left': -oneWidth * iNow,}) //注意此处用到left属性,所以ul的样式里面需要设置position: relative; 让ul左移N个图片大小的宽度,N根据被点击的按钮索引值iNOWx确定
}); function autoplay() {
timer = setInterval(function () { //打开定时器
iNow++; //让图片的索引值次序加1,这样就可以实现顺序轮播图片
if (iNow > showNumber.length - 1) { //当到达最后一张图的时候,让iNow赋值为第一张图的索引值,轮播效果跳转到第一张图重新开始
iNow = 0;
}
showNumber.eq(iNow).trigger('click'); //模拟触发数字按钮的click
}, 2000); //2000为轮播的时间
} autoplay();
slideShow.hover(function () {
clearInterval(timer);
}, autoplay())
})
</script>
</div>
</body>
</html>  

未完待续。。。

用jquery实现图片轮播的更多相关文章

  1. jQuery个性化图片轮播效果

    jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...

  2. PgwSlideshow-基于Jquery的图片轮播插件

    0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...

  3. jQuery.YesShow - 图片轮播插件(带图片放大功能)

    jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes">         <ul> ...

  4. (转)jquery实现图片轮播

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 基于jquery的图片轮播 (IE8以上)

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jQuery实现图片轮播

    之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...

  7. Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示

    用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...

  8. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  9. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  10. html css+div+jquery实现图片轮播

    一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...

随机推荐

  1. 阶段1 语言基础+高级_1-3-Java语言高级_09-基础加强_第1节 基础加强_4_Junit_@Before&@After

    为了演示输出一段话 测试add的方法 虽然报错了 但是打印的结果还是输出

  2. UI自动化之三种等待

    UI自动化中常用三种等待 目录 1.强制等待 2.隐式等待 3.显示等待 1.强制等待 执行到某一条语句后,然后sleep(3),等待3秒后,才会继续执行后面的语句 2.隐式等待 隐式等待只需要声明一 ...

  3. git的忽略文件语法规范

    忽略文件语法规范 空行或是以 # 开头的行即注释行将被忽略. 可以在前面添加正斜杠 / 忽略当前路径文件,但不包括子目录的同名文件. 可以在后面添加正斜杠 / 来忽略文件夹. 可以使用 ! 来否定忽略 ...

  4. 华为交换机SOCK CPU占用率高处理方法

    问题截图: 解决方法: cpu-defend policy cpu auto-defend enable auto-defend attack-packet sample 5 auto-defend ...

  5. Java学习day9面向对象编程2-方法的可变个数的参数和方法的参数传递

    一.方法的可变个数的参数. 问题:我们能够打印的信息都是来源于方法的参数,也就是形参的传递.那如何要给方法传递不同的参数? .1.采用数组形参来定义方法 public static void test ...

  6. (一:NIO系列)JAVA NIO 简介

    出处:JAVA NIO 简介 Java 中 New I/O类库 是由 Java 1.4 引进的异步 IO.由于之前老的I/O类库是阻塞I/O,New I/O类库的目标就是要让Java支持非阻塞I/O, ...

  7. 模块管理常规功能自己定义系统的设计与实现(15--进一步完好"省份"模块)

    版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/jfok/article/details/24737483 "省份"模块的进一步完 ...

  8. 显式Mapping设置与常见参数介绍

    原文:显式Mapping设置与常见参数介绍 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/ ...

  9. C#linq计算总条数并去重复的写法

    一,在实际需求中我们会存在选出了一个集合,而这时我们需要通过集合的某几个字段来计算重复,和统计重复的数量,这时我们可以用到linq来筛选和去重复. 二,如下代码: using System; usin ...

  10. EasyUI之DataGrid分页

    第一步创建分页DataGrid <table id="dg"> <thead> <tr> <th data-options="f ...