使用jQuery做简单的图片轮播效果
CSS实现垂直居中
jQuery中简单的淡入淡出动画效果（fadeIn，fadeOut）
定时器（setInterval，clearInterval）
jQuery中增删类（addClass，removeClass）
二、特效分析
网页开始加载的时候，图片开始做轮播，效果为淡入淡出。当轮播到最后一个图片，从第一个图片开始重新做轮播。
图片与下面的圆点相对应，鼠标移入该圆点时，对应图片淡入，圆点增加当前样式。
左右两边附有左右按钮，点击左按钮，当前图片的左边图片淡入，当左边图片至第一个时，从最后一个图片依次向左重新淡入；点击右按钮，当前图片的右边图片淡入，当右边图片至最后一个时，从第一个图片依次向右重新淡入。
三、逻辑操作
（一）HTML
<div class="container">
<div class="box">
<img src="https://img-blog.csdn.net/20170908172159479">
<img src="https://img-blog.csdn.net/20170908172353986">
<img src="https://img-blog.csdn.net/20170908172424315">
<img src="https://img-blog.csdn.net/20170908172444061">
<img src="https://img-blog.csdn.net/20170908172525692">
<img src="https://img-blog.csdn.net/20170908172549035">
</div>
<div class="circle">
<b class="current"></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
<div class="btn left"> < </div>
<div class="btn right"> > </div>
</div>
html样式没有什么难点，都是最基本的样式。
（二）CSS样式
.container {
position: absolute;
top: 100px;
left: 100px;
width: 600px;
height: 270px;
}
/*使用绝对定位，使全部图片叠加到一块*/
.box, .box img {
position: absolute;
top:;
left:;
}
/*下面小圆点，使用绝对定位，位于图片的正下方*/
.circle {
width: 200px;
height: 14px;
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -100px;
text-align: center;
cursor: pointer;
}
/*每个小圆点的样式*/
.circle b {
display: inline-block;
width: 14px;
height: 14px;
background-color: #000;
border-radius: 50%;
margin: 3px;
}
/*小圆点的当前样式，也是鼠标移上去的样式*/
.circle .current {
background-color: #fff;
}
/*左右两侧的按钮，采用绝对定位*/
.btn {
position: absolute;
top: 50%;
width: 40px;
height: 50px;
margin-top: -25px;
background-color: rgba(255, 255, 255, .7);
text-align: center;
line-height: 50px;
font-size: 50px;
cursor: pointer;
}
.left {
left:;
}
.right {
right:;
}
top: 50%;然后再设置margin-top的值为要居中元素的高的-(1/2)，也就是再向上移动该元素的高的1/2距离；这个方法对于水平居中也是有效的，left: 50%;然后再设置margin-left的值为要居中元素的宽的-(1/2);
（三） jQuery动态效果
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
/*i表示当前图片的下标和当前圆点的下标（图片和圆点是对应关系）*/
var i = 0;
var timer;
$(function(){
/*Step 1： 设置页面刚加载出来显示的是第一张图片*/
$("img").eq(0).show().siblings().hide();
/*开始做图片轮播，使用定时器*/
start();
/*Step 2： 鼠标移入小圆点的时候，首先清除定时器，找到当前圆点的索引，改变当前显示的图片，使其变换成圆点对应的图片，当前圆点变换样式*/
$("b").hover(function(){
clearInterval(timer);
i = $(this).index();
change();
}, function(){
/*鼠标移出的时候，重新启动定时器*/
start();
});
/*Step 3： 点击左边按钮时候，显示当前图片的左边的第一个图片，再点击，依次向左，图片变换，圆点样式变换。当停止点击按钮时，图片依旧一定时间内显示下一个图片（右边的第一个）*/
$(".left").click(function(){
i--;
/*当图片已经是第一个，再点击的时候，显示最后一张图片*/
if(i == -1){
i = 5;
}
change();
});
/*Step 4： 点击右边按钮时候，显示当前图片的右边的第一个图片，原理同左边图片效果*/
$(".right").click(function(){
i++;
/*当图片已经是最后一个，再点击的时候，显示第一张图片*/
if(i == 6){
i = 0;
}
change();
});
});
/*开始轮播函数*/
function start(){
/*定时器，每个图片在页面上停留的时间是3s*/
timer = setInterval(function(){
i++;
if(i == 6){
i = 0;
}
change();
}, 3000);
}
/*当前图片及对应圆点变换函数*/
function change(){
/*当前图片淡入，其他图片淡出*/
$("img").eq(i).fadeIn(300).siblings().stop(true, true).fadeOut(300);
/*当前圆点添加类current，其他圆点删除其类current*/
$("b").eq(i).addClass("current").siblings().removeClass("current");
}
</script>
这个方法做轮播对我来说是比较简单的，思维逻辑清晰，代码也简单。
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>轮播图制作</title>
<style>
.container {
position: absolute;
top: 100px;
left: 100px;
width: 600px;
height: 270px;
}
.box, .box img {
position: absolute;
top:;
left:;
}
.circle {
width: 200px;
height: 14px;
position: absolute;
bottom: 15px;
left: 50%;
margin-left: -100px;
text-align: center;
cursor: pointer;
}
.circle b {
display: inline-block;
width: 14px;
height: 14px;
background-color: #000;
border-radius: 50%;
margin: 3px;
}
.circle .current {
background-color: #fff;
}
.btn {
position: absolute;
top: 50%;
width: 40px;
height: 50px;
margin-top: -25px;
background-color: rgba(255, 255, 255, .7);
text-align: center;
line-height: 40px;
font-size: 50px;
cursor: pointer;
}
.left {
left:;
}
.right {
right:;
}
</style>
</head>
<body>
<div class="container">
<div class="box">
<img src="https://img-blog.csdn.net/20170908172159479">
<img src="https://img-blog.csdn.net/20170908172353986">
<img src="https://img-blog.csdn.net/20170908172424315">
<img src="https://img-blog.csdn.net/20170908172444061">
<img src="https://img-blog.csdn.net/20170908172525692">
<img src="https://img-blog.csdn.net/20170908172549035">
</div>
<div class="circle">
<b class="current"></b>
<b></b>
<b></b>
<b></b>
<b></b>
<b></b>
</div>
<div class="btn left"> < </div>
<div class="btn right"> > </div>
</div>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.js"></script>
<script type="text/javascript">
var i = 0;
var timer;
$(function(){
$("img").eq(0).show().siblings().hide();
start();
$("b").hover(function(){
clearInterval(timer);
i = $(this).index();
change();
}, function(){
start();
});
$(".left").click(function(){
i--;
if(i == -1){
i = 5;
}
change();
});
$(".right").click(function(){
i++;
if(i == 6){
i = 0;
}
change();
});
});
function start(){
timer = setInterval(function(){
i++;
if(i == 6){
i = 0;
}
change();
}, 3000);
}
function change(){
$("img").eq(i).fadeIn(300).siblings().stop(true, true).fadeOut(300);
$("b").eq(i).addClass("current").siblings().removeClass("current");
}
</script>
</body>
</html>
使用jQuery做简单的图片轮播效果的更多相关文章
- JQuery简单实现图片轮播效果
很多页面都需要用到界面轮播,但是用原生js相对来说比较复杂,用jQuery实现效果比较迅速,写个简单的demo 1.首先在HTML页面要放置轮播图案位置插入div,这里写了轮播图片数量为3张,所以定义 ...
- viewPager+Handler+Timer简单实现广告轮播效果
基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...
- 天猫首页迷思之－jquery实现左侧广告牌图片轮播
本次要实现的是天猫首页每个楼层左侧的图片轮播效果.见图: 功能点有:点击右箭头向右滑动:点击左箭头向左滑动:什么都不点自动滑动. 1.实现样式.简单分析一下大概的html结构.一个大的div里面包含两 ...
- jQuery个性化图片轮播效果
jQuery个性化图片轮播效果 购物产品展示:图片轮播器<效果如下所示> 思路说明: 每隔一段时间,实现图片的自动切换及选项卡选中效果,鼠标划入图片动画停止,划出或离开动画开始 两个区域: ...
- 基于jQuery可悬停控制图片轮播代码
基于jQuery可悬停控制图片轮播代码.这是一款可悬停切换全屏轮播jQuery幻灯片.效果图如下: 在线预览 源码下载 实现的代码: <!-- 轮播广告 --> <div id= ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- js实现淘宝首页图片轮播效果
原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...
- 超实用的JavaScript代码段 Item3 --图片轮播效果
图片轮播效果 图片尺寸 统一设置成:490*170px; 一.页面加载.获取整个容器.所有放数字索引的li及放图片列表的ul.定义放定时器的变量.存放当前索引的变量index 二.添加定时器,每隔2秒 ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
随机推荐
- Java面向对象(一)
面向对象(Object Oriented) 面向过程:事物比较简单.将问题分解为若干个步骤.按照步骤依次执行.面向对象:事物比较复杂.在解决面向对象的过程中,最后的执行部分还是面向过程方式,面向过程和 ...
- Java SE 核心 II【Collection 集合框架】
Collection集合框架 在实际开发中,需要将使用的对象存储于特定数据结构的容器中.而 JDK 提供了这样的容器——集合框架,集合框架中包含了一系列不同数据结构(线性表.查找表)的实现类.集合的引 ...
- bom and dom
bom:Broswer Object Model: 浏览器对象模型- navigator: 获取客户机的信息(浏览器的信息)document.write(navigator.appName);- sc ...
- Redis的keyspace notification（键空间通知）
文章来源https://www.cnblogs.com/tinywan/p/5903988.html 一.需求分析: 设置了生存时间的Key,在过期时能不能有所提示? 如果能对过期Key有个监听,如何 ...
- jmeter 压力测试tcp
cmd下管理员执行 jmeter 界面 英文版 中文切换以后不能执行 最多跑905个线程 线程限制 查看结果数 界面会跑死 windows环境 注意:测试1万的tcp并发连接 大爷的 window最 ...
- Solr——Java应用
Solr有一个客户端SolrJ 创建一个Java Project 引入Jar包 添加test类 package com.solr.test; import java.io.IOException; i ...
- 第七章 路由 71 路由-router-link的使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- mybatis中#{}和${}的区别(转载)
原文地址:http://www.cnblogs.com/baizhanshi/p/5778692.html 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by ...
- BZOJ1601 [Usaco2008 Oct]灌水[最小生成树]
显然分析可知这个图最后连起来是一个森林,每棵树有一个根再算一个代价.那么这些跟需要连向某一点一个建立水库的代价,且根可以有多个但不能没有,则考虑用超级源点0向所有点连虚边,Prim跑MST即可保证有至 ...
- MySQL BinLog Server 搭建实战
一.MySQL Binlog server 介绍 MySQL Binlog Server: 它使用 mysqlbinlog 命令以 daemon 进程的方式模拟一个 slave 的 IO 线程与主库连 ...