使用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> ...
随机推荐
- act_window 属性
窗口Action(ir.actions.act_window ) 最常用的action类型,用于将model的数据展示出来 字段列表: 1.res_model -- 需要在view里显示数据的mode ...
- 【异常】The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
1 详细异常信息 The last packet sent successfully to the server was milliseconds ago. The driver has not re ...
- 【javascript】[].slice.call(arguments)的作用
var thisExtends = function () { var args = [].slice.call(arguments).filter(function (item) { return ...
- 【转载】MCMC和Gibbs Sampling算法
转载随笔,原贴地址:MCMC和Gibbs Sampling算法 本文是整理网上的几篇博客和论文所得出来的,所有的原文连接都在文末. 在科学研究中,如何生成服从某个概率分布的样本是一个重要的问题.如果样 ...
- zencart分类页每页显示产品数量自定义选择的方法
zencart默认分类页每页显示产品数量是固定的,如何让顾客可以选择每页显示的产品的数量呢?效果图 方式一:全部展示 方式二:下拉菜单 修改方法 1.导入sql INSERT INTO configu ...
- 基础简单DP
状态比较容易表示,转移方程比较好想,问题比较基本常见 递推.背包.LIS(最长递增序列),LCS(最长公共子序列) HDU 2048 数塔 由上往下推 状态数太多(100!) 可以由下往上推: d ...
- Jmeter：非 GUI 命令行执行脚本文件
介绍 进行性能测试时,Jmeter 官方文档声明是不建议在 GUI 执行的,此时需要用到命令行. 第一步:环境配置 把 Jmeter安装目录\bin 添加到 系统环境变量path 第二步:命令参数 - ...
- 闭包-IIFE
1)嵌套函数,内部函数访问了外部函数的局部变量,通过返回内部函数,在函数外部调用内部函数,从而更新外部函数的局部变量的过程: 2)代码执行完成之后离开作用域依旧存在 3)有可能发生内存泄露,若对象的引 ...
- Vue 页面 前进刷新 后退不刷新（keepAlive）
前言 遇到这一个个问题 需要是这样的 Vue里面的不刷新问题 页面分为: A 主页 B列表页 C 详情页 A beforeRouteLeave 时设置 to.meta.keepAlive = ...
- Acwing-252-树(点分治)
链接: https://www.acwing.com/problem/content/254/ 题意: 给定一个有N个点(编号0,1,-,N-1)的树,每条边都有一个权值(不超过1000). 树上两个 ...