简单的 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开发常规调试方法与常见问题分析
一.Web项目基本原理 现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务 ...
- 【转】谈一谈 Normalize.css
原文链接: https://www.jianshu.com/p/9d7ff89757fd 笔记: 如何使用?
- 并发编程 --进、线程池、协程、IO模型
内容目录: 1.socket服务端实现并发 2.进程池,线程池 3.协程 4.IO模型 1.socket服务端实现并发 # 客户端: import socket client = socket.soc ...
- 支付宝支付接口-运行支付宝demo
运行deme 提供了 支付 查询 退款 交易关闭几个简单的接口demo 下载 https://docs.open.alipay.com/270/106291/ 转为mave项目 1.创建一个空的ma ...
- Struts2开发环境搭建
eclipse配置struts2开发环境: 1.导入jar包:复制Struts\apps\struts2-blank\WEB-INF\lib下的所有jar包到当前项目的lib文件夹下 2.在web.x ...
- JS For 循环详解;棋盘放粮食 64;冒泡排序实例
FOR( 初始条件:循环条件:状态改变:) { 被执行的代码块} 初始条件: 在循环(代码块)开始前执行 循环条件:定义运行循环(代码块)的条件 状态改变: 在循环(代码块)已被执行之后执行 循环可以 ...
- bzoj1016题解
[解题思路] Kruskal的拓展. 可以先对边排序,进行一次Kruskal,判断是否可行,并计算出每种权值的边需要多少条. 然后暴力统计每种权值可行的方案数,根据乘法原理乘起来即可.复杂度o(210 ...
- 显示所有用户，mysql的基本操作
可以实现显示数据库中所有用户. select user from mysql.user; select user,host,password from mysql.user; 给表创建用户,授权: ...
- Beaglebone Black的引脚分配
转自:http://blog.csdn.net/daxueba/article/details/50998000 Beaglebone Black的引脚分配 绝大多数的微型开发平台都提供了一些称为GP ...
- [14]APUE：API for Mysql
库:/usr/lib64/libmysqlclient.so.#.#... 头文件:/usr/lib64/mysql/mysql.h 一.建立连接 MYSQL *mysql_init(MYSQL *) ...