html京东自动轮播,js 京东首页轮播图实现(透明度切换)
思路:
1、定义 图片和图片轮播dot初始下标 index为0,并为第一张轮播图和第一个dot赋予状态
2、 切换到下一张图片函数moveNext ,函数内将当前下标index的图片和dot恢复原来状态,index自增1,将自增后下标的图片和dot赋予状态
3、 切换到上一张图片函数movePrev,与步骤2类似
4、定义计时器,每隔三秒执行一次 切换到下一张图片函数 moveNext
5、 下一张按钮点击函数 函数内清除所有计时器,并执行 切换到下一张图片函数 moveNext , ,然后继续自动播放
6、 定义上一张按钮点击函数 ,函数内清除所有计时器,并执行 切换到上一张图片函数 movePrev ,然后继续自动播放
7、遍历dot并为每个dot定义点击函数,函数内首先清除所有计时器, 上一个dot恢复原来状态 ,获取当前点击dot下标,为当前下标dot赋予状态,然后继续自动播放
js代码
//获取元素
var box=document.querySelector(".box");
var imgs=document.querySelectorAll(".box img");
var left_btn=document.querySelector(".left");
var right_btn=document.querySelector(".right");
var lis=document.querySelectorAll(".point li");
//声明计时器变量
var timer;
/声明图片和图片轮播dot初始下标
var indexshow=0;
//图片轮播dot第一个初始为点亮状态
lis[indexshow].className='active';
//初始状态第一张轮播图自动加入,实现透明度到1的动画,动画结束后,开始计时器自动播放开始(每隔三秒切到下一张)
animate(imgs[indexshow],
{'opacity':1},function(){
timer=setInterval(function(){
moveNext();
},3000)
});
//定义切换到下一张图片函数
function moveNext(){
//令上一张图片和上一个dot恢复原来状态
imgs[indexshow].className='';
imgs[indexshow].style.opacity=0.02;
lis[indexshow].className='';
//下标自增1
indexshow++;
//临界值判断
if(indexshow==imgs.length){
indexshow=0;
}
//当前下标的状态
lis[indexshow].className='active';
imgs[indexshow].className='show';
//当前下标图片实现透明度到1动画
animate(imgs[indexshow],{
'opacity':1
})
}
//定义切换到下一张图片函数
function movePrev(){
// console.log(123);
imgs[indexshow].className='';
lis[indexshow].className='';
imgs[indexshow].style.opacity=0.02;
indexshow--;
if(indexshow==-1){
indexshow=imgs.length-1;
}
lis[indexshow].className='active';
imgs[indexshow].className='show';
animate(imgs[indexshow],{
'opacity':1
})
}
//定义上一张按钮点击函数
left_btn.οnclick=function(){
//清除所有计时器
clearInterval(timer);
clearInterval(imgs[indexshow].timer);
//触发切换到上一张函数
movePrev();
//继续执行计时器自动播放
timer=setInterval(function(){
moveNext();
},3000)
}
//定义下一张按钮点击函数
right_btn.οnclick=function(){
clearInterval(timer);
clearInterval(imgs[indexshow].timer);
moveNext();
timer=setInterval(function(){
moveNext();
},3000)
}
//定义轮播图dot点击函数
for(var i=0;i
// 获取当前点击dot下标并保存
lis[i].index=i;
lis[i].οnclick=function(){
//清除所有计时器
clearInterval(timer);
clearInterval(imgs[this.index].timer);
//上一个dot恢复原来状态
imgs[indexshow].className='';
lis[indexshow].className='';
imgs[indexshow].style.opacity=0.02;
//获取当前下标并赋予状态
indexshow=this.index;
lis[indexshow].className='active';
imgs[indexshow].className='show';
animate(imgs[indexshow],{
opacity':1
})
//继续自动播放
timer=setInterval(function(){
moveNext();
},3000)
}
}
动画过渡函数animate封装
function animate(dom, obj, callback) {
for (var o in obj) {
if (o == "opacity") {
var current = parseInt(getComputedStyle(dom, null)[o] * 100);
var target = obj[o] * 100;
} else if (o.indexOf("scroll") !== -1) {
var current = dom[o];
var target = obj[o];
} else {
var current =parseInt(getComputedStyle(dom, null)[o]);
var target = obj[o];
}
obj[o] = {
'current': current,
'target': target
};
}
clearInterval(dom.timer);
dom.timer = setInterval(function () {
for (var o in obj) {
var target = obj[o].target;
var current = obj[o].current;
var speed = (target - current) / 10;
speed=speed>0?Math.ceil(speed):Math.floor(speed);
if (Math.abs(target - current) <= Math.abs(speed)) {
if (o == "opacity") {
dom.style[o] = target / 100;
} else if (o.indexOf("scroll") !== -1) {
dom[o] = target;
} else {
dom.style[o] = target + "px";
}
delete obj[o];
for (var i in obj) {
return;
}
clearInterval(dom.timer);
typeof callback === 'function' ? callback() : '';
} else {
obj[o].current += speed;
if (o == "opacity") {
dom.style[o] = obj[o].current / 100;
} else if (o.indexOf("scroll") !== -1) {
dom[o] = obj[o].current;
} else {
dom.style[o] = obj[o].current + "px";
}
}
}
}, 20);
}
Like
Like
Love
Haha
Wow
Sad
Angry
1
html京东自动轮播,js 京东首页轮播图实现(透明度切换)相关推荐
- android京东首页轮播代码,仿京东商品详情轮播图
好久没有更新啦,今天来搞一个京东的轮播:直接上效果 8月-16-2016 09-38-10.gif 8月-16-2016 09-37-17.gif 如果想真实体验可以去京东APP体验一下. 描述一下效 ...
- JavaScript实现京东首页轮播图
轮播图效果 每隔 3 秒图片会自动切换一张,以此类推安照给定图片数量轮番切换播放. 当鼠标移入时会自动暂停播放,鼠标移出则会继续. 如下图两边有两个左右方向的按钮,点击则会实现手动切换商品图片. 右下 ...
- android京东首页轮播代码,web移动端-轮播
var bannerImg = document.querySelectorAll(".jd_banner ul li"); /* 1.自动滚动(定时器+过渡transition+ ...
- css布局作业:京东首页轮播图
效果: html代码: <!DOCTYPE html> <html lang="en"> <head><meta charset=&quo ...
- Android 旋转木马轮播,js实现旋转木马轮播图效果
本文实例为大家分享了js实现旋转木马轮播图的具体代码,供大家参考,具体内容如下 整个页面的文件结构如下图所示: html部分代码: 旋转木马轮播图 在html部分引入的myStyle.css文件部分代 ...
- html实现横向轮播,js实现横向轮播效果
html: js横向轮播 body { margin: 0; } #container { position: relative; width: 100%; height: 300px; overfl ...
- web前端学习基础教程,简单的图片旋转木马自动轮播js代码
一款简单的图片旋转木马自动轮播js代码,图片叠加轮播切换效果,支持点击左右箭头按钮控制切换. 案例效果图 案例源码: <!DOCTYPE html> <html lang=" ...
- js点击轮播或者自动轮播图代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="gbk&q ...
- 图片竖轮播html,JS实现纵向轮播图(初级版)
本文实例为大家分享了JS实现纵向轮播图的具体代码,供大家参考,具体内容如下 描述: 纵向buton或者底部数字控制轮播,可以实现自动轮播(注释了,使用的话将其注释消掉),核心知识是数据驱动图像的透明度 ...
最新文章
- 免费教材丨第55期:Python机器学习实践指南、Tensorflow 实战Google深度学习框架
- CCF发布2020-2021中国计算机科学技术发展报告
- 创建ssh 服务的镜像
- oracle 压测工具 ld,Oracle压力测试工具使用说明
- P5081 Tweetuzki爱取球(期望)(线性求逆元)
- Netcdf中多变量导出代码示例
- db服务器作用,数据库服务器
- MySQL 是如何实现RC事务隔离级别的
- 1.C#基础学习笔记3---C#字符串(转义符和内存存储无关)
- 批量获取客户端时间偏差
- Fiddler中文版安装及使用
- 如何清除百度云管家计算机图标,怎么样删除我的电脑里的百度云管家图标
- Android简单实现本地图片和视频选择器功能
- [BZOJ1488][HNOI2009]图的同构(dfs+置换群+数论+组合数学)
- 学习笔记4 环境试验箱的校准
- DeepLearning: 归纳几种常用的激活函数(activation)
- 用GAN的方法来进行图片匹配!休斯顿大学提出用于文本图像匹配的对抗表示学习,消除模态差异!
- 华为折叠:光而不耀 静水潜流
- 301 Moved Permanently问题排查与解决
- OpenWrt各大软件源地址
热门文章
- 苹果计算机密码bug,苹果iOS 13系统新BUG:快速输入密码,解锁无效
- 深访杨超越杯编程大赛发起人 还原硬核粉丝追星全过程
- 全球与中国糖粉市场深度研究分析报告
- 考研丨7-12月复习安排时间表
- 网页制作(HTML)
- android gpu平板 推荐,性能强的不像话,最强安卓平板华为平板M6上手
- 解决MATLAB新版本中modem.qammod作废的问题
- oracle数据库(一)
- c语言用随机投点法计算圆周率,(原创精品)用随机投点法计算π值【compute π with dartpoint randomly】...
- 心愿作文计算机,电脑的心愿作文