HTML 之轮播图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>index1</title>
<style>
*{margin: 0;
padding: 0;
}
ul{
list-style:none;
}
.outer{
margin: 50px auto;
height: 340px;
width: 790px;
position: relative;
}
.img li{
position:absolute;
top: 0;
left:0;
}
.num {
position: absolute;
bottom: 20px;
text-align: center;
width: 100%;
}
.num li{
display: inline-block;
height: 20px;
width: 20px;
background-color: gray;
color: #ffffff;
text-align:center;
line-height:20px;
border-radius:50%;
margin: 0 10px;
}
.btn{
position: absolute;
height: 60px;
width: 30px;
background-color: darkgray;
color: #ffffff;
text-align: center;
line-height: 60px;
top:50%;
margin-top: -30px;
display: none;
}
.left_btn{
left: 0;
}
.right_btn{
right: 0;
}
.outer:hover .btn{
display:block;
}
.current{
background-color:red!important;
}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><a><img src="image/1.jpeg"/></a></li>
<li><a><img src="image/2.jpeg"/></a></li>
<li><a><img src="image/3.jpeg"/></a></li>
<li><a><img src="image/4.jpeg"/></a></li>
</ul>
<ul class="num">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<div class="left_btn btn"> < </div>
<div class="right_btn btn"> > </div>
</div>
<script src="jquery-3.2.1.min.js"></script>
<script>
$(".num li").mouseover(function(){
$(this).addClass("current").siblings().removeClass("current");
var index = $(this).index();
i = index;
$(".img li").eq(index).fadeIn(1000).siblings().fadeOut(1000);
})
var time = setInterval(move, 1500);
var i = 0;
function move(){
if(i==3){
i=-1;
}
i++;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
function moveL(){
if(i==0){
i=4;
}
i--;
$(".num li").eq(i).addClass("current").siblings().removeClass("current");
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
$(".outer").hover(function(){
clearInterval(time);
},function(){
time=setInterval(move,1500);
})
$(".right_btn").click(function() {
move();
})
$(".left_btn").click(function() {
moveL();
})
</script>
</body>
</html>
参考资料
HTML 之轮播图的更多相关文章
- js 基础篇（点击事件轮播图的实现）
轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...
- 实现下来ScrollView放大轮播图
创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...
- ViewPager轮播图
LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...
- CSS-用伪类制作小箭头（轮播图的左右切换btn）
先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...
- phpcms首页实现轮播图
1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...
- React视角下的轮播图
天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...
- Jquery 轮播图简易框架
=====================基本结构===================== <div class="carousel" style="width: ...
- 原生js焦点轮播图
原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...
- superSlider实现美女轮播图
superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...
- js原生代码实现轮播图案例
一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...
随机推荐
- django 使用post方法出现403错误的解决办法
当采用客户端象django的服务器提交post请求时.会得到403,权限异常.因为django针对提交的请教,有校验.所以会如此. 解决办法: 导入模块:from django.views.decor ...
- jquer WdatePicker 使用 手册
1. 跨无限级框架显示 无论你把日期控件放在哪里,你都不需要担心会被外层的iframe所遮挡进而影响客户体验,因为My97日期控件是可以跨无限级框架显示的 示例2-7 跨无限级框架演示 可无限跨越框架 ...
- 华中农业大学校赛--c The Same Color
Problem C: The Same Color Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 993 Solved: 595[Submit][St ...
- （转载）C++STL中vector容器的用法
vector是C++标准模板库中的部分内容,它是一个多功能的,能够操作多种数据结构和算法的模板类和函数库.vector之所以被认为是一个容器,是因为它能够像容器一样存放各种类型的对象,简单地说vec ...
- UCOS2系统内核讲述（五）_初始化TCB详情
Ⅰ.写在前面 学习本文之前可以参看我前面的文章: UCOS2系统内核讲述(四)_创建任务 上一篇文章讲述了关于函数“OSTaskCreateExt”创建任务函数体里面重要一些的内容,本文接着上一张讲述 ...
- Android基础总结（九）多媒体
多媒体概念(了解) 文字.图片.音频.视频 计算机图片大小的计算(掌握) 图片大小 = 图片的总像素 * 每个像素占用的大小 单色图:每个像素占用1/8个字节 16色图:每个像素占用1/2个字节 25 ...
- ThinkPHP 汉字转成多种形式拼音
模型: <?php namespace Admin\Model; use Think\Model; /** * 汉字转拼音 * @author huangguojin */ class ZHMo ...
- 向服务器发送josn字符串，服务器端解析
<script type="text/javascript"> $(function () { $("#btnsave").click(functi ...
- 第二百六十四节，Tornado框架-基于正则的动态路由映射分页数据获取计算
Tornado框架-基于正则的动态路由映射分页数据获取计算 分页基本显示数据 第一步.设置正则路由映射配置,(r"/index/(?P<page>\d*)", inde ...
- 【BZOJ】1631: [Usaco2007 Feb]Cow Party（dijkstra）
http://www.lydsy.com/JudgeOnline/problem.php?id=1631 看到m<=100000果断用dij(可是好像dij比spfa还慢了在这里?)//upd: ...