简单的 js手写轮播图
html:
<div class="na1">
<div class="pp">
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
</div>
</div>
css
width: 1349px;
height: 620px;
overflow: hidden;
}
/* width: 100%; */
height: 100%;
margin-left: -586px;
}
width: 5396px;
height: 620px;
margin-left: 0px;
}
/* width: 100%; */
height: 100%;
margin-left: -586px;
}
var aa=0;
var waili=document.getElementsByClassName("pp")[0];
var timer;
// dingshiqi
timer=setInterval(function(){
waili.style.transition="1s";
aa=aa-1349;
if (aa<=-4077) {
waili.style.transition="0s";
aa=0;
}
waili.style.marginLeft=aa+"px";
},2500)
})
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="../public/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<style type="text/css">
.na1 {
width: 1349px;
height: 620px;
overflow: hidden;
} .dd {
/* width: 100%; */
height: 100%;
margin-left: -586px;
} .pp {
width: 5396px;
height: 620px;
margin-left: 0px;
} .aa {
/* width: 100%; */
height: 100%;
margin-left: -586px;
} </style>
<body>
<!-- header-->
<div class="na1">
<div class="pp">
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
<div class="na">
<img class="dd" src="../img/shouji/1.jpg">
</div>
</div>
</div>
<!-- 摸快2 -->
</body>
</html>
<script type="text/javascript"> // 2.轮播图 $(function(){
/* huidingbu */
$(window).scroll(function() {
var hui = $(document).scrollTop();
// alert(hui);
// console.log(hui);
if (hui > 300 ) {
$(".jiantou").fadeIn();
} else{
$(".jiantou").fadeOut();
}
})
$(".jiantou").click(function(){
$("html,body").animate({
scrollTop:'0px'},500);
}) // $(".cent211").mouseover(function(){ // $(this).css("border-right","1px solid grey");
// setTimeout(function(){
// $(".cent211").css("border-right","none");
// },1000); // });
// $(".cent311").mouseover(function(){
// $(this).css("border-right","1px solid grey");
// setTimeout(function(){
// $(".cent311").css("border-right","none");
// },1000);
// });
/* 轮播图jq */
/* var aa=0;
var waili=$(".pp").eq(0);
var timer;
// dingshiqi
timer=setInterval(function(){
waili.css("transition","1s");
aa=aa-1349;
if (aa<=-4077) {
waili.css("transition","0");
aa=0;
}
waili.css("marginLeft",aa+"px");
},2500) */
/* 轮播图 */
var aa=0;
var waili=document.getElementsByClassName("pp")[0];
var timer;
// dingshiqi
timer=setInterval(function(){
waili.style.transition="1s";
aa=aa-1349;
if (aa<=-4077) {
waili.style.transition="0s";
aa=0;
}
waili.style.marginLeft=aa+"px";
},2500)
}) /* $(".cent211").mouseover(function(){
$(this).animate("border-right","1px solid grey").delay(1000).("border-right","none");
}) */
</script>
简单的 js手写轮播图的更多相关文章
- 原生JavaScript（js）手把手教你写轮播图插件（banner）
---恢复内容开始--- 1.轮播图插件 1.什么是插件: 为已有的程序增加功能 2.插件的特点(为什么要做成一个插件)与注意事项: 1.通用性,可移植性强 2.兼容性:不会对其他代码产生影响 3.创 ...
- 原生JS实现简易轮播图
原生JS实现简易轮播图(渐变?) 最近做网页总是会用到轮播图,我就把之前写的轮播图单独拿出来吧,如果有...如果真的有人也需要也可以复制去用用啊..哈~.. window.onload = funct ...
- js原生实现轮播图效果（面向对象编程）
面向对象编程js原生实现轮播图效果 1.先看效果图 2.需要实现的功能: 自动轮播 点击左右箭头按钮无缝轮播 点击数字按钮切换图片 分析:如何实现无缝轮播? 在一个固定大小的相框里有一个ul标签,其长 ...
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- JS+css3焦点轮播图PC端
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 授人以渔式解析原生JS写轮播图
需求与分析 需求:循环无缝自动轮播五张图,按左右箭头可以手动切换图片,鼠标点击轮播图下面按钮 1 2 3 4 5会跳转到对应的第1 2 3 4 5张图片.鼠标放到轮播图的图片上时不再自动轮播并且左右箭 ...
- JS 实现动态轮播图
JavaScript实现轮播图思路 + html/css + js源码 整个轮播图的效果是通过js代码,操作dom, 拿到html我们需要的元素,控制整个ul的距离浏览器左边的位置,让排好的图片依次出 ...
- 原生JS实现旋转木马轮播图特效
大概是这个样子: 首先来简单布局一下(emm...随便弄一下吧,反正主要是用js来整的) <!DOCTYPE html> <html lang="en"> ...
- JS学习笔记--轮播图效果
希望通过自己的学习收获哪怕收获一点点,进步一点点都是值得的,加油吧!!! 本章知识点:index this for if else 下边我分享下通过老师教的方式写的轮播图,基础知识实现: 1.css代 ...
随机推荐
- web前端Vue+Django rest framework 框架 生鲜电商项目实战✍✍✍
web前端Vue+Django rest framework 框架 生鲜电商项目实战 整个课程都看完了,这个课程的分享可以往下看,下面有链接,之前做java开发也做了一些年头,也分享下自己看这个视频 ...
- 尝试修改源码需要用到git存一下
git reflog查看本地记录 git reset --hard 02a3260
- js进阶之路,关于UI资源的优化(转载)
以下场景往往由于事件频繁被触发,因而频繁执行DOM操作.资源加载等重行为,导致UI停顿甚至浏览器崩溃. 1. window对象的resize.scroll事件 2. 拖拽时的mousemove事件 3 ...
- MySQL 小调研
一. 概况: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL ...
- C#操作Word的+ CKEditor 輸出成Word文件(包含圖案上傳)
C#操作Word 参考博文: C#操作word类文件 https://www.cnblogs.com/walking/p/3571068.html C#中的Office操作专栏(21) http:// ...
- tzselect - 选择一个时区
总览 tzselect 描述 tzselect 程序向用户询问当前位置的信息,把时区描述作为结果输出到标准输出.此结果适合作为环境变量 TZ 的值. 所有与用户的交互是通过标准输入和标准错误输出完成的 ...
- sudo dpkg --configure -a无法解决的问题
系统升级及新立得启动时出现的问题,还不能安装软件 E: dpkg 的操作被中断了, 您必须手动执行 'sudo dpkg --configure -a' 以修复这个问题. E: _cache-> ...
- Ansible角色
Ansible角色介绍 官方地址: https://docs.ansible.com/ansible/latest/user_guide/playbooks_reuse_roles.html 角色目录 ...
- mysql 查询正在执行的sql
select * from information_schema.`PROCESSLIST` where info is not null; 或者 -- use information_schema; ...
- robotframework+python3+selenium之常用情景---第四集
1.切换浏览器 2.切换frame/iframe 3.截图保存 3.1导入Screenshot包 3.2 编写自动化测试之截图 4.后续再补充