php制作小米轮播图,小米商城轮播图的实现

小米商城轮播图

用了div+css+js+jsjquery

要引入jquery库

• 

• 

• 

• 

• 

1

2

3

4

5

<

>

• 手机 电话卡

  >

• 电视 盒子

  >

• 笔记本 平板

  >

• 家电 插线板

  >

• 出行 穿戴

  >

• 智能 路由器

  >

• 电源 配件

  >

• 健康 儿童

  >

• 耳机 音箱

  >

• 生活 箱包

  >

CSS方面

.Container{width:1170px;

margin:0 auto;

padding:0;

cursor:pointer;

}

.lunbo{

height:460px;

position:relative;

z-index:9;

}

ul li {list-style: none;}

img{border:1;}

.clearBoth{clear:both;}

.leftfix{float:left}

.rightfix{float:right}

a{

text-decoration: none;

}

//轮播图

.play{

margin:0 auto;

width:1170px;

height:460px;

position:relative;

}

.play ul{

list-style:none;

margin:0;

padding:0;

}

.play img{

width:1170px;

height:460px;

display:block;

}

.imgList li{

position:absolute;

opacity:0;

transition: opacity 1s;

top:0;

left:0;

}

.imgList li.current{

opacity:1;

}

.play-list{

position:absolute;

bottom:20px;

right:20px;

}

.play-list span{

float:left;

width:12px;

height:12px;

border:1px solid #999;

background: #999;

border-radius: 7px;

font-size: 0;

margin-right: 5px;

cursor: pointer;

}

.play-list span.current{

background:red;

}

.slide{ position:absolute;

color:#fff;

background:rgba(0,0,0,.6);

height:80px;

width:40px;

top: 50%;

line-height: 80px;

text-align: center;

opacity:0.5;

cursor:pointer;

font-weight: bold;

font-size: 20px;

transform: translate(0, -50%);

transition:0.3s;

}

.slide:hover {

opacity: 1;

}

.slide-left{

left:234px;

}

.slide-right{

right:1px;

}

/*轮播图侧边栏site-category*/

.site-category{background:rgba(0,0,0,0.6);

position:absolute;

width:234px;

font-size:14px;

z-index:12;

top:0;

left:0;

}

.site-category ul{

margin: 0;

padding: 0;

}

.site-category li{

height:46px;

line-height:46px;

color:#fff;

cursor: pointer;

}

.site-category li:hover{

background:#ff6700;

}

.site-category-list{

float:left;

}

.gtIcon{

float:right;

margin-right:20px;

}

.site-category li .site-category-list{

margin-left:20px;

}

JS方面

$(function(){

var num=0; //循环变量,定义图片页数

var delay = 1500; //播放时间间隔

var length = 5; //图片张数

function playImage(n){

$('.play .imgList li').removeClass('current').siblings().eq(n).addClass('current');

$('.play-list span').removeClass('current').siblings().eq(n).addClass('current');

}

function scrollPicsPlay(){

num++;

if (num>=length){

num=0;

}

playImage(num);

}

//3..设置图片播放时间间隔

var timeSpan = setInterval(scrollPicsPlay,delay);

//设置属性

//4.1.鼠标悬浮 不轮播

$('.play').on('mouseenter', function(){

clearInterval(timeSpan);

}).on('mouseleave', function(){

timeSpan = setInterval(scrollPicsPlay, delay)

});

//4.2给圆点按钮绑定事件

$('.play-list span').on('click', function(){

num = $(this).index();

playImage(num);

});

//4.3.右边图片绑定事件

$('.slide-right').on('click', function(){

num++;

if (num >= length) {

num = 0;

}

playImage(num)

});

//4.4.左边图片绑定事件

$('.slide-left').on('click', function(){

num --;

if (num < 0) {

num = length-1

}

playImage(num)

});

});

用到了div+css+jsjquery库

首先是整体的div确定轮播图的区域，里面裹着ul标签再有几个

li标签用于显示图片，ul下面有个两个div标签存放

圆点和左右箭头

css方面

用了z-index属性写在后面的将会覆盖前面的

这里还设置了opacity透明度属性，当前图片设置1然后

到下一张时li标签的属性设置的是0就完全透明看不到

这里有一个transition：opacity 1s属性

js方面

导入jQuery

首先要导入JavaScript插件jQuery库，

这个函数在DOM整体加载完后实现($(function){})

播放图片函数-----获取图片位置信息并将当前图片切换

到下一张图片

循环轮播函数-----判断当前图片如果大于图片个数则置为0，继续

执行上一个函数达到循环播放

设置了图片的播放时间间隔1.5s

还有一个属性鼠标悬浮时，清除时间不在轮播。

底部按钮和图片的关联，使用了index() 函数，它是通过点击小圆点，

获取到是第几个标签，然后，将这个数字也给图片，

这样，每个按钮就有专属的图片了。左右箭头按钮就相当于是依次点击小圆点。

图片的切换，就是使用jQuery中自带的 fadeIn() fadeOut(),发现和官网的看不

出有什么区别，

就直接用了，还有一个就是 siblings() 函数，

相当于是个反选，

底部小圆点，方法和上面图片切换类似，也是选中当前的一个，设置样式，然

后反选，去除样式便可以。

左右小箭头，实现方法和底部小圆点一样，只是，官网使用了精灵图，所以样

式设置上有一丢丢的不同。