JQuery写的一个常见的banner
大致的布局如下:
<div class="banner" >
<div class="pic">
<ul>
<li><img src="img/banner4.jpg" alt="" /></li>
<li><img src="img/banner1.png" alt="" /></li>
<li><img src="img/banner2.png" alt="" /></li>
<li><img src="img/banner3.jpg" alt="" /></li>
<li><img src="img/banner4.jpg" alt="" /></li>
<li><img src="img/banner1.png" alt="" /></li>
</ul>
</div>
<!--点播列表-->
<div class="tab">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--banner 两边的按钮-->
<div class="btn">
<div id="left"> < </div>
<div id="right"> > </div>
</div>
</div>
css样式如下:
.banner{width:100%;height:400px;position:relative;}
.banner .pic{width: 100%;height: 100%;overflow: hidden;}
.banner .pic ul{width: 1000%;height: 100%;margin-left: -100%;}
.banner .pic ul li{width: 10%;height: 100%;float: left;}
.banner .pic ul li img{width: 100%;height: 100%;}
.banner .tab{width: 136px;height: 3px;position: absolute;bottom: 20px;left: 50%;margin-left: -68px;}
.banner .tab ul li{width: 30px;height: 3px;float: left;margin: 0 2px;background: #5D5C60;}
.banner .tab ul li.on{background: #0DA1A4;}
.banner .btn div{width: 30px;height: 40px;background: rgba(0, 0, 0, 0.5);font-size:20px;text-align: center;line-height: 40px;color: #fff;position: absolute;top: 50%;margin-top: -20px;display: none;}
#left{left: 15px;}
#right{right: 15px;}
JS代码:
~function(){
var banner = $('.banner');
var picUl = $('.banner .pic ul');
var tabLi = $('.banner .tab ul li');
var btnDiv = $('.banner .btn div');
var width = banner.width();
var index = 0;
var timer = null;
var nowTime = 0;
//底部Li列表添加on样式
tabLi.eq(0).addClass('on');
setAuto();
tabLi.click(function(){
index = $(this).index();
tabLi.eq(index).addClass('on').siblings().removeClass('on');
picUl.stop().animate({
marginLeft:-width*(index+1)+'px'
},1000);
});
btnDiv.click(function(){
if (new Date() - nowTime >500) {
nowTime = new Date();
var i = $(this).index();
i?index++:index--;
change();
}
});
function setAuto(){
timer = setInterval(function(){
index++;
change();
},5000);
};
banner.hover(function(){
btnDiv.show(1000);
clearInterval(timer);
},setAuto).mouseleave(function(){
btnDiv.hide(1000);
});
function change(){
index >= tabLi.length?tabLi.eq(0).addClass('on').siblings().removeClass('on'):tabLi.eq(index).addClass('on').siblings().removeClass('on');
picUl.stop().animate({
marginLeft:-width*(index+1)+'px'
},1000,function(){
if (index==4) {
index = 0;
picUl.css("marginLeft",-width+'px');
} else if(index == -1){
index = tabLi.length - 1;
picUl.css("marginLeft",-width*(index+1)+'px');
}
});
}
}();
作为一个新手,用两天时间调试的banner图,感觉还是可以的~_~~_~
JQuery写的一个常见的banner的更多相关文章
- 用jQuery写了一个模态框插件
用jQuery写了一个模态框插件 大家觉得下面的框框好看么, 水印可以去掉(这个任务交给你们了(- o -)~zZ); "info"框 $("div").con ...
- 利用jquery写的一个TAB页切换效果
函数如下 /** *切换效果 */ function switab(tab,con,tab_c_css,tab_n_css,no) { $(tab).each(function(i){ if(i == ...
- 用jquery写自己的form表单验证
这几天看了锋利的jquery,感觉很不错.特别是jquery强大的选择器.今天就利用jquery写了一个自己的form表单验证的小案例.当巩固下jquery.首先贴下代码,当然只是一个小案例. 思路: ...
- 如何使用jQuery写一个jQuery插件
jQuery插件其实是前端框架的思维,构成一个框架,个人认为必须满足以下几个基础条件:1. 可重用,2. 兼容性,3. 维护方便,虽说现在有很多比较成熟的前端框架,但是也有部分存在配置麻烦,学习成本大 ...
- 自己在项目中写的一个Jquery插件和Jquery tab 功能
后台查询结果 PDFSearchResult实体类: [DataContract(Name = "PDFSearchResult")] public class PDFSearch ...
- 用jQuery写的最简单的表单验证
近几天完成了关于我们项目的最简单的表单验证,是用jQuery写的,由于之前也一直没学过jQuery,所以自己也是一直处于边摸索边学习的阶段,经过这一段时间的学习,通过查资料啥的,也发现了学习jQuer ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
- 用jquery写循环播放div的相关笔记 珍贵的总结 -1
用jquery写循环播放div line-height应用的元素的 层次? line-heig字ht, 叫行高, 仅仅是指 文/文本, 而不管图片. line-height是容器中 文本行 与 文本行 ...
- 自己写的一个Yeoman的Generator-Require-Angularjs
Yeoman是一个常见的工作流,能够很方面的搭建属于自己的脚手架. 这段时间我用闲暇时间写了一个Generator来玩了一下,这个Generator的主要目的是快速建立一个RequireJS+Angu ...
随机推荐
- Python之面向对象二
面向对象的三大特性: 继承 继承是一种创建新类的方式,在python中,新建的类可以继承一个或多个父类,父类又可称为基类或超类,新建的类称为派生类或子类 python中类的继承分为:单继承和多继承 c ...
- SendMessage 遇到的神坑
场景 两个进程A和B,需要从A中设置B中的文本框的内容 过程 x.x.x.x. 成功获取了B中的内容,惊喜,离成功更近异步 xxxx ***** ....... x.x.x.x. 大约查找了几百个网页 ...
- Python基础-用户验证
一.项目需求 1.根据用户名和密码,验证用户是否可登陆 2.允许一次执行可验证三次 3.当用户名输错三次后,该用户名锁定,永久不可登陆 二.代码如下 #!/usr/bin/env python #-* ...
- wmv12下安装centos7
第一步:安装软件: vmw版本是12,并在vmw下安装centos为CentOS-7-x86_64-DVD-1708.iso: 第二步:修改vmw虚拟网络配置 1)配置VMnet8 修改ip等信息 点 ...
- Java-Maven(六):Eclipse中Maven插件的命令操作
之前几个章节学习了maven的概念,及maven插件安装后如何创建工程,那么maven工程中是如何使用maven命令呢?本章节将会学习这个话题. 在pom.xml中配置maven命令插件 如果向在ma ...
- 如何在node和vue前后端分离的项目中使用极客验证,用node的方式
1.用express的脚手架和vue-cli的脚手架搭建的项目目录如下图 2.在vue-client的src/component新建一个login.vue文件,作为登录页面,代码如下 <temp ...
- logging格式
import logging def foo(s): return 10 / int(s) def bar(s): return foo(s) * 2 def main(): try: bar(0) ...
- [LeetCode] Max Area of Island 岛的最大面积
Given a non-empty 2D array grid of 0's and 1's, an island is a group of 1's (representing land) conn ...
- react-router 4实现代码分割(code spliting)
官方一开始推荐的使用bundle-loader来做代码分割的方式感觉有点麻烦,而且代码看起来有点不舒服.而且需要一直依赖bunder-loader 一开始我想为什么不能像vue一样,直接使用ES的新特 ...
- codefroces 55D Beautiful numbers
[Description] 美丽数是指能被它的每一位非0的数字整除的正整数. [Input] 包含若干组数据,每组数据一行两个数n,m,表示求[n,m]之间的美丽数的个数. [output] 对于每组 ...