轮播图作业

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>轮播图</title>
<style>
.wrap{
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
ul{
width: 1200px;
height: 200px;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
left: 0;
}
ul>li{
/*display: inline-block;*/
float: left;
width: 300px;
height: 200px;
}
.l1{
background-color: red;
}
.l2{
background-color: green;
}
.l3{
background-color: blue;
}
.l4{
background-color: cyan;
}
.d1{
margin-left: 100px;
}
.d1,.d2,.d3,.d4{
text-align: center;
margin-top: 20px;
margin-right: 10px;
line-height: 30px;
float: left;
border: 3px solid black;
border-radius: 5px;
width: 5px;
height: 5px;
background-color: white;
/*position: absolute;*/
}
div:hover{
background-color: #d3d3d3;
cursor: pointer;
user-select: none;
}
</style>
</head>
<body>
<div class="wrap">
<ul>
<li class="l1"></li>
<li class="l2"></li>
<li class="l3"></li>
<li class="l4"></li>
</ul>
</div>
<div class="d1 d"></div>
<div class="d2 d"></div>
<div class="d3 d"></div>
<div class="d4 d"></div>
</body>
<script src="js/jquery-3.3.1.js"></script>
<script>
$('.d').click(function () {
console.log('123');
$('ul').animate({
left : - ($(this).index()-1) * $('li').width()
},300)
}) </script>
</html>

day59的更多相关文章

  1. day59——orm单表操作

    day59 orm单表操作 对象关系映射(object relational mapping) orm语句 -- sql -- 调用pymysql客户端发送sql -- mysql服务端接收到指令并执 ...

  2. python 全栈开发,Day59(小米商城)

    一.小米商城 准备工作: 访问iconfont,官网链接: http://www.iconfont.cn/ 登录之后,找到需要的图标 将图标下载到本地,解压,重命名为font创建几个空文件夹:css, ...

  3. js动态创建表格------Day59

    刚刚不知道怎么回事,CSDN博客一直打不开,就在博客园完毕了今天的记录,结果临关机,登录了下.发现又好了,就再多花个几分钟转下吧,也无论到底在意的是什么了,权当强迫症了... 前几天记录了动态的加入一 ...

  4. Pyhton学习——Day59

    参考博客: http://www.cnblogs.com/wupeiqi/articles/6144178.html Form 1. 验证 2. 生成HTML(保留上次输入内容) 3. 初始化默认是 ...

  5. (day59)十一、CSRF、Auth模块、impotlib模块、settings源码

    目录 一.模拟实现中间件的编程思想 (一)impotlib模块 (二)实现功能的配置使用 二.跨站请求伪造CSRF (一)由来 (二)form表单的CSRF (三)ajax中的CSRF (1)通过da ...

  6. day59 django初识

    目录 一.借助wsgiref模块实现简易版web框架 二.动静态页面 三.python三大主流web框架 四.启动一个django项目 1 启动前的注意事项 1.1 计算机的问题 1.2 django ...

  7. day59 pip安装django出错解决方案

    在虚拟环境下,输入 pipinstall django ==2.2,安装django,可能会出现超时问题 ​ 这里的报错是网络问题,解决方案有如下三种 (1)多试几次,网络好就装上了 (2)Cmd输入 ...

  8. day59:Linux:编辑工具vim&文件类型&文件属性

    目录 1.Linux编辑工具vim 2.Linux文件类型 3.Linux文件属性 4.今日份Linux练习题 Linux编辑工具vim 1.什么是vim 文本文件的编辑工具,  和windows的n ...

  9. Python之返回函数

    高阶函数可以把函数作为一个结果值返回 举例说明 普通的求积函数是 vim day5-6.py #!/usr/bin/python # -*- coding:utf-8 -*- def product( ...

随机推荐

  1. 常用的第三方模块 requests url

    我们已经讲解了Python内置的urllib模块,用于访问网络资源.但是,它用起来比较麻烦,而且,缺少很多实用的高级功能. 更好的方案是使用requests.它是一个Python第三方库,处理URL资 ...

  2. 团队项目第二阶段个人进展——Day1

    一.昨天工作总结 冲刺第一天,查看了第一阶段的代码 二.遇到的问题 写个的代码发现看不懂了 三.今日工作规划 重新设计页面布局

  3. LeetCode题解之Binary Number with Alternating Bits

    1.题目描述 2.问题分析 将数值转换为二进制,然后将前面的 0 去掉,再遍历一边二进制字符串,对每个字符和其后部的字符进行比较. 3.代码 bool hasAlternatingBits(int n ...

  4. EFCore中SQLSERVER 2008 的分页问题

    自SQLSERVER 2012起新增了 Offset Fetch 语法,因此EFCore默认是以此语法生成相应的分页语句的. 如果我们的目标数据库低于 2012,那么EFCore默认生成的语句在执行的 ...

  5. ionic插件安装与卸载

    使用下面的命令查询.安装.卸载插件: $ ionic plugin list //列出所有已安装插件 $ ionic plugin remove 插件名 //先根据上面的list列出插件,然后根据插件 ...

  6. 分享今天在客户那里遇到的SQLSERVER连接超时以及我的解决办法

    分享今天在客户那里遇到的SQLSERVER连接超时以及我的解决办法 客户的环境:SQLSERVER2005,WINDOWS2003 SP2  32位 这次发生连接超时的时间是2013-8-5  21: ...

  7. c#考勤统计

    现在项目需求,需要从多张表中获取数据,组装到一个实体对象中,并通过计算统计出每个员工的考勤记录.(全凭自己思考做的,不足的地方希望各位大神指正!毕竟自己能力有限,思考不全) 考勤统计列表: 明细列表: ...

  8. Oracle EBS SLA取值

    -- 从GL总账追溯到 => 子分类账SLA => 子模块AP.AR等 SELECT xep.name, -- 法人主体 xep.legal_entity_identifier, -- 法 ...

  9. SQL Server 中为何拥有db_owner权限的账号删除不掉数据库

    今天在公司的SQL Server服务器上,使用了一个只有public和dbcreator角色的账号"user1"在SMSS中去删除一个数据库,但是死活报错说没有权限,报错如下: D ...

  10. USB 相关笔记

    1分析已有代码项目 Android从USB声卡录制高质量音频-----使用libusb读取USB声卡数据 github 项目:usbaudio-android-demo usb声卡取数据项目也是参考的 ...