木马轮播图代码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 ...
随机推荐
- ubuntu 一些命令
打开终端 ctrl+alt+t 关闭中端 ctrl+shift+q 打开ppt openoffice.org -g xx.ppt &
- string.join(iterable)
str.join(iterable) Return a string which is concatenation the of the strings in the iterable iterab ...
- 字符串hash算法
http://www.cnblogs.com/zyf0163/p/4806951.html hash函数对大家来说不陌生吧 ? 而这次我们就用hash函数来实现字符串匹配. 首先我们会想一下二进制数. ...
- tcpdf最新版 6.2版
tcpdf6.2版,地址记 录 http://download.csdn.net/detail/hayywcy/9547873
- JAXB最佳实践
JAXB主要用来实现对象和XML之间的序列化和反序列化. 本文主要总结JAXB基本使用方法和注意事项! 通过下文的XML示例内容进行JAXB的简单实践 <?xml version="1 ...
- python3-day2-python基础2
一.for循环 for循环是我们编程中非常常用的一种循环,以下就是for循环在python中的一些应用实例: 1.单层for循环 #!/usr/bin/env python3#-*- coding: ...
- 承接Unity3D外包公司 — 技术分享
Cardboard SDK for Unity的使用 上一篇文章作为系列的开篇,主要是讲了一些虚拟现实的技术和原理,本篇就会带领大家去看一看谷歌的Cardboard SDK for Unity,虽然目 ...
- Laravel项目目录结构说明
Laravel项目目录结构说明: |- vendor 目录包含你的 Composer 依赖模块及laravel框架. |- bootstrap 目录包含几个框架启动跟自动加载配置的文件. |- app ...
- 01shell入门基础
01shell入门基础 为什么学习和使用shell编程 shell是一种脚本语言,脚本语言是相对于编译语言而言的.脚本语言不需要编译,由解释器读取程序并且执行其中的语句,而编译语言需要编译成可执行代码 ...
- Socket Server-基于线程池的TCP服务器
了解线程池 在http://blog.csdn.net/ns_code/article/details/14105457(读书笔记一:TCP Socket)这篇博文中,服务器端采用的实现方式是:一个客 ...