木马轮播图代码Jq
效果图（将就一下）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>木马轮播图</title>
<link rel="stylesheet" type="text/css" href="css/css.css">
<script src="node_modules/jquery/dist/jquery.js"></script>
<script src="js/js.js" type="text/javascript"></script>
</head>
<body>
<div class="box">
<ul>
<li><img src="data:images/iceberg_1x.jpg" alt=""></li>
<li><img src="data:images/igloo-800_1x.jpg" alt=""></li>
<li><img src="data:images/landscape-test-1_1x.jpg" alt=""></li>
<li><img src="data:images/space_1x.jpg" alt=""></li>
<li><img src="data:images/trees_1x.jpg" alt=""></li>
</ul>
<div class="control">
<a href="javascript:;" class="prev"><</a>
<a href="javascript:;" class="next">></a>
</div>
</div>
</body>
</html>
html代码
*{
margin:;
padding:;
}
img{
border:;
vertical-align: top;
}
ol, ul ,li{list-style: none;}
a{
text-decoration:none;
}
.box{
width:800px;
height:400px;
margin:50px auto;
position: relative;
}
.control{
position: relative;
z-index:;
display: none;
}
.prev{
position:absolute;
top: 165px;
left:;
font-size: 50px;
line-height: 70px;
opacity: 0.3px;
color:#333;
width:70px;
height:70px;
text-align: center;
}
.next{
position:absolute;
top: 165px;
width:70px;
left:730px;
height:70px;
line-height: 70px;
color:#333;
font-size:50px;
text-align: center;
}
.box li{
position:absolute;
}
.box li img{
width:100%
}
css代码
/*
* @Author: Marte
* @Date: 2016-09-13 23:45:53
* @Last Modified by: Marte
* @Last Modified time: 2016-09-14 00:37:15
*/ 'use strict';
jQuery(document).ready(function($) { //控制左右按钮的出现
$('.box').hover(function() {
$('.control').show();
clearInterval(timer)
}, function() {
clearInterval(timer);
timer =setInterval(function(){
move(true);
},1000);
$('.control').hide();
});
//定时器
var timer =setInterval(function(){
move(true);
},1000) //左右按钮的点击事件
var flag =true; //节流事件
$('.prev').on('click', function(event) {
if (flag==true) {
move(false);
flag = false;
}; });
$('.next').on('click', function(event) {
if (flag==true) {
move(true);
flag = false;
}; }); //数组内容
var arr= [
{
width:'300px',
opacity:0.3,
top:0,
left:'100px',
zIndex:2
},
{
width:'300px',
opacity:0.6,
top:'70px',
left:0,
zIndex:3
},
{
width:'400px',
opacity:1,
top:'100px',
left:'200px',
zIndex:4
},
{
width:'300px',
opacity:0.6,
top:'70px',
left:'500px',
zIndex:3
},
{
width:'300px',
opacity:0.3,
top:0,
left:'400px',
zIndex:2
}
]; //运动的函数
function move(obj){
if (obj) {
//删除数组最后一个添加到数组最前面
arr.unshift(arr.pop());
}else{
//删除数组第一个加到数组最后面
arr.push(arr.shift());
}
$.each(arr, function(index, val) {
$('.box li').eq(index).css('zIndex',arr[index].zIndex).stop().animate({
top: val.top,
left: val.left,
opacity:val.opacity,
width:val.width
},300,function(){
flag= true;
});
});
} // 一开始执行
move(true) });
js代码
效果图
木马轮播图代码Jq的更多相关文章
- 原生js简单轮播图 代码
在团队带人,突然被人问到轮播图如何实现,进入前端领域有一年多了,但很久没自己写过,一直是用大牛写的插件,今天就写个简单的适合入门者学习的小教程.当然,轮播图的实现原理与设计模式有很多种,我这里讲的是用 ...
- [Web] 通用轮播图代码示例
首先是准备好的几张图片, 它们的路径是: "img/1.jpg", "img/2.jpg", "img/3.jpg", "img/ ...
- JD轮播图代码
<!DOCTYPE html> <html> <head> <title>jd网站的轮播图效果</title> <me ...
- 原生Js写轮播图代码
html css js 在知道jQuery如何实现轮播效果的基础上,用js写代码 如图:标记这里的地方 理解一下 用到的知识: 1.HTML DOM 的appendChild() 和 removeCh ...
- js 轮播图代码
js代码 (function(){ /** parent //父容器 changeTime //每次间隔几秒切换下一条 leaveTime //鼠标从小图上离开过后几秒继续切换 index //从第几 ...
- 轮播图适应代码jQ
(function(){ var i = 0; var time ; $('.page-size').html('1'); var obj = $('.xst-scroll>li'); var ...
- js写的简单轮播图
这个轮播图代码是从网上找来的,专门找了个写法简单的,只是作为一个小练习,大概原理如下: 1.首先是图片切换2.自动播放3.调用自动播放4.移动到容器上边停止播放,离开自动播放5.移动到导航上停止播放, ...
- ⒃bootstrap组件 轮播图 基础案例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Js封装的动画函数实现轮播图
---恢复内容开始--- 效果图说明:当鼠标移到哪一个按钮上的时候会自动跳转到某一张图片上,并且按钮会以高亮显示 项目目录结构 用到的js封装的animate()动画 function ...
随机推荐
- 【转载】ANSYS完全法与模态叠加法瞬态分析实例
原文地址:http://www.caetecc.com/thread-2172-1-1.html ! 半脉冲载荷 --- 模态叠加法fini/clear,nostart/PREP7ET,1,BEAM4 ...
- Chapter 1: Design the application architecture
1.1 Plan the application layers 提到了repository pattern,SoC(Separation of Concern), 进而提及MVC,Action/Act ...
- mysql之高可靠
6.mysql主-从备份 主-主备份,首先AB机要保持数据一致,即先手工备份A机数据,然后在B机上恢复,之后就很简单了,只需要在B机上创建一个同步账号,并在A机上输入B机的那些参数然后启动slave ...
- SQL NULL 值【摘自W3C】
SQL NULL 值 本章讲解 IS NULL 和 IS NOT NULL 操作符. NULL 值是遗漏的未知数据.默认地,表的列可以存放 NULL 值. 如果表中的某个列是可选的,那么我们可以在不向 ...
- securityCRT mongoDB 命令行删除（backspace/delete）无效问题
1.MongoDB Shell中退格键使用的问题. 利用SecureCRT工具访问linux的时候,在使用MongoDB的交互式shell的时候,退格键(Backspace)无法使用,导致无法修改输入 ...
- 全景VR视频游戏外包公司：技术分享使用U3D+CB制作VR游戏
随着Oculus宣布1月6日开启预售,2016年很可能成为VR游戏元年,但很多的调研显示,手游设备才是市场增长的关键,SuperData发布的报告显示,2016年全球VR游戏市场规模预计在51亿美元左 ...
- Mysql大范围分页优化案例
在BBS线上业务抓到如下分页SQL: meizu_bbs meizu_bbs Query Sending data , meizu_bbs meizu_bbs Query Sending data , ...
- tokudb引擎磁盘空间不足导致写入失败的调查
故障现象 2016.1.1号早上4点左右,zabbi数据库服务器报警,写入数据失败.登陆机器后检查发现磁盘空间使用95%没有用满,进去zabbix数据库,执行insert命令提示错误“errir 10 ...
- Linux流量监控工具
http://www.vpser.net/manage/iftop.html 在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息.查看网络状态可以使用netstat.nmap等工具.若 ...
- va_copy
#include <stdio.h> #include <stdarg.h> void func(char* format, va_list ptr); void print( ...