用JQ去实现一个轮播效果
前提：用JQ去实现轮播效果一步步的做一个梳理。
首先肯定是轮播的HTML和CSS样式了：
<body>
<div class="pic">
<div class="inner">
<img src="img/1.jpg" alt="">
<img src="img/2.jpg" alt="">
<img src="img/3.jpg" alt="">
<img src="img/4.jpg" alt="">
<img src="img/5.jpg" alt="">
</div>
<ul>
<li><a href="#" class="active"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
<li><a href="#"></a></li>
</ul>
<a href="#" class="prev"><img src="img/slider-prev.png" alt=""></a>
<a href="#" class="next"><img src="img/slider-next.png" alt=""></a>
</div>
</body>
<style>
ul{
list-style: none;
position: absolute;
bottom:;
left: 175px;
}
ul li{
float: left;
}
ul li a{
display: block;
width: 20px;
height: 20px;
border-radius: 50%;
background-color: #ffbeaa;
margin-left: 5px;
opacity: 0.6;
}
ul li a.active{
background-color: red;
}
.inner{
width: 3000px;
height: 400px;
}
.inner img{
display: block;
float: left;
}
.pic{
width: 600px;
overflow: hidden;
position: relative;
}
.prev,.next{
position: absolute;
top: 190px;
opacity: 0.6;
}
.next{
right:;
}
</style>
我用的是5张美女图片，包括左右2个按钮切换和中间5个小按钮悬浮切换效果如下：
下面来一步一步的去实现轮播的效果。
第一步：实现悬浮在中间的五个按钮去实现图片的切换。
首先我来说一下思路：.pic盒子包含.inner盒子包含5张图片。五张图片都是 宽600px 高400px。.inner盒子宽度是3000px，里面的5张图片左浮动，(注意这里给img设置display:block的原因是img为行内块元素浮动后图片之间会有间距)，.pic盒子的宽度设置为一张图片的大小为600px，超出部分隐藏，这样就做成了一个窗口，只能看到一张图片，当悬浮在（中间的5个小按钮我分别按按钮1，2，3，4，5来描述）按钮1时，.inner盒子设置margin-left:0px;,悬浮在按钮2时, .inner盒子设置为margin-left:600px; ，这样就显示出了第二张图片，后面的以此内推，下面是我画的简易图：
然后悬浮在按钮1时：
那么怎么具体去实现我悬浮在当前按钮时.inner盒子去移动相应的距离呢？我们来一步步的去考虑：
悬浮在按钮1时-->.inner盒子移动0px
悬浮在按钮2时-->.inner盒子移动600px
悬浮在按钮3时-->.inner盒子移动1200px
悬浮在按钮4时-->.inner盒子移动1800px
悬浮在按钮5时-->.inner盒子移动2400px
我们可能发现出了规律，5个li的索引分别是0，1，2，3，4 。.inner盒子的移动距离就是 li的索引值乘以负600px，这个值就是.inner盒子的移动距离。
<script>
$("ul li a").mouseover(function(){
//获取a元素的父级元素li的索引值存进变量num 可能的值分别为 0,1,2,3,4
var num=$(this).parent().index();
//根据索引值计算出应该移动的距离,存进变量movePx
var movePx=num * -600 + "px";
//给.inner盒子添加边距
$(".inner").css("marginLeft",movePx);
//根据索引的值找到相应的a元素，并且添加一个红色背景，同时移除其他a元素的红色背景
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
})
</script>
上面的代码效果我就不贴图了，悬浮时图片会动，同时当前的按钮也会改变背景色,但是我想要的效果不是瞬间切换的过程，需要有个时间去过渡平移，，用.animate()事件，500毫秒为动作的时间,我们需要改变一下代码:
<script>
$("ul li a").mouseover(function(){
var num=$(this).parent().index();
var movePx=num * -600 + "px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
})
</script>
第二步：实现左右箭头切换：
<script>
$("ul li a").mouseover(function(){
var num=$(this).parent().index();
var movePx=num * -600 + "px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
})
var num=0;
//点击next切换
$(".next").click(function(){
//如果点击一次next
if(num<4){
num=num+1;
}else{
num=0;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
return false;
})
//点击prev切换
$(".prev").click(function(){
if(num>0){
num=num-1;
}else{
num=4;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
return false;
})
</script>
第三步：加上自动轮播：
<script>
$("ul li a").mouseover(function(){
var num=$(this).parent().index();
var movePx=num * -600 + "px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
})
//设置一个索引初始值为0
var num=0;
//初始化一个变量来装定时器
var timer=null;
//点击next切换
$(".next").click(function(){
if(num<4){
num=num+1;
}else{
num=0;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
return false;
})
//点击prev切换
$(".prev").click(function(){
if(num>0){
num=num-1;
}else{
num=4;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
return false;
})
//定时器函数
function changeTab(){
if (num<4){
num++;
}else{
num=0;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
}
//轮播定时器,3秒执行一次
timer=setInterval(changeTab,3000);
</script>
第四步：当悬浮在.pic盒子上时轮播停止，移出.pic盒子时轮播开始
<script>
$("ul li a").mouseover(function(){
var num=$(this).parent().index();
var movePx=num * -600 + "px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
})
//设置一个索引初始值为0
var num=0;
//初始化一个变量来装定时器
var timer=null;
//点击next切换
$(".next").click(function(){
if(num<4){
num=num+1;
}else{
num=0;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
return false;
})
//点击prev切换
$(".prev").click(function(){
if(num>0){
num=num-1;
}else{
num=4;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
return false;
})
//定时器函数
function changeTab(){
if (num<4){
num++;
}else{
num=0;
}
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
}
//轮播定时器,3秒执行一次
timer=setInterval(changeTab,3000);
//悬浮在窗口时停止轮播
$(".pic").mouseenter(function(){
clearInterval(timer);
})
//鼠标移除窗口时开始轮播
$(".pic").mouseleave(function(){
timer=setInterval(changeTab,3000);
})
</script>
第五步：代码优化
出现的问题：
- 不停的点击左右箭头松开后图片还会继续跑
- 代码中重复性太高，需要封装成函数来优化
- 悬浮在按钮上时图片马上切换，我需要悬浮500毫秒再去切换，时间不达到500毫秒不切换
<script>
var num=0;
var timer=null;
var timeout=null;
// 设置鼠标悬浮在按钮切换事件
$("ul li a").mouseenter(function(event){
//设置定时器前应先判断有没有定时器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
num=$(this).parent().index();
//设置悬浮时500毫秒时切换，不足500毫秒时不会切换
timeout=setTimeout(changgeMg,500);
return false;
})
//悬浮在窗口时停止轮播
$(".pic").mouseenter(function(){
//清除定时器
clearInterval(timer);
})
//鼠标移除窗口时开始轮播
$(".pic").mouseleave(function(){
//设置一个3秒的自动轮播定时器
timer=setInterval(changeTab,1000);
})
//点击next切换
$(".next").click(function(){
//设置定时器前应先判断有没有定时器，有就清除
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num<4){
num++;
}else{
num=0;
}
//设置点击后500毫秒去切换，如果点击间隔小于500毫秒不停点击则不会切换
timeout=setTimeout(changgeMg,500);
//不让a元素去默认跳转
return false;
})
//点击prev切换
$(".prev").click(function(){
if(timeout){
clearTimeout(timeout);
timeout=null;
}
if(num>0){
num--;
}else{
num=4;
}
//设置点击后500毫秒去切换，如果点击间隔小于500毫秒不停点击则不会切换
timeout=setTimeout(changgeMg,500);
return false;
})
//轮播定时器
timer=setInterval(changeTab,1000);
//移动盒子和给当前索引上色
function changgeMg(){
var movePx=num*-600+"px";
$(".inner").animate({"marginLeft":movePx},500);
$("ul li").eq(num).find("a").addClass("active").parent().siblings().find("a").removeClass("active");
}
//定时器函数
function changeTab(){
if (num<4){
num++;
}else{
num=0;
}
changgeMg();
}
</script>
最后是实现的效果动画：
最后不满意的地方在于目前无法去实现无缝切换，第一张和最后一张图片之间的切换会经过中间的三张图片，我现在也不知道如何去实现他，(⊙﹏⊙)b，后面学习之后会加上无缝切换的实现方法，本来准备写的更加详细一点的，语言能力有限，再加上时间的关系只能到这种地步了，中间有疏漏和错误还希望能批评指教。
用JQ去实现一个轮播效果的更多相关文章
- JS、JQ实现焦点图轮播效果
JS实现焦点图轮播效果 效果图: 代码如下,复制即可使用: (不过里面的图片路径需要自己改成自己的图片路径,否则是没有图片显示的哦) <!DOCTYPE html> <html> ...
- jQ实现的一个轮播图
众所周知,轮播图是被广泛的运用的. 轮播图我们在很多的网站上都可以看到,例如淘宝.京东这些网站都很常见. 下面开始我们的轮播之旅: 搭建我们的骨架: <!DOCTYPE html> < ...
- 仿ofo单车做一个轮播效果
github地址 首先我是利用swiper.js做的,因为这个很强大,哈哈~~,上代码 html很简单 <body> <div class="swiper-containe ...
- JQ 实现轮播图（3D旋转图片轮播效果）
轮播图效果如下: 代码: <!DOCTYPE html> <html xmlns="/www.w3.org/1999/xhtml"> <head> ...
- Vue如何使用vue-awesome-swiper实现轮播效果
在Vue项目中如何实现轮播图的效果呢,在传统项目中第一个想到的一般都是swiper插件,代码简单好用.一开始我也是直接npm安装swiper然后照着之前的传统写法写,然而却没有效果,只会显示图片但没有 ...
- 基于css3的轮播效果
花了一上午来调整页面在ie10上的显示问题,sass编译生成的css文件在ie内核下一直不能正确加载,果然兼容性的问题还需要好好研究.转入正题,用css3实现轮播效果主要是基于css3的framewo ...
- viewPager+Handler+Timer简单实现广告轮播效果
基本思想是在Avtivity中放一个ViewPager,然后通过监听去实现联动效果,代码理由详细的解释,我就不说了. MainActivity.java package com.example.adm ...
- css3动画使用技巧之—JQ配合css3实现轮播之animation-delay应用
<!DOCTYPE html> <html> <head> <title>css3动画使用技巧之—JQ配合css3实现轮播之animation-dela ...
- vue项目全局引入vue-awesome-swiper插件做出轮播效果
在安装了vue的前提下,打开命令行窗口,输入vue init webpack swiper-test,创建一个vue项目且名为swiper-test(创建速度可能会有点慢,耐心等),博文讲完后,源码托 ...
随机推荐
- 写时复制和fork,vfork,clone
写时复制 原理: 用了“引用计数”,会有一个变量用于保存引用的数量.当第一个类构造时,string的构造函数会根据传入的参数从堆上分配内存,当有其它类需要这块内存时,这个计数为自动累加,当有类析构时, ...
- centos7上docker安装和使用教程
Docker 是一个创建和管理 Linux 容器的开源工具.容器就像是轻量级的虚拟机,并且可以以毫秒级的速度来启动或停止.Docker 帮助系统管理员和程序员在容器中开发应用程序,并且可以扩展到成千上 ...
- VB中Excel 2010的导入导出操作
VB中Excel 2010的导入导出操作 编写人:左丘文 2015-4-11 近来这已是第二篇在讨论VB的相关问题,今天在这里,我想与大家一起分享一下在VB中如何从Excel中导入数据和导出数据到Ex ...
- Fatal error: Call to undefined function Think\C() in /var/www/html/ceshi.hzheee.com/think/ThinkPHP/Library/Think/Think.class.php on line 334 这个问题解决
当APP_DEBUG为true时,包含图中这个文件,文件中又引导包含这些库文件,可以看出安装thinkphp3.2.3时ThinkPHP/Common/下是functions.php,把它改成func ...
- 【UVA】10891 Game of Sum（区间dp）
题目 传送门:QWQ 分析 大力dp.用$ dp[i][j] $表示$ [i,j] $A能得到的最高分 我看到博弈论就怂... 代码 #include <bits/stdc++.h> us ...
- Solr Facet 统计查询
一)概述 Facet是solr的高级搜索功能之一,可以给用户提供更友好的搜索体验.在搜索关键字的同时,能够按照Facet的字段进行分组并统计.例如下图所示,你上淘宝,输入“电脑”进行搜索,就会出现品牌 ...
- kvmgt-kernel 实现GPU虚拟化
KVMGT-kernel是Intel开源技术01.org推出的一项完整的GPU虚拟化解决方案,在KVM和XEN的基础上实现.本文档对该技术进行相应测试,让大家有个基本参考和了解.KVMGT-kerne ...
- django2.0数据展示流程
之前刚刚实现了数据添加的流程,那么数据展示是怎么回事 1 先在 views.py 中定义函数 增加获取数据的方式 from django.shortcuts import render from bl ...
- pdf转换成可在线浏览的电子杂志zmaker_pdf
zmaker是曾经国内最流行的电子杂志制作软件,可惜可惜,不过幸好有人给发布了 最新版的 其实主要是2个流程 一个是软件的安装 软件的下载和安装请参考 官方教材 http://bbs.emaghome ...
- Matlab信号处理工具箱函数
波形产生和绘图chirp 产生扫描频率余弦diric 产生Dirichlet函数或周期Sinc函数gauspuls 产生高斯调制正弦脉冲pulstran 产生脉冲串rectpuls 产生非周期矩形信号 ...