用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中如何查看某个端口是否被占用
之前查询端口是否被占用一直搞不明白,问了好多人,终于搞懂了,现在总结下: 1.netstat -anp |grep 端口号如下,我以3306为例,netstat -anp |grep ...
WebDriver高级应用实例（1）
1.1使用JavaScriptExecutor单击元素被测网页的网址: http://www.baidu.com Java语言版本的API实例代码 import org.testng.annotat ...
rabbitmq使用日记
一.安装添加安装源 #echo 'deb http://www.rabbitmq.com/debian/ testing main' | sudo tee /etc/apt/sources.list ...
oracle 转 mysql 最新有效法
关键字:Oracle 转 MySQL . Oracle TO MySQL 没事试用了一下Navicat家族的新产品Navicat Premium,他集 Oracle.MySQL和PostgreSQL管 ...
(转)mysql的sql_mode合理设置
mysql的sql_mode合理设置目录 http://xstarcd.github.io/wiki/MySQL/MySQL-sql-mode.html http://dev.my ...
Impala配置HA-Nginx
Impala的高可用配置,官方的例子用的是Haproxy,考虑到nginx配置简单,使用人群广泛,再加上nginx1.9以后支持TCP的负载均衡,所以选用nginx. nginx安装:yum inst ...
http编程（一）使用javaAPI实现
Java Http编程中常见的实现方式是使用Java 提供的API,另外就是使用Apache提供的 API 1.通过Java提供的API实现Http编程类:URL:类 URL 代表一个统一资源定位符 ...
IDEA里点击Build，再Build Artifacts没反应，灰色的？解决办法（图文详解）
不多说,直接上干货! 问题详情如下:点击Build ,再 Build -> Build Artifacts,没反应??? 解决办法 1.File,再Project Structure 2.然后 ...
ActiveMQ HelloWorld入门
在P2P的消息模型中,双方通过队列交流,一个队列只有一个生产者和一个消费者.a.消息生产者 package com.ljq.durian.test.activemq; import javax.jms ...
YAOLEI
http://www.cnblogs.com/skyblue/p/3356933.html

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

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

随机推荐

热门专题