Python之路【第二十二篇】:轮播图片CSS
轮播代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="jquery-3.1.1.js"></script>
<title>Title</title>
<style>
.outer{
width: 790px;
height: 340px;
margin: 80px auto;
position: relative;
} .img li{
position: absolute;
list-style: none;
top:0;
left: 0; } .num{
position: absolute;
bottom: 0px;
left: 280px;
/*background-color: #dce7f4;*/
list-style: none;
} .num li{
display: inline-block;
width: 18px;
height: 18px;
background-color: white;
border-radius: 50%;
text-align: center;
line-height: 18px;
margin-left: 14px;
} .btn{
position: absolute;
top: 50%;
width: 30px;
height: 60px;
background-color: lightgrey;
color: white; text-align: center;
line-height: 60px;
font-size: 30px;
opacity: 0.8;
margin-top: -30px;
display: none; } .left{
left: 0;
} .right{
right: 0;
} .outer:hover .btn{
display: block;
} .num .active{
background-color: red; }
</style>
</head>
<body> <div class="outer"> <ul class="img">
<li><a href=""><img src="img/1.jpg" alt=""></a></li>
<li><a href=""><img src="img/2.jpg" alt=""></a></li>
<li><a href=""><img src="img/3.jpg" alt=""></a></li>
<li><a href=""><img src="img/4.jpg" alt=""></a></li>
<li><a href=""><img src="img/5.jpg" alt=""></a></li>
<li><a href=""><img src="img/6.jpg" alt=""></a></li>
</ul> <ul class="num ">
<!--<li class="active"></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
<!--<li></li>-->
</ul>
<div class="left btn"> < </div>
<div class="right btn"> > </div>
</div>
<script>
// 通过jquery自动创建按钮标签
var img_num=$(".img li").length; for (var j=0;j<(img_num);j++){
$(".num").append("<li></li>") }
$(".num li").eq(0).addClass("active"); //手动轮播 // $(".num li").mouseover(function () {
// var index=$(this).index();
//this不应该加引号
// $("this").addClass("active").siblings().removeClass("active")
//
// }) $(".num li").mouseover(function () { // var index=$(this).index();
i=$(this).index();
$(this).addClass("active").siblings().removeClass("active");
//以下两种方法都可实现
// $(".img li").eq(index).show(1).siblings().hide()
$(".img li").eq(index).stop().fadeIn(200).siblings().stop().fadeOut(200)
}); //自动轮播
var c=setInterval(GO_R,1500);
var i=0; function GO_R() {
if(i==img_num-1){
i=-1
}
i++;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000) } function GO_L() {
if(i==0){
i=img_num
}
i--;
$(".num li").eq(i).addClass("active").siblings().removeClass("active");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000)
} $(".outer").hover(function () {
clearInterval(c)
},function () {
c=setInterval(GO_R,1500) }) //button加定播
// $(".right").bind("click",GO_R)
$(".right").click(GO_R);
$(".left").click(GO_L);
</script> </body>
</html>
效果展示：
Python之路【第二十二篇】:轮播图片CSS的更多相关文章
- Python之路(第二十二篇) 面向对象初级：概念、类属性
一.面向对象概念 1. "面向对象(OOP)"是什么? 简单点说,“面向对象”是一种编程范式,而编程范式是按照不同的编程特点总结出来的编程方式.俗话说,条条大路通罗马,也就说我们使 ...
- Python开发【第二十二篇】：Web框架之Django【进阶】
Python开发[第二十二篇]:Web框架之Django[进阶] 猛击这里:http://www.cnblogs.com/wupeiqi/articles/5246483.html 博客园 首页 ...
- Python之路(第二十九篇) 面向对象进阶：内置方法补充、异常处理
一.__new__方法 __init__()是初始化方法,__new__()方法是构造方法,创建一个新的对象 实例化对象的时候,调用__init__()初始化之前,先调用了__new__()方法 __ ...
- Python之路(第二十八篇) 面向对象进阶：类的装饰器、元类
一.类的装饰器 类作为一个对象,也可以被装饰. 例子 def wrap(obj): print("装饰器-----") obj.x = 1 obj.y = 3 obj.z = 5 ...
- Python之路(第二十五篇) 面向对象初级：反射、内置方法
[TOC] 一.反射 反射的概念是由Smith在1982年首次提出的,主要是指程序可以访问.检测和修改它本身状态或行为的一种能力(自省).这一概念的提出很快引发了计算机科学领域关于应用反射性的研究.它 ...
- Python之路(第二十四篇) 面向对象初级：多态、封装
一.多态 多态 多态:一类事物有多种形态,同一种事物的多种形态,动物分为鸡类,猪类.狗类 例子 import abc class H2o(metaclass=abc.ABCMeta): def _ ...
- Python之路(第二十六篇) 面向对象进阶：内置方法
一.__getattribute__ object.__getattribute__(self, name) 无条件被调用,通过实例访问属性.如果class中定义了__getattr__(),则__g ...
- Python之路(第十二篇)程序解耦、模块介绍\导入\安装、包
一.程序解耦 解耦总的一句话来说,减少依赖,抽象业务和逻辑,让各个功能实现独立. 直观理解“解耦”,就是我可以替换某个模块,对原来系统的功能不造成影响.是两个东西原来互相影响,现在让他们独立发展:核心 ...
- Python之路【第二十二篇】CMDB项目
浅谈ITIL TIL即IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库)由英国政府部门CCTA(Central ...
随机推荐
- leetcode 数据库练习 - 1205 每月交易I和II
每月交易(一) Table: Transactions +---------------+---------+| Column Name | Type |+---------------+------ ...
- RookeyFrame 代码层面 常用方法
测试代码均写在这个类里面的,因为是测试嘛,所以表名那些就将就看了.最后写完了再贴上全部代码 类的路径:Rookey.Frame.Operate.Base -> Test -> Class1 ...
- SpringMVC相关试题
1.下列相关Spring自动装配的说法中,错误的是( ). (选择一项) A:在Spring配置文件中,可以通过<bean>元素的autowire属性指定自动装配方式B: autowire ...
- webpack4.0构建项目流程
webpack4.0构建项目流程,具体的就不一一唠叨了,这里给出构建流程步骤: 流程大图: 下载高清大图
- 出现 java.lang.OutOfMemoryError: PermGen space 错误的原因及解决方法
一.原因及解决方法[1] 1.原因:堆内存的永久保存去区内存分配不足(缺省默认为64M),导致内存溢出错误. 2.解决方法:重新分配内存大小,-Xms1024M -Xmx2048M -XX:PermS ...
- leetcode: 最长上升子序列
题目描述: 给定一个无序的整数数组,找到其中最长上升子序列的长度. 示例: 输入: [10,9,2,5,3,7,101,18]输出: 4 解释: 最长的上升子序列是 [2,3,7,101],它的长度是 ...
- 一篇文章理解Redis集群【转】
Redis作为一款性能优异的内存数据库,支撑着亿级数据量的社交平台,也成为很多互联网公司的标配.这里将以Redis Cluster 集群为核心,基于最新的Redis5版本,从原理到实战,玩儿转Redi ...
- IntelliJ IDEA-设置字体大小
setting 设置字体font大小,点击apply-ok
- 平时没有怎么用Excel做 加减乘除 计算，猛地发现，其实Excel 是一个很好的简单计算器
平时没有怎么用Excel做 加减乘除 计算,猛地发现,其实Excel 是一个很好的简单计算器
- html css 浮层 侧边栏
2019-7-1 16:02:25 星期一 实现的效果是点击, 然后从左侧滑出, 再点击, 就滑进去 <!DOCTYPE HTML> <html lang="en" ...