木马轮播图代码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 ...
随机推荐
- hrbust 1481
/* 构造特定条件的68序列:给定目标串中6 8 68 86 这四种字串的个数a b p q ,输出所有满足条件的字符串中代表的数字最小的那个 // hrboj 1481 ______________ ...
- BSD License
BSD开源协议(original BSD license.FreeBSD license.Original BSD license) BSD开源协议是一个给于使用者很大自由的协议.基本上使用者可以”为 ...
- 表单和 HTML 辅助方法– ASP.NET MVC 4 系列
这里有一个疑问,诸如在文本编辑器中输入 HTML 元素如此简单的任务,也需要任何帮助吗?的确,输入标签名称是很容易的事,但是确保 HTML 页面链接中的 URL 指向正确的位置.表单元素 ...
- 05:统计单词数【NOIP2011复赛普及组第二题】
05:统计单词数 总时间限制: 1000ms 内存限制: 65536kB 描述 一般的文本编辑器都有查找单词的功能,该功能可以快速定位特定单词在文章中的位置,有的还能统计出特定单词在文章中出现的次 ...
- LeetCode----Array
Remove Duplicates from Sorted Array 思路:两个指针,头指针在0,尾指针从1开始寻找,找到第一个不等于头指针值的数,覆盖掉头指针后面那个数,然后尾指针往后移. pub ...
- mybatis 与 xml
mybatis的两大重要组件:配置和映射文件,都是可以通过xml配置的(新版本新增了注解的方式配置Mapper),下面来解析下mybatis是怎么做的 其中,关于配置文件解析的主要是在这个类XMLCo ...
- Visual Studio+TFS--强大的项目管理工具
一.前言 微软的Visual Studio非常强大,可以无缝结合Git或自家的TFS(Team Foundation Server),进行项目管理非常方便,从需求分析.开发.测试.维护,几乎可以贯穿软 ...
- 【性能诊断】五、并发场景的性能分析（windbg简介及dump抓取）
windbg简介 Windbg是在windows平台下,强大的用户态和内核态调试工具.相比较于Visual Studio,它是一个轻量级的调试工具,所谓轻量级指的是它的安装文件大小较小,但是其调试功能 ...
- Validate Disk Failover Failed
Failed to write file data on cluster disk 0 partition 1, failure reason: The disk structure is corru ...
- 将 ASP.NET MVC3 Razor 项目部署到虚拟主机中
国内很多网站空间都只支持.NET 2.0 和 .NET 3.0 3.5,很少有空间商支持.NET 4的,即使有个别支持.NET 4,但是不支持MVC的默认路由访问形式. Go Daddy 的主机支持, ...