简单的 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代 ...
随机推荐
- YApi导入swagger生成的接口
1.swagger的JSON地址,net或netcore开发环境下 2.配置在内网中,localhost请用对应的IP地址替换,在浏览器地址栏中输入以上地址,会返回一个json格式的文档 3.导入 4 ...
- 前端跨域实现的几种方式？及使用Nginx反向代理配置。
早期为了防止CSRF(跨域请求伪造)的攻击,浏览器引入了同源策略(SOP)来提高安全性.而所谓"同源策略",即同域名(domain或ip).同端口.同协议的才能互相获取资源,而不能 ...
- html清除页面缓存
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" ...
- MySQL 小调研
一. 概况: MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下产品.MySQL 是最流行的关系型数据库管理系统之一,在 WEB 应用方面,MySQL ...
- Window10 64bit Tomcat9 安装
最近正在做一个小项目,需要用到Tomcat部署java web. 准备: 1.window 10 64bit 2.jdk1.8.0_181(请自行安装,记得配置好JAVA_HOME) 3.tomcat ...
- Java SE（3）
紧接着上一期内容,继续来复习一下java基础的知识点,主要来复习一下有关线程的内容吧! 1.向上转型:Animal a = new Cat();//自动类型提升,猫对象提升为动物类型,但是特有的功能无 ...
- python 模拟按键模拟键盘按键按下放开
python模拟按键 pip install pypiwin32安装库 import win32conimport win32apiimport time 导入 打个比方模拟A win32api.ke ...
- weblogic重置控制台密码
1.备份文件如下文件 %DOMAIN_HOME%/security/DefaultAuthenticatorInit.ldift 2.进入%DOMAIN_HOME%/security目录,执行下列命令 ...
- favicon.ico请求处理
favicon.ico 图标用于收藏夹图标和浏览器标签上的显示,如果不设置,浏览器会请求网站根目录的这个图标,如果网站根目录也没有这图标会产生 404. 出于优化的考虑,要么就有这个图标,要么就禁止产 ...
- （转）基于SAML的单点登录介绍
转:http://www.cnblogs.com/zsuxiong/archive/2011/11/19/2255497.html 一.背景知识: SAML即安全断言标记语言,英文全称是Securit ...