jQuery-实现图片轮播
html部分:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>图片轮播</title>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<h3>jQuery实现轮播图</h3>
<div class="main">
<div class="box" id="box">
<!-- 图片区域 bagin -->
<a href="#">
<div class="img img1"></div>
</a>
<a href="#">
<div class="img img2"></div>
</a>
<a href="#">
<div class="img img3"></div>
</a>
<a href="#">
<div class="img img4"></div>
</a>
<a href="#">
<div class="img img5"></div>
</a>
<!-- end -->
<!--上一张-->
<span class="pre" id="prev">
<a href="#"><img src="img/pre2.png"/></a>
</span>
<!--下一张-->
<span class="pre" id="next" style="right: 0;">
<a href="#"><img src="img/pre.png"/></a>
</span>
<!--小圆点-->
<ul>
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.0.js"></script>
<script type="text/javascript" src="js/base.js"></script>
</body>
</html>
css部分:
/*样式重置*/
* {
margin: 0;
padding: 0;
}
body {
font-family: Microsoft YaHei;
}
li {
list-style: none;
}
/*main bagin*/
h3{
text-align: center;
margin-top: 20px;
}
.main {
width: 1224px;
height: 480px;
margin: 20px auto;
}
/*end*/
/*box bagin*/
.box {
width: 1200px;
height: 460px;
overflow: hidden;
position: relative;
padding-top: 10px;
padding-left: 12px;
}
/*end*/
/*图片共同样式 bagin*/
.img {
width: 1200px;
height: 460px;
background: no-repeat;
}
/*end*/
.img1 {
background-image: url(../img/1.jpg);
}
.img2 {
background-image: url(../img/2.jpg);
}
.img3 {
background-image: url(../img/3.jpg);
}
.img4 {
background-image: url(../img/4.jpg);
}
.img5 {
background-image: url(../img/5.jpg);
}
/*箭头共同样式 bagin*/
.pre{
display: inline-block;
width:40px;
height:60px;
position: absolute;
top: 50%;
text-align: center;
line-height: 76px;
}
/*end*/
/*移入箭头的样式*/
span.active{
background: rgba(0,0,0,0.5);
}
ul {
position: absolute;
top:93%;
right: 20px;
}
li{
display: inline-block;
width: 10px;
height: 10px;
border: 1px solid #fff;
border-radius: 10px;
margin-left: 8px;
cursor: pointer;
}
/*点击小圆点时的样式*/
li.active{
}
js部分:
$(function() {
var timer = null,
index = 0,
len=$("#box div").length;
//console.log(len)
//移出函数,图片自动轮播
$("#box").mouseout(function(){
clearInterval(timer)
autoimg()
})
//移入函数,图片停止轮播
$("#box").mouseover(function(){
clearInterval(timer)
})
//页面打开自执行
$("#box").mouseout()
//下一张点击事件
$("#next").click(function(){
index++
if (index>len-1) {
index=0
}
tab()
})
//上一张点击事件
$("#prev").click(function(){
index--
if (index<0) {
index=len-1
}
tab()
})
//上下张移入移出事件 bagin
$("#next").mouseover(function(){
$(this).addClass("active")
})
$("#next").mouseout(function(){
$(this).removeClass("active")
})
$("#prev").mouseover(function(){
$(this).addClass("active")
})
$("#prev").mouseout(function(){
$(this).removeClass("active")
})
//end
//小圆点点击事件
$("ul li").click(function(){
index=$(this).index()
tab()
})
function tab(){
$("#box div").hide().eq(index).show()
$("ul li").removeClass().eq(index).addClass("active")
}
//时间函数
function autoimg(){
timer=setInterval(function(){
index++
if (index>len-1) {
index=0
}
tab()
},2000)
}
})
jQuery-实现图片轮播的更多相关文章
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- PgwSlideshow-基于Jquery的图片轮播插件
0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键 ...
- jQuery.YesShow - 图片轮播插件(带图片放大功能)
jQuery.YesShow - 图片轮播插件(带图片放大功能) 使用简单,原文件只要这样就可以了:<div id="yes"> <ul> ...
- (转)jquery实现图片轮播
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 基于jquery的图片轮播 (IE8以上)
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- jQuery实现图片轮播
之前有碰到过jQuery实现列表自动滚动,这次的图片轮播在原理上与之相同,只有一些细微的差别,就是需要在图片的右下角显示当前图片的序号,效果如下: 先看一看html代码,以及对应的css代码: < ...
- Javascript和jQuery WordPress 图片轮播插件, 内容滚动插件,前后切换幻灯片形式显示
用于在有限的网页空间内展示一组产品图片或者照片,同时还有非常吸引人的动画效果.本文向大家推荐12款实用的 jQuery 图片轮播效果插件,帮助你在你的项目中加入一些效果精美的图片轮播效果,希望这些插件 ...
- 原生js和jquery实现图片轮播特效
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- 原生js和jquery实现图片轮播特效(转)
本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...
- html css+div+jquery实现图片轮播
一直想自己动手做一个图片轮播的控件,查查网上的资料大多引用已经做好的组件,其原理算法不是很清楚,于是自己用jquery写了一个.先看下效果图: 主要界面实现思路如下: 1.新建一个div宽度为100% ...
随机推荐
- 了解计算机与操作系统发展阶段--Windows
Windows发展的30多年,其实就是整个计算机应用,从小众化向大众化消费领域,快速前行的30多年. 让我们来一起温故下Windows这么多年的发展历程,看看Windows,是如何在市场和技术这两种力 ...
- angular $digest 运行10次货10次以上会抛出异常
今天在做项目时,遇到一个问题,红圈处输入其他数字(n多次)也不会报异常,但是有一种特例,即0,1,0,1,0,1这种顺序输入时,输入第13次时,页面计算结果(蓝色圆圈)不会更新,困扰了1天多这个问题, ...
- leetcode8:字符串转整数 (atoi)
实现 atoi,将字符串转为整数. 在找到第一个非空字符之前,需要移除掉字符串中的空格字符.如果第一个非空字符是正号或负号,选取该符号,并将其与后面尽可能多的连续的数字组合起来,这部分字符即为整数的值 ...
- Linux下docker报错syntax error:unexpected protocol at end of statement
---恢复内容开始--- [Linux]Shell脚本“syntax error: unexpected end of file”原因及处理 :::https://blog.csdn.net/u013 ...
- Django ORM 常用字段和参数
Django ORM 常用字段和参数 一:常用字段 AutoField int自增列,必须填入参数 primary_key=True.当model中如果没有自增列,则自动会创建一个列名为id的列. I ...
- 分布式服务治理框架dubbo
Dubbo最主要功能有两个 1 RPC调用 2 SOA服务治理方案 Dubbo的架构 Dubbo常见的注册中心有2中,zookeeper以及redis 这篇文章讲解的是采用的zookeeper,要求读 ...
- concurrent.futures性能阐述
python因为其全局解释器锁GIL而无法通过线程实现真正的平行计算.这个论断我们不展开,但是有个概念我们要说明,IO密集型 vs. 计算密集型. IO密集型:读取文件,读取网络套接字频繁. 计算密集 ...
- Beta冲刺吐槽&&获小黄衫心得
引 个人感觉本次Beta冲刺最大的槽点还是--反向延长 "冲刺周期" 做的不一样很容易,做的更好才是非常困难的 遗留的问题 经历了Alpha冲刺,组内大多数同学也大都对实践感到些许 ...
- C++ 使用命名规范
刚开始正式学习C++, 之前写了一个C++ 的小程序,但是并没有注意命名规范之类的.这一次重写一个类似的程序,再加上这几天学习 c++Prime(发现好喜欢这本书.虽然看的很慢,每一小节都感是满满的干 ...
- Code First的实体继承模式
Entity Framework的Code First模式有三种实体继承模式 1.Table per Type (TPT)继承 2.Table per Class Hierarchy(TPH)继承 3 ...