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 ...
随机推荐
- JS的ES6的Symbol
一.Symbol 1.什么是Symbol: Symbol是ES6新添加的原始类型(ES5已有原始数据类型:String,Number,boolean,function,undefined,object ...
- A&G￥C015
A&G￥C015 A A+...+B Problem 正常A+B我还是会的,但是又加了个省略号就不会了/kk B Evilator 不会 C Nuske vs Phantom Thnook 以 ...
- 04-树6 Complete Binary Search Tree (30 分)
A Binary Search Tree (BST) is recursively defined as a binary tree which has the following propertie ...
- 调用Fluent进行多工况计算总结
算例来源:https://confluence.cornell.edu/display/SIMULATION/FLUENT+-+Turbulent+Pipe+Flow 有时候我们对同一模型进行多工况计 ...
- myeclipse的安装与破解
myeclipe安装和破解一直困扰我很长时间,我又是尴尬症的人,不破解就是不行,花费一天时间终于搞定是怎么破解的. 一:首先myeclipse的官方下载网站www.myeclipsecn.com/do ...
- MyBatis(十)：Mybatis 几种批量操作的对比
本章主要讲解几种批量处理的用法及对别,批量处理一般用法包含以下几种: 1)普通foreach处理(没循环一次执行一次与mysql服务器交互操作),实际上也是采用的ExecutorType.SIMPLE ...
- C++ 函数模板print
简述 在知乎看到文章leetcode 的奇怪 println vector 工具,于是手痒自己也写了一个print函数. 因为工作中没有需要写这种代码的情况,所以好久没有写这种代码了,还是挺怀念以前学 ...
- HTML5的服务器EventSource(server-sent event)发送事件
参考资料: HTML5的服务器(server-sent event)发送事件有什么应用场景? W3school HTML 5 服务器发送事件 『后台消息推送功能』,前端除了轮询.scoket.第三方服 ...
- java8学习
1.Function函数 public static void main(String[] args) { TestController t = new TestController(); new T ...
- C语言 宏定义之可变参数
可变参数宏定义 C99编译器标准允许你可以定义可变参数宏(variadic macros),这样你就可以使用拥有可以变化的参数表的宏.可变参数宏就像下面这个样子: #define dbgprint(. ...