JavaScript仿商城实现图片广告轮播实例代码

大家在逛购物商城的时候不知道有没有注意到商城首页上面都会有各种轮播广告,效果非常好,下面小编给大家整理特此分享给大家学习。具体内容如下所示:

1.HTML框架

如下图,分为三个部分,首先有个div承载,然后一个ul存放图片,一个ul存放数字,再两个button即可

    • 1
    • 2
    • 3
    • 4
    • 5
  • 2.CSS配置

    首先外框div要设置和图片大小一致,并且居中对齐,position设置为相对定位,因为后面的图片什么的都是相对这个大框来绝对定位的

    接着设置图片,五张图片叠加这个通过absolute这个属性来实现,因为上面我们把父级容器设置为relative,所以里面的子元素都是相对父级div来绝对定位的

    接下来的其他元素我会用注释写到代码

    属性会使得text-align失效,所以下面手动写上宽度即可*/ position: absolute; width: 100%; bottom:0; text-align: center; } .num li{ width: 20px; height: 20px; /*行高这个属性使得元素垂直居中*/ line-height: 20px; text-align: center; /*inline-block使得所有元素按行排列*/ display: inline-block; background-color: #4a4a4a; color: #fff; border-radius: 50%; /*鼠标放上去会有小手*/ cursor: pointer; } /*鼠标放到图片上的时候才显示btn*/ .out:hover .btn{ display: block; } .btn{ width: 30px; height: 50px; position: absolute; display: none; /*通过top和margin来定位属性到垂直居中*/ top: 50%; margin-top: -30px; border: 0; /*使用rgba可以修改透明度*/ background-color: rgba(0,.5); color: #fff; } .right{ right: 0; }

    效果如下:

    3.jquery控制轮播

    实现手动轮播

    意思就是鼠标移到下面数字,就显示对应的图片

    页面的时候让第一个图片显示 $(".num li").eq(0).addClass("active");//给序号为1的加上红色背景 $(".num li").mouSEOver(function () { //当前的数字显示红色背景,其他的数字都隐藏背景 $(this).addClass("active").siblings().removeClass("active"); //当前数字对应的图片显示,其他图片都隐藏 var index = $(this).index(); $(".img li").eq(index).stop().fadeIn(300).siblings().stop().fadeOut(300); })

    实现自动轮播

    自动轮播 var i = 0;//计时器控制数字 var t = setInterval(move,1500); //该方法显示与序号对应的图片 function move() { if (++i ==5){ i = 0; } $(".num li").eq(i).addClass("active").siblings().removeClass("active"); $(".img li").eq(i).stop().fadeIn(300).siblings().stop().fadeOut(300); } //鼠标移入后停止自动轮播 $(".out").hover(function () { clearInterval(t); },function () { t = setInterval(move,1500); });

    实现点击轮播

    动态控制li数字显示数量

    通过图片数量控制标签数量即可

    数量 var size = $(".img li").size(); for (var k=1;k<=size;k++){ $(".num").append("
  • "+k+"
  • "); } $(".num li").eq(0).addClass("active");

    相关文章

    事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
    js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
    什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
    @ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
    搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
    首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...