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() 函数,
相当于是个反选,
底部小圆点,方法和上面图片切换类似,也是选中当前的一个,设置样式,然
后反选,去除样式便可以。
左右小箭头,实现方法和底部小圆点一样,只是,官网使用了精灵图,所以样
式设置上有一丢丢的不同。
php制作小米轮播图,小米商城轮播图的实现相关推荐
- html怎么做产品轮播图,商品轮播图是什么意思(html轮播图怎么制作)
但轮播图对用户真的有意义吗?或者它只是设计者用来偷懒,将内容一股脑塞进去的工具呢? 不论将这个问题抛向谁,他们都会告诉你,"轮播图就是个反面模式(anti-pattern)."轮播 ...
- vue pc端 商品轮播图_轮播图高点击商品图
轮播图由背景,商品图,文案三大部分组成,其中商品图是轮播图的主体内容,在轮播主图中,能不能通过一张商品图呈现出商品信息或者卖点,是影响点击率高低的重要因素.本期内容,我们将从商品图出发,为大家讲解的轮 ...
- 【uniapp】3d轮播图/堆叠轮播图/层叠轮播图
前言 uniapp 3d轮播图 uniapp实现3D轮播图 从uniapp插件市场下载插件:https://ext.dcloud.net.cn/plugin?id=243#detail 操作步骤 导入 ...
- dw html5中怎么设置图片自动切换,DW制作九宫格全屏亮灯轮播图片且自动切换图片教程...
本文介绍的是利用DW制作九宫格全屏亮灯轮播图片并且可以自动切换图片,而且点击图片时还会亮灯,推荐过来,大家一起来学习吧! 软件名称:Adobe Dreamweaver CS3 官方中文安装版软件大小: ...
- 九宫图-图片轮播-兼容IE8和Chrome浏览器
在线测试 打包下载 九宫图-图片轮播-兼容IE8和Chrome浏览器
- js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
- 一键生成轮播图,轮播图插件
一键生成轮播图,轮播图插件 简介 写练习的时候发现每次写轮播图都觉得很麻烦,突发奇想,何不写个轮播图插件,需要轮播图的时候,直接调用插件一键生成就行了!!! 于是乎,便写了以下代码(因为博主还是在校学 ...
- uni-app:多功能轮播图,堆叠试轮播,文本轮播,图文轮播
插件地址[前往] mosowe-swiper:适用于uni-app的轮播图插件 轮播组件,本插件兼容H5.APP.微信小程序.支付宝小程序 组件功能 普通轮播(文本.图片,图文轮播,支持上下.左右轮播 ...
- 英雄联盟轮播图自动轮播
六月过去了,七月还会远吗?不知不觉到了六月底的最后一天.你好,七月! 大家好,我是小陈陈呀,上次写了一篇英雄联盟轮播图手动轮播,当天晚上有很多大朋友小朋友私信小陈陈:可以在上次手动轮播的基础上,实现自 ...
最新文章
- python threading模块多线程源码示例(二)
- 10年磨一剑,软件编程走火入魔之:把简单的功能做个彻彻底底、把劳动成果重复利用...
- 关于出现org.hibernate.TransientObjectException: The given object has a null identifier: 错误的解决方法
- java反射机制关键字驱动_搭建关键字驱动自动化测试框架
- 数据结构与算法笔记(九)—— 希尔排序
- XML外部实体注入漏洞——XXE简单分析
- 官方博客明确了 .NET Core RC2/RTM 时间表
- 在matlab中xt( ),编译matlab的s函数(compiling s-functions for matlab)
- 学习笔记--Python多进程
- java安装证书文件_Java安装证书文件
- arduino霍尔编码器蓝牙小车代码
- img图片加载失败的处理
- 开发自己的DJI四旋翼无人机(A3飞控Onboard SDK和Mobile SDK介绍)
- Android 拼音转换工具PinyinUtils
- 计算机PS实验报告范文,PHOTOSHOP实验报告范文
- 08.env和set命令详解
- 基于Centos环境使用宝塔面板,搭建nextcloud
- Python系列 之 email模块 - 发送邮件
- C语言大小端数据转换总结
- 转载_树莓派4B的详细资料说明
热门文章
- 如何在网页中插入多媒体文件
- 走进中东走进华为 看中国企业国际化的战略突围
- win10笔记本如何连接蓝牙音箱
- 围圈报数c语言编程,C语言编程:有n个人围成一圈,顺序排号。从第一个人开始报数......
- 企业如何有效利用PLM系统(上)
- 华为笔记本matebook13_入手华为matebook13锐龙版笔记本一周使用感受
- 赞csdn工作人员的响应速度
- Kubernetes 存储(Configmap、Secret、Volume、PV-PVC)
- R12 FA中“摊销“(Amortize Adjustment)的实际应用
- Tomcat安装(详细)