• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

基于jquery实现轮播图效果

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

本文实例为大家分享了jquery实现轮播图效果的具体代码,供大家参考,具体内容如下

轮播图左切换原理图

黄色的方框表示的是  slides ,而  slide 表示的是所有轮播图的父亲,每个灰色的方框表示的是每一个轮播图。

<div id="slides">
 <div id="slide">
 <div></div>
 <div></div>
 <div></div>
 </div>
</div>

对于 step 1 我们首先要使用 CSS 中 overflow 属性隐藏处于 firstDiv 后的盒子,如果我们不这么做,那么很明显,后方图片会被显示出来,也就达不到我们需要的效果。

对于 step 2 我们可以把它分为以下步骤:

1、左移动所有轮播图的父亲 slide
2、将 s l i d e slideslide 中的第 一 个 儿 子 第一个儿子第一个儿子删除
3、并把第一个儿子添加到 slide 中儿子的尾部
每次点击 leftMove 按钮时重复 step 2,即可实现左移效果。

轮播图右切换原理图

rightMove 的执行步骤:

1、删除最后一个儿子
2、把最后一个儿子添加到头部
3、右移 s l i d e slideslide(即把 slide 的 left 设为 0)

实现代码

<!DOCTYPE html>
<html lang="zh">
<head>
 <meta charset="UTF-8" />
 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 <meta http-equiv="X-UA-Compatible" content="ie=edge" />
 <title>Document</title>
 <style>
 #container {
 position: relative;
 width: 200px;
 height: 100px;
 background: #000;
 overflow: hidden;
 display: inline-block;
 }
 #container .img {
 position: absolute;
 width: inherit;
 height: inherit;
 } 
 #container .img > div {
 position: absolute;
 width: inherit;
 height: inherit;
 color: #fff;
 }
 #container .img > div:first-child {
 left: 0;
 }
 #container .img > div:nth-child(2) {
 left: 100%;
 }
 #container .img > div:last-child {
 left: 200%;
 }
 #container .img > div img {
 width: 200px;
 height: 100px;
 }
 </style>
</head>
<body>
 <button id="prev"><</button>
 <div id="container">
 <div class="img">
 <div><img src="img/1.jpg"></div>
 <div><img src="img/2.jpg"></div>
 <div><img src="img/3.jpg"></div>
 </div>
 </div>
 <button id="next">></button>
 <script src="js/jquery.js"></script>
 <script>
 function imgLeftMove() {
 $(".img").animate({
 left:"-=200"
 }, 1000, function() {
 // 将第一个图片删除,并添加到图片末尾
 $( $(".img > div")[0] ).remove().appendTo( $(".img") );
 // 设置 div 的left为0
 $( $(".img") ).css("left", "0px");
 });
 }
 
 function imgRightMove() {
 // 将最后一个图片删除,并添加到图片头部
 $(".img > div").last().remove().prependTo( $(".img") );
 // 把div left设置为-200px
 $(".img").css("left", "-200px");
 $(".img").animate({
 left: "0px"
 }, 1000);
 }
 
 $("#prev").click(imgLeftMove);
 $("#next").click(imgRightMove);
 
// setInterval(imgLeftMove, 3000);
 </script>
</body>
</html>

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


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
小程序实现商品属性选择或规格选择发布时间:2022-02-05
下一篇:
基于jquery实现日历效果发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap