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

前端之家收集整理的这篇文章主要介绍了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");

    猜你在找的JavaScript相关文章