木马轮播图代码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 ...
随机推荐
- LeetCode() Super Ugly Number
用了优先队列,还是超时 class Solution { public: int nthSuperUglyNumber(int n, vector<int>& primes) { ...
- alpha 发布评论
1.飞天小女警:礼物挑选小工具. 这一组的项目是个人最为感兴趣的,核心功能的实现比较有实际意义,希望所能挑选的礼物范围尽量足够大,界面期待完善后的效果. 2.nice!:约跑app.这一款面向喜爱运动 ...
- TimeStamp
private void Form1_Load(object sender, EventArgs e) { textBox1.Text= GenerateTimeStamp(System.DateTi ...
- Spell-DBC
Spell.dbc 1 ID2 Attributes 属性3 AttributesEx 属性 4 AttributesExB ...
- Django模型层Meta内部类详解
Django 模型类的Meta是一个内部类,它用于定义一些Django模型类的行为特性.以下对此作一总结: abstract 这个属性是定义当前的模型类是不是一个抽象类.所谓抽象类是不会对应 ...
- c#-1 数据结构 定义相关 界面交互数据 Model层
1.时间用Nullable<UInt32> 除了最初时间用DateTime TimeSpan不行. 2.其他元素也用Nullable<UInt32> 3.list集合数据绑定类 ...
- linux下的代码比较工具
在linux下有很多不错的代码比较工具:meld.DiffMerge.xxdiff.diffuse.Kompare等... diff : 文件比较工具用于比较计算机上的文件的内容,找到他们之间相同与不 ...
- JMeter基础之--元件的作用域与执行顺序
前面有介绍过jmeter的元件类别,对于新手来说,jmeter的元件是还是不少的,如果我们按照每一个元件的每一个参数的含义去学习,无疑会降低学习性能测试的热情,就算我们熟悉了所有元件以及元件上的参数了 ...
- cxxnet在windows下配置遇到的问题
I compiled the dmlc-core and rabbit. When I compile the new version of CXXNET, there are compile err ...
- 【转】keil+stm32+jlink利用swd方式进行printf输出
出处:http://www.douban.com/note/248637026/ ----------------------------------------------------------- ...