用jquery来实现轮播图效果

效果展示

首先就是布局，在这里面我们会使用div，ul，li等多个标签，

一.html部分的代码如下

 <div class="bigbox"><div class="dianji"><li class="left">&lt;</li><li class="right">&gt;</li></div><ul><!-- 真正要轮播的只有这5张图片 --><li><img src="data:imagess3/gui.jpg" alt=""></li><li><img src="data:imagess3/other.jpg" alt=""></li><li><img src="data:imagess3/huo2.jpg" alt=""></li><li><img src="data:imagess3/long.jpg" alt=""></li><li><img src="data:imagess3/qian.jpg" alt=""></li></ul><ol><li class="current"></li><li></li><li></li><li></li><li></li></ol></div>

注意我们要在最后加上一张和第一张重复的图片，方便后续功能的实现
ol中装的li时下面的小圆点，left，right分别就是左右切换按钮

二 .css部分如下

 <style>/* 首先要去除默认浏览器的样式 */* {margin: 0px;padding: 0px;}li {list-style: none;}.bigbox {cursor: pointer;overflow: hidden;position: relative;width: 720px;height: 450px;background-color: pink;margin: 150px auto;}/* 设置盒子的宽度，，让其在页面中间的位置显示，并且增加绝对定位， *//* 为后面左右箭头的设置铺垫 *//* 左右箭头设置绝对定位，子绝父相*/.bigbox ul {position: absolute;left: 0px;width: 5000px;height: 455px;}/* 给ul中的宽度设置的宽一些 *//* ，因为我们刚开始为了方便观看要将多个图片在一行显示 */.bigbox ul li {width: 720px;float: left;}/* 让每一个li浮动，并且设置宽度和大盒子bigbox一样宽 */.bigbox .dianji li {display: none;z-index: 99;cursor: pointer;position: absolute;top: 200px;width: 25px;height: 35px;color: #fff;line-height: 35px;text-align: center;border-radius: 8px;background-color: rgba(0, 0, 0, .4);}/* 注意我们要给左右两个点击事件增加绝对定位， *//* 然后给他们的父级元素增加相对定位，来实现位置的设置 */.bigbox .left {left: 0px;}.bigbox .right {right: 0px;}/* 设置两个切换按钮的位置 *//* 注意他们两个相同的一些属性我放在了一起集中统一写了*/.bigbox ol {position: absolute;bottom: 30px;left: 60px;display: flex;align-items: center;justify-content: center;width: 80px;height: 15px;border-radius: 5px;background-color: rgba(0, 0, 0, .3);}/* 设置ol的位置，采用了flex布局来实现子元素的水平和垂直居中 *//* 同时也采用了绝对定位来设置位置 */.bigbox .current {background-color: #ff5000}.bigbox ol li {cursor: pointer;float: left;margin: 0px 3px;width: 8px;height: 8px;border-radius: 50%;background-color: #fff;}/* 对ol中的li的设置，也就是对小圆点的设置 */</style>

三. jQuery实现

废话不多i说，直接上代码

  <script>$(function() {var index = 0;// 建立图片的索引号var timer = null;//   建立一个定时器var option = $('.bigbox>ul>li').length;// 获取轮播的图片的长度var $li = $('<li><img src = "imagess3/gui.jpg" alt = ""</li>')$('.bigbox>ul').append($li);// 新建一个图片和第一张重复，追加到最后面var imgwidth = $('.bigbox ul li').width();//获取图片的宽度//当鼠标移入时两侧的箭头显现，移除时消失并且移入时定时器停止，移            除时定时器开启$(".bigbox").hover(function() {$(".dianji li").show();clearInterval(timer)}, function() {$(".dianji li").hide();go();})console.log(option);//设置定时器，并用go函数封装，实现函数的自动播放function go() {timer = setInterval(function() {if (index < option) {index++;// 当索引号小于图片张数时，索引号加一$(".bigbox ul").stop().animate({left: -imgwidth * index + 'px'})}if (index == option) {$(".bigbox ul").stop().animate({left: -imgwidth * index + 'px'})index = 0;$(".bigbox ul").animate({left: -imgwidth * index + 'px'}, 0)}console.log(index);//  实现下边小圆点的切换$("ol li").eq(index).addClass('current').siblings().removeClass();}, 3000)}//右侧点击事件function right() {$(".right").click(function() {if (index < option) {index++;// 当索引号小于图片张数时，索引号加一$(".bigbox ul").stop().animate({left: -imgwidth * index + 'px'})}if (index == option) {$(".bigbox ul").stop().animate({left: -imgwidth * index + 'px'})//当索引号等于图片张数时，这时候放到了重复的那张图片.这个时候可以先执行动画函数让其到这张重复的图片，
//然后让索引号变为0，快速的跳转到真正第一张图index = 0;$(".bigbox ul").animate({left: -imgwidth * index + 'px'}, 0)}console.log(index);//  实现下边小圆点的切换$("ol li").eq(index).addClass('current').siblings().removeClass();})}right();//调用函数right// 左侧点击事件function left() {$(".left").click(function() {if (index > 0) {index--;$(".bigbox ul").animate({left: -imgwidth * index + 'px'})} else if (index == 0) {index = option;$(".bigbox ul").animate({left: -imgwidth * index + 'px'}, 0)index = option - 1;$('.bigbox ul').animate({left: -imgwidth * index + 'px'})}//同样的在左侧点击事件中，当此时是在第一张图时，让index=option（图片书）//相当于是最后一张虚拟图（和第一张重复）//那么先快速的跳转到虚拟的第一张图，然后让索引号减一。//接下来在执行动画函数，此时就切换到了最后一张图$("ol li").eq(index).addClass('current').siblings().removeClass();console.log(index);})}left();//调用函数left// 点击小圆点实现图片的跳转$("ol li").click(function() {index = $(this).index();$(".bigbox ul").animate({left: -imgwidth * index + 'px'})$("ol li").eq(index).addClass('current').siblings().removeClass();})})</script>

用jquery来实现轮播图效果相关推荐

高仿阴阳师官网轮播图效果的jQuery插件
代码地址如下: http://www.demodashi.com/demo/12302.html 插件介绍这是一个根据阴阳师官网的轮播效果所扒下来的轮播插件,主要应用于定制个性化场景,目前源码完全公 ...
jQuery实现常见的轮播图效果
1.在网页中常见的一类轮播图如下图所示, 此处以小米官网(www.mi.com)为例进行说明说明:红色箭头标注的是左.右箭头:右下角蓝色箭头标注的是可以控制图片播放顺序的小圆点: 2.轮播图的特点 ...
Jquery实现轮播图效果
Jquery实现轮播图效果首先是html <div id="box"><img src="./day6/am/轮播图/img/1.jpg" ...
用jQuery实现轮播图效果（自动播放，能手动切换）
大家好,今天我和大家分享一下轮播图的实现,下面是我做的轮播图效果首先我们看到,它是由背景图片.方向图标和指示器组成.**我们发现背景图片.方向图标和指示器是层叠在一起的,所以布局时我们要用绝对定位. ...
html轮播台袋效果,css3百叶窗轮播图效果
标题 #Con{width:900px; /*宽度*/ height:500px;/*高度*/ background:#9933FF;/*背景颜色*/ position:relative;} #con ...
jquery手写轮播图_用jQuery如何手写一个简单的轮播图？（附代码）
用jQuery如何手写一个简单的轮播图?下面本篇文章通过代码示例来给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 用 jQuery 手写轮播图先上个效果截图: 主要 ...
html5carousel图片轮播,jquery 3d Carousel轮播图插件
jQuery-Waterwheel-Carousel是一款jquery 3d Carousel轮播图插件.该jquery Carousel轮播图插件兼容ie8浏览器,提供丰富的参数和API方法由于控制 ...
jquery手写轮播图_jquery 轮播图怎么写
jquery轮播图的实现方法:首先创建一个放置的盒子"p.focus":然后将overflow设置为hidden:接着通过javascript实现点击左右翻页切换图片的功能即可. ...
php自动轮播图代码,JavaScript如何实现动态轮播图效果？（代码示例）
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过左右侧箭头显示,鼠标离开 ...

用jquery来实现轮播图效果

一.html部分的代码如下

二 .css部分如下

三. jQuery实现

用jquery来实现轮播图效果相关推荐

最新文章

热门文章