用jQuery实现优酷首页轮播图
▓▓▓▓▓▓ 大致介绍
看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了
如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解;或者你和我一样学习jQuery不久,那你可以看看我的jQuery小案例(持续更新),互相学习!
预览:优酷首页轮播图
▓▓▓▓▓▓ 思路
思路其实非常简单,就是当点击图片下面的圆点或者图片两边的箭头时,让想要看到的图片走到它的位置,然后当前的图片和想要看到的图片按照一个方向运动就可以了
例如:我们点击第五个小圆点,让第五个图片跑到当前图片的后面,然后一起向左运动
当然了,如果你想要看前面的图片,让图片先跑到当前图片的左边,然后和当前图片一起向右运动
▓▓▓▓▓▓ 基本结构与样式
<div class="lunbo">
<div class="picture">
<ul>
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
</ul>
</div>
<ul class="btn">
<li id="active"><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
<li><div></div></li>
</ul>
<div id="left"><img src="img/left.png"></div>
<div id="right"><img src="img/right.png"></div>
</div>
*{
margin:;
padding:;
}
.lunbo{
width: 100%;
height: 410px;
position: relative;
text-align: center; }
.picture{
width: 1190px;
height: 480px;
position: absolute;
top:;
left: 88px;
overflow: hidden;
}
.picture li{
width: 1190px;
height: 410px;
margin: 0 auto;
list-style-type: none;
margin-top: 70px;
position: absolute;
overflow: hidden;
top: ;
left: ; }
.picture img{
cursor: pointer;
}
.btn{
display: block;
width: 150px;
height: 30px;
position: absolute;
top: 460px;
left: 130px;
} .btn li{
display: block;
width: 10px;
height: 10px;
background-color:white;
list-style-type: none;
position: absolute;
top: 0px;
left: 0px;
border-radius: 10px;
cursor: pointer;
}
#active{
background-color: #03A9F4;
}
.btn li:hover{
background-color:#9e9e9e;
} #left{
position: absolute;
top: 240px;
left: 90px;
cursor: pointer;
}
#right{
position: absolute;
top: 240px;
left: 1220px;
cursor: pointer;
}
然后我们用jQuery来设置初始图片的位置和小圆点的位置
function setCirPos(){
// 设置圆点的位置
$cir.each(function(){
$(this).css({
left:$(this).index()*25 + 500
})
});
// 设置刚开始不显示的图片的位置
$pic.slice(1).each(function(){
$(this).css({
left:$picW
})
})
}
▓▓▓▓▓▓ 自动轮播
先来看看定义的全局变量
var $cir = $('.btn li');
var $pic = $('.picture li');
var $picW = $pic.width();
var $oLeft = $('#left');
var $oRight = $('#right'); // 当前图片
var nowPic = 0;
// 防止用户连续的点击
var canClick = true;
// 定时器
var timer = null;
设置nowPic是为了记录当前显示的图片,因为这个轮播图一共有三种触发图片切换的方法,所以这个变量是三个方法要共享的
设置canClick变量是为了防止用户在图片切换动画效果还未完成的时候在进行点击
// 设置定时器自动切换
timer = setInterval(function(){
auto();
},2000); //自动切换
function auto(){
var index = nowPic + 1;
if(index < 0){
index = 4;
}else if(index > 4){
index = 0;
}
$pic.eq(index).css('left',$picW);
$pic.eq(nowPic).animate({left:-$picW}, 400);
$pic.eq(index).animate({left:0}, 400); nowPic = index;
// 设置当前图片的圆点的样式
$cir.eq(nowPic).attr('id','active').siblings().attr('id','');
}
▓▓▓▓▓▓ 点击小圆点
图片切换的方法都是一样的但是要注意,当点击小圆点时要清楚图片自动切换的定时器,在图片切换完成后,在设置自动切换的定时器
function lunbo(){
$cir.click(function(){
clearInterval(timer);
var index = $(this).index(); if(index > nowPic){
// 点击的值大于当前的值
$pic.eq(index).css('left',$picW);
$pic.eq(nowPic).animate({left:-$picW},400);
}else if(index < nowPic){
// 点击的值小于当前的值
$pic.eq(index).css('left',-$picW);
$pic.eq(nowPic).animate({left:$picW},400);
} $pic.eq(index).animate({left:0},400,function(){
timer = setInterval(function(){
auto();
},3000);
});
nowPic = index;
// 设置当前图片的圆点的样式
$cir.eq(nowPic).attr('id','active').siblings().attr('id','');
});
}
▓▓▓▓▓▓ 点击箭头
当点击箭头时,我们为了防止用户多次连续的点击,所以设置了canClick这个全局变量,当点击了箭头时,要首先判断是否有为完成的动画即canClick是否为true,如果为true,就将canCilck设置为false,防止再次点击箭头,然后进行图片切换的动画,同样不要忘了清楚定时器,最后当切换图片的动画完成时,animate()方法的回调函数执行,将canClick设置为true
// 点击左箭头
$oLeft.click(function(){ if(canClick){
clearInterval(timer);
canClick = false;
var index = nowPic - 1;
if(index < 0){
index = 4;
}else if(index > 4){
index = 0;
}
$pic.eq(index).css('left',-$picW);
$pic.eq(nowPic).animate({left:$picW}, 400);
$pic.eq(index).animate({left:0}, 400,function(){
canClick = true;
timer = setInterval(function(){
auto();
},3000);
}); nowPic = index;
// 设置当前图片的圆点的样式
$cir.eq(nowPic).attr('id','active').siblings().attr('id','');
}
})
// 点击右箭头
$oRight.click(function(){ if(canClick){
clearInterval(timer);
canClick = false;
var index = nowPic + 1;
if(index < 0){
index = 4;
}else if(index > 4){
index = 0;
}
$pic.eq(index).css('left',$picW);
$pic.eq(nowPic).animate({left:-$picW}, 400);
$pic.eq(index).animate({left:0}, 400,function(){
canClick = true;
timer = setInterval(function(){
auto();
},3000);
}); nowPic = index;
// 设置当前图片的圆点的样式
$cir.eq(nowPic).attr('id','active').siblings().attr('id','');
}
})
▓▓▓▓▓▓ 总结
这个效果实现起来很简单,就是刚开始没有想到实现的思路(笨)。
用jQuery实现优酷首页轮播图的更多相关文章
- 关于用jQuery知识来实现优酷首页轮播图!
▓▓▓▓▓▓ 大致介绍 看到了一个轮播图的思路,就想的自己动手实践一下,总体来说用jQuery实现起来简单多了 如果对代码中使用的方法有疑问,可以参考我的jQuery学习之路(持续更新),里面有讲解: ...
- 【VIP视频网站项目二】搭建爱奇艺优酷腾讯视频官网首页轮播图效果及实现原理分析
这个是实现的效果,基本上轮播效果和主流网站的一致,但是我也在上面优化了一些效果, 可以在线预览效果:https://vip.52tech.tech/ 目前项目代码已经全部开源:项目地址:https:/ ...
- web手工项目02-注册功能输入分析,处理,输出方法-测试用例及缺陷编写-首页轮播图和购物车
web手工项目第二天笔记 昨日回顾 搭建测试环境(WAMP,phpStudy,tpshop项目文件) 熟悉项目(四个步骤,三个来源) 项目测试流程(需求评审,测试计划与方案,测试用例设计与评审,测试执 ...
- 商城05——首页轮播图显示实现&Redis环境搭建&Redis实现缓存
1. 课程计划 1.首页轮播图的展示 2.首页大广告展示流程图 3.Redis的常用命令 4.Redis的服务器搭建 (集群的搭建) 5.向业务逻辑中添加缓存 6.Jedis的使用(redis的客 ...
- celery介绍、架构、快速使用、包结构,celery执行异步、延迟、定时任务,django中使用celery,定时更新首页轮播图效果实现,数据加入redis缓存的坑及解决
今日内容概要 celery介绍,架构 celery 快速使用 celery包结构 celery执行异步任务 celery执行延迟任务 celery执行定时任务 django中使用celery 定时更新 ...
- Android自己定义控件之应用程序首页轮播图
如今基本上大多数的Android应用程序的首页都有轮播图.就是像下图这种(此图为转载的一篇博文中的图.拿来直接用了): 像这种组件我相信大多数的应用程序都会使用到,本文就是自己定义一个这种组件,能够动 ...
- angularjs实现首页轮播图
<!DOCTYPE html> <html ng-app="myApp" lang="en"> <head> <met ...
- 使用JS完成首页轮播图效果
获取document.getElementById("id名称"); 事件onload 定时操作setInterval("changeImg()",3000); ...
- Flask实战第48天:首页轮播图实现
首页的布局如下 因为以后所有的内容都是在main-container里面,所以这里我们修改front_base.html,把{% block body%}{% endblock%}放到里面去 < ...
随机推荐
- h5添加音乐
http://changziming.com/post-209.html 加入HTML代码,因为是绑定在每一页的右上方(或者其他位置),定位用了fixed,所以在页面底部/body之前加上html代码 ...
- Redis — CentOS6.4安装Redis以及安装PHP客户端phpredis
一.安装Redis 1.下载安装包 wget http://download.redis.io/releases/redis-2.8.6.tar.gz 2.解压包 tar xzf redis-2.8. ...
- 【 java版坦克大战--事件处理】 坦克动起来了
折腾了这么久,坦克总算能动了.只贴代码编辑不给上首页,花了半个小时的时间写了n多注释. 再顺便把绘图的原理发在这里: 绘图原理 Component类提供了两个和绘图有关的重要方法: ① paint ...
- Android Studio 打包及引用 aar
Android Studio 打包及引用 aar 1. 简述 在比较大的 Android 项目的开发中,我们经常会遇到工程.jar 包等等之间相互引用的方式.一般我们通过在 gradle 文件中配置依 ...
- ASPX在Debug模式下直接link原始CSS而非Bundle后的CSS
由于对CSS做了bundle, debug的时候修改原始css文件不会直接反映到浏览器中, 效率较低. 于是我想在debug的时候直接link原始CSS. 很简单. <% #if DEBUG % ...
- OSS研究
在以前没有毕业之前,做过了一个了播放器,其实就是mplayer的二次开发. 如果在这个播放器之上,加个oss作声音输入,那不就可以做个卡拉OK啦? 1.OSS的定义 OSS(Open Sound Sy ...
- POJ2676 Sudoku(dfs)
题目链接. 题目大意: 就是数独游戏.横竖,每一个9宫方块,必须有1~9,且不重复. 分析: 直接DFS.一开始在原图上搜,会TLE.把要补全的空格,放入数组,这样就不用遍历整个图寻找要填的空格了. ...
- poj1741 bzoj2152
树分治入门 poj1741是男人八题之一,经典的树分治的题目这里用到的是点分治核心思想是我们把某个点i作为根,把路径分为过点i和不过点i先统计过点i这样的路径数,然后在统计其子树中的答案,这样就不断地 ...
- 【Node】fs
var fs = require('fs') // fs 文件系统 var stdin = process.stdin var stdout = process.stdout var stats = ...
- Android Http Server
Android Http Server 1 引言 Android如何构建Http服务器呢?本文的小例子,约莫着,还是能做个参考的^^.恩,例子实现的是PC浏览手机文件,支持了下载和删 ...