用jquery实现带左右按键的轮播图
成品如下：
简单来说就是点击“右”按钮时，转换到右边的下一幅图片，同时上面的小方块颜色也跟着改变，如果已经是最后一幅图片，再点击“右”，则转换到第一幅图片，是直接向左移找到第一幅图的，明天再做一下无缝切换的效果，即最后一幅图放完了以后第一幅图从右滑进来跟上。点击“左”同理。
下面是html代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="test_ch4.css" id="herf" />
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<title>test_ch4</title>
<meta charset="utf-8"/>
</head>
<body>
<div id="wrap"> <div id="head" >
<div id="head_l">
<div id="head_l_w">
<span class="white blue" ></span>
<span class="white"></span>
<span class="white"></span>
<span class="white"></span>
</div>
<span id="left">左</span><span id="right">右</span>
</div>
</div>
<div id="video">
<div id="inner">
<ul>
<li><a href="">
<img src="01.jpg" alt="" /></a>
<p>海贼王</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="01.jpg" alt="" /></a>
<p>海贼王</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="01.jpg" alt="" /></a>
<p>海贼王</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="01.jpg" alt="" /></a>
<p>海贼王</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="02.jpg" alt="" /></a>
<p>哆啦A梦</p>
<span>播放：33,326</span></li>
<li><a href="">
<img src="02.jpg" alt="" /></a>
<p>哆啦A梦</p>
<span>播放：33,326</span></li>
<li><a href="">
<img src="02.jpg" alt="" /></a>
<p>哆啦A梦</p>
<span>播放：33,326</span></li>
<li><a href="">
<img src="02.jpg" alt="" /></a>
<p>哆啦A梦</p>
<span>播放：33,326</span></li>
<li><a href="">
<img src="03.jpg" alt="" /></a>
<p>火影忍者</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="03.jpg" alt="" /></a>
<p>火影忍者</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="03.jpg" alt="" /></a>
<p>火影忍者</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="03.jpg" alt="" /></a>
<p>火影忍者</p>
<span>播放：28,276</span></li>
<li><a href="">
<img src="04.jpg" alt="" /></a>
<p>龙珠</p>
<span>播放：33,326</span></li>
<li><a href="">
<img src="04.jpg" alt="" /></a>
<p>龙珠</p>
<span>播放：33,326</span></li>
<li><a href="">
<img src="04.jpg" alt="" /></a>
<p>龙珠</p>
<span>播放：33,326</span></li>
<li><a href="">
<img src="04.jpg" alt="" /></a>
<p>龙珠</p>
<span>播放：33,326</span></li>
</ul>
</div>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(){
var page = 1;
var v_width = $("#video").width() + 20;
$("#right").click(function(e){
if(!$("#video").is(":animated")){
if(page % 4 == 0)
{
$("#video").animate({left:"0px"},1000);
page = 1;
}
else {
$("#video").animate({left:'-='+v_width},1000);
page++;
}
}
$("#head_l_w span").attr("class","white");
$("span.white").eq(page%4-1).attr("class","blue"); });
$("#left").click(function(){
if(!$("#video").is(":animated")){
if(page % 4 == 1)
{
$("#video").animate({left:'-='+v_width*3},1000);
page = 4;
}
else {
$("#video").animate({left:'+='+v_width},1000);
page--;
}
$("#head_l_w span").attr("class","white");
$("span.white").eq(page%4-1).attr("class","blue");
}
});
});
</script>
</html>
css代码：
ul {list-style:none; padding:;}
ul li {
display:inline-block;
margin: 10px 2px 0;
padding: 8px;
}
ul li a {
display: block;
height: 80px;
width: 128px;
}
ul li img{
height: 80px;
width: 128px;
}
a { text-decoration:none;}
p{
color: blue;
font-size: 12px;
margin:;
padding:;
}
span {
font-size: 12px;
color: gray;
}
#wrap {
width: 595px;
overflow: hidden;
border: 1px solid gray;
}
#video {
position: relative;
left: 0px;
height: 160px;
width: 592px;
}
#inner {
width: 2500px;
height: 170px;
margin-bottom: 10px;
}
#head {
background: #fff;
}
#head_l span {
display: inline-block;
}
#right,#left{
color: black;
font-size: 14px;
margin-right: 20px;
cursor: pointer;
}
.white {
width: 5px;
height: 5px;
background-color: white;
margin-right:10px;
border: 1px solid gray;
}
.blue{
width: 5px;
height: 5px;
background-color: blue;
margin-right:10px;
border: 1px solid gray;
}
在程序中，用page来记录是第几屏在展示，然后选择相应的小方块让它变蓝，并且计算为了移到下一屏应该怎样进行相对定位。在布局里还有一个小技巧，就是包裹内容区的div要比外层div长，这样内容（总共4屏）在里层排成一排，但外层只能显示出1屏。
用jquery实现带左右按键的轮播图的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 带无缝滚动的轮播图（含JS运动框架）
今天学习了一下轮播图的写作,想到前一阵学过的无缝滚动得思想,所以就把轮播与滚动结合了一下.不过我的代码的神逻辑我自己都不敢恭维,在没网没参照的情况下,只能硬着头皮往下写,希望跟大家共勉吧. js运动框 ...
- JQuery手写一个简单的轮播图
做出来的样式: 没有切图,就随便找了一些图片来实现效果,那几个小星星萌不萌. 这个轮播图最主要的部分是animate(),可以先熟悉下这个方法. 代码我放到了github上,链接:https://gi ...
- 用jQuery实现简单的简单的轮播图
图片来源 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Jquery基础（动画效果的轮播图特效）
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- jquery左右切换的无缝滚动轮播图
1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...
- 基于Swiper 2.7.6实现的带缩略图功能的轮播图
非原创,只能适合PC端,如果是移动端,只需要修改界面的大小即可.界面如下: 链接:http://pan.baidu.com/s/1pK9XdUV 密码:jsyk
- 带无缝滚动的轮播图（含JS运动框架）-简洁版
昨天写的神逻辑,今天终于解决,经过大家的商讨,终于研究出来一套简单的代码!!! js代码如下: <script> window.onload = function() { var oWra ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
随机推荐
- linux 服务器性能监控（一）
这篇文章主要介绍一些常用的linux服务器性能监控命令,包括命令的常用参数.指标的含义以及一些交互操作. 几个问题 命令本身并不复杂,关键是你对操作系统基础知识的掌握和理解,先来看看下面几个问题: C ...
- Github只下载某一目录的文件
比如要下载: https://github.com/xubo245/SparkLearning/tree/master/docs 将“tree/master”改成“trunk https://gith ...
- iOS9新特性－UIStackView
1. UIStackView相关属性理解 UIStackView是iOS9之后推出的,我也是第一次接触,在学习的过程中对于其中的相关属性,尤其是对其中的distribution几个属性值,一知半解的, ...
- Java之IO(一)InputStream和OutputStream
转载请注明源出处:http://www.cnblogs.com/lighten/p/6964702.html 1.前言 计算机的IO操作一直都是比较重要的一环,IO顾名思义,就是输入输出流.不管是磁盘 ...
- [转] 在linux下使用Terminator
Ubuntu自带的终端是gnome-terminal,虽然能用但是不能支持屏幕分割和选择复制等功能,于是换用terminator作为默认终端. 安装 sudo apt-get install term ...
- 删除Open with Atom右键菜单
特别特别讨厌Atom的右键菜单,叕没有设置项可以去掉,烦!安装完RegScanner v2.15汉化版之后,开始搜索删除Atom的右键菜单 1.打开E:\RegScanner2.加载配置文件 E:\R ...
- Spring+Druid+SpringMVC的搭建（附Demo）
最近公司事情比较少,便想利用这段空闲时间做一个自己的博客. 前端界面已经搞好,感谢杨姐的模板,自己稍微把模板没有的模块给补全了. 今天便开始自己的SSM框架搭建,数据库链接是采用数据库连接池.先上个项 ...
- java.lang.NoSuchMethodError: org.json.JSONArray.iterator()Ljava/util/Iterator 阿里云短信
请尝试使用 <dependency> <groupId>com.aliyun</groupId> <artifactId>aliyun-java-sdk ...
- 一个基于Socket的http请求监听程序实现
首先来看以下我们的需求: 用java编写一个监听程序,监听指定的端口,通过浏览器如http://localhost:7777来访问时,可以把请求到的内容记录下来,记录可以存文件,sqlit,mysql ...
- redis High Availability---Redis Sentinel翻译
注意,本文档为最新(11月21日),旧版本的可以参考:http://redis.io/topics/sentinel-old 不鼓励使用旧版本的文档. Redis Sentinel是一个用来管理Red ...