简单的 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代 ...
随机推荐
- 多个串的最长公共子串 SPOJ - LCS2 后缀自动机
题意: 求多个串的最长公共子串 这里用的是O(n)的后缀自动机写法 我后缀数组的专题有nlog(n)写法的 题解: 对于其中的一个串建立后缀自动机 然后对于后缀自动机上面的每一个节点求出每一个节点最长 ...
- Dubbo多注册中心和Zookeeper服务的迁移
一.Dubbo多注册中心 1. 应用场景 例如阿里有些服务来不及在青岛部署,只在杭州部署,而青岛的其它应用需要引用此服务,就可以将服务同时注册到两个注册中心. consumer.xml <?xm ...
- Codeforces 1152D DP
题意:有一颗由长度为2 * n的合法的括号序列构成的字典树,现在你需要在这颗字典树上选择一些不连接的边,问最多可以选择多少条边? 思路:不考虑题目条件的话,我们只考虑在随意的一棵树上选择边,这是一个贪 ...
- Ubuntu 16.04 PHP5.6
Cannot add PPA: 'ppa:ondrej/php5-5.6' Ubuntu 16.04 PHP5.6 安装 Apache + PHP 5.6 + mysql 5.5 系统: Ubuntu ...
- leetcode-263-丑数一
题目描述: 方法一:递归 class Solution: def isUgly(self, num: int) -> bool: if num == 0: return False if num ...
- 优化剪枝搜索——牛客多校第二场F
试了很多种爆搜和剪枝,最后发现还是状压的比较好用 #include <bits/stdc++.h> using namespace std; // #define IO #define f ...
- idea和eclipse快捷键对比(转)
分类 功能点 Eclipse快捷键 IDEA快捷键 搜索 搜索文本 Ctrl + F Ctrl + F Ctrl + R 查找替换 Alt + P/A 逐个/全部替换 Alt + F3 查找当前选中词 ...
- JavaScript-Tool：wechatHelper.js
ylbtech-JavaScript-Tool:wechatHelper.js 1.返回顶部 1.wechatHelper.js !function(a,b){"function" ...
- 3步永久性激活IntelliJ IDEA 亲测有效
1.进到文件夹中:C:\Windows\System32\drivers\etc ,找到hosts文件,用文本编辑器打开文件,将“ 0.0.0.0 account.jetbrains.com ”添加 ...
- Elasticsearch(Transport Client)常用操作
这里描述操作elasticsearch采用TransportClient这种方式,官方明确表示在ES 7.0版本中将弃用TransportClient客户端,且在8.0版本中完全移除它. 记录一些常用 ...