jq轮播图

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>轮番图</title>

    <style>

        *{

            padding:0;

            margin:0;

        }

        .box{

            width:700px;

            height:500px;

            margin:80px auto;

            border:1px solid red;

            position: relative;

        }

        ul{

            list-style: none;

        }

        div ul.pic li img{

            width:700px;

            height: 500px;

        }

        .box ul.pic li{

            position:absolute;

            display: none;

        }

        div.box ul.point {

            width:135px;  /*15*5+10*5+1*10*/

            height:22px;

            position: absolute;

            left:50%;

            bottom:20px;

            margin-left:-72px;

        }

        div ul.point li{

            width:15px;

            height:15px;

            border-radius: 50%;

            border:1px solid purple;

            float:left;

            margin:5px;

        }

        .left{

            position:absolute;

            left:0;

            top:50%;

        }

        .right{

            position:absolute;

            right:0;

            top:50%;

        }

        .box .ear li{

            width:30px;

            height: 30px;

            line-height: 30px;

            text-align: center;

            font-size: 18px;

            font-weight: bold;

            margin-top:-15px;

            position:absolute;

        }

        /*.box .pic li.show{*/

            /*display:block;}*/

        .point li.shows{

            background-color: red;

        }

    </style>

</head>

<body>

<div class="box">

    <ul class="pic">

    <li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-005.jpg" ></li>

    <li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge.jpg"></li>

    <li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-001.jpg"></li>

    <li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-002.jpg"></li>

    <li ><img src="http://img.ivsky.com/img/bizhi/pre/201512/20/huge-004.jpg"></li>

    </ul>

    <ul class="point">

        <li ></li>

        <li></li>

        <li></li>

        <li></li>

        <li></li>

    </ul>

    <ul class="ear">

        <li class="left">&lt</li>

        <li class="right">&gt</li>

    </ul>

    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>

    <script>

        var $opoi = $("div ul.point li");  //五个圆圈

        var $opic = $("div.box ul.pic li");  //五张图

        var $btn = $("div ul.ear li");  //两个小耳朵

        var len = $opic.length;

        // alert(len);

        var first = 0;

        $opic.eq(first).show();

        $opoi.eq(first).addClass("shows");

        $opoi.on("click",function(){   //控制小圆圈

            var i = $(this).index();

            if (i !== first){

                change(i);

            }

        });

        $btn.on("click",function () {  //控制左右两个小耳朵

            var i = first;

            if($(this).index() == 0){

                i--;

                i %= len;

            }

            else{

                i++;

                i %= len;

            }

            change(i);

        });

        function change(i) {

            $opic.eq(first).fadeOut(500);

            $opoi.eq(first).removeClass("shows");

            first = i;

            $opic.eq(i).fadeIn(500);

            $opoi.eq(i).addClass("shows");

        }

        timer = setInterval(function () {  //设置定时器

            $opic.eq(first).fadeOut(500);

            $opoi.eq(first).removeClass("shows");

            var i = (first+1)%len;

            first = i;

            $opic.eq(i).fadeIn(500);

            $opoi.eq(i).addClass("shows");

        },1000)

    </script>

</div>

</body>

</html>

jq轮播图的更多相关文章

jq轮播图插件
/* * 使用说明 * * 1:需要提供一个标签 * 2:lis:图片的个数 * 3:轮播图的大小 width ,height * 4:图片的地址imgs[0].carou ...
jq 轮播图
<style> #focus{width:500px;height:200px;overflow:hidden;/*用一个div把图片包含设置超出范围隐藏*/} </style> ...
jq轮播图插件—手写
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" ...
jq 轮播图上下自动滚动
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
jq 轮播图转载-周菜菜
<style> li{list-style-type:none ; display:inline; width:90px; height:160px; float:left; } .pic ...
jq轮播图实现
html基本框架如下: <div class="out"> <ul class="img"> <li><a href= ...
jq demo 轮播图，图片可调用，向左，自动+鼠标点击切换
<!doctype html> <html> <head> <meta http-equiv="Content-Type" content ...
jq demo 轮播图，图片可调用，向上，自动+鼠标点击切换
1 <!doctype html> <html> <head> <meta http-equiv="Content-Type" conte ...
用原生的javascript 实现一个无限滚动的轮播图
说一下思路:和我上一篇博客中用JQ去写的轮播图有相同点和不同点相同点: 首先页面布局是一样的同样是改变.inner盒子的位置去显示不同的图片不同点: 为了实现无限滚动需要多添加两张重复的图片左 ...

随机推荐

springboot+thymeleaf项目中使用th:replace访问templates子目录下的模板，会报错找不到模板路径
解决方法: 先将模板路径放置templates目录下,发现可以访问,说明th:replace是可以用的. 那可能是出现在路径问题上面. 于是我开始调错,改路径. 后来在网上查找资料.说了很多种方法. ...
Linux用户管理权限管理内存管理网络管理命令（第四天）
默认添加的用户会自动加入和用户名一样的组中su 切换用户查看当前登陆的用户: whoami id`查看当前用户属于哪个组:groupsgroupadd 组名添加组groupdel 组名删除组gre ...
Spring AOP 基本的使用
1. jar包 2.全局配置文件 <?xml version="1.0" encoding="UTF-8"?> <beans xmlns=&q ...
CMenu类中禁用/变灰某一项
CMenu::EnableMenuItem 启用. 禁用,或变暗的菜单项. UINT EnableMenuItem( UINT nIDEnableItem, UINT nEnable); 参数 ...
数据备份 rsyncd服务器
web服务器传文件到备份服务器: 一. rsync备份服务器,yum install -y rsync makdir /etc/rsyncd touch /etc/rsyncd/rsyncd.conf ...
刷题31. Next Permutation
一.题目说明题目是31. Next Permutation,英文太差看不懂,翻译了一下.才知道是求字典顺序下的下一个排列,不允许使用额外空间.题目难度是Medium! 二.我的实现首先要进一步理解 ...
SQL COOKBOOK SQL经典实例代码笔记第一章代码
-- SQL COOKBOOK CHAPTER1 -- 查看所有内容 select * from emp; -- 可以单列 select empno,ename,job,sal,mgr,hiredat ...
Python 使用print实现进度
import time print("0%",end='') time.sleep(2) print("\r1%",end='') time.sleep(2) ...
Mysql插入数据里有中文字符出现Incorrect string value的错误
问题:Mysql插入数据里有中文字符出现Incorrect string value的错误描述:CMD里直接敲代码插入数据提示的部分截取为:ERROR 1366 (HY000): Inco ...

jq轮播图

jq轮播图的更多相关文章

随机推荐

热门专题