用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 ...

随机推荐

jvm特性(3)( 收集算法和收集器的概念）
java内存模型和线程规范 JVM高级特性与实践(三):垃圾收集算法与垃圾收集器实现大致知识点如下: 4种垃圾收集算法概念的学习 7种垃圾收集器特征的学习一. 垃圾收集算法 1. 标记-清除算 ...
maven安装以及eclipse配置maven
详细地址: http://jingyan.baidu.com/article/295430f136e8e00c7e0050b9.html 介绍安装maven,配置Maven环境变量,同时在Eclips ...
bootstrap-validator
使用bootstrap-validator挺多的,虽然自己写认证并不复杂,我一向喜欢现成的控件,原因是风格一致,不容易出错. 这个是接口文档:http://bv.doc.javake.cn/setti ...
JS滑动到页面底部
window.scrollTo(0, document.documentElement.clientHeight); 该 window 对象在DOM有一个 scrollTo 滚动到打开窗口的任意位置 ...
input验证码框，输入非数字或非12位时，红框提示;每4位加一个空格
以下代码:input验证码框,输入非数字或非12位时,红框提示;每4位加一个空格 //input验证码框,输入非数字或非12位时,红框提示;每3位加一个空格 $(".text"). ...
thymeleaf的常见问题汇总
thymeleaf的常见问题汇总 1.thymeleaf th:href 多个参数传递格式 th:href="@{/Controller/update(param1=1,param2=${p ...
Intellij-怎么避免import.*包，以及import包顺序问题
Intellij版本 IntelliJ IDEA 2018.1.2 (Ultimate Edition) Build #IU-181.4668.68, built on April 24, 2018 ...
Disconf 学习系列之全网最详细的最新稳定Disconf 搭建部署（基于Ubuntu14.04 / 16.04）（图文详解）
不多说直接上干货! https://www.cnblogs.com/wuxiaofeng/p/6882596.html (ubuntu16.04) https://www.cnblogs.com/he ...
C51单片机中data、idata、xdata、pdata的区别
C51单片机中data.idata.xdata.pdata的区别 data: 固定指前面0x00-0x7f的128个RAM,可以用acc直接读写的,速度最快,生成的代码也最小. idata: 固定指前 ...
[笔记] Fiddler 抓包工具的使用
目录 Filler 的特点 Fidder工具的下载安装 Fidder 证书安装 Fiddler工作原理 Fidder 常见的命令和按钮 Fiddler 各种疑难杂症 Fillder 的特点 Fidde ...

用jquery实现带左右按键的轮播图

用jquery实现带左右按键的轮播图的更多相关文章

随机推荐

热门专题