<!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 之轮播图的更多相关文章

  1. js 基础篇(点击事件轮播图的实现)

    轮播图在以后的应用中还是比较常见的,不需要多少行代码就能实现.但是在只掌握了js基础知识的情况下,怎么来用较少的而且逻辑又简单的方法来实现呢?下面来分析下几种不同的做法: 1.利用位移的方法来实现 首 ...

  2. 实现下来ScrollView放大轮播图

    创建工程,创建一个UIScrollView属性,并遵循其协议: #define kWidth self.view.frame.size.width//屏幕宽 #define kHeight self. ...

  3. ViewPager轮播图

    LoopViewPagerLayout无限轮播 项目地址:https://github.com/why168/LoopViewPagerLayout 支持三种动画: 支持修改轮播的速度: 支持修改滑动 ...

  4. CSS-用伪类制作小箭头(轮播图的左右切换btn)

    先上学习地址:http://www.htmleaf.com/Demo/201610234136.html 作者对轮播图左右按钮的处理方法一改往常,不是简单地用btn.prev+btn.next的图片代 ...

  5. phpcms首页实现轮播图

    1.在你想要加轮播图的位置加入以下 <div id="flowDiagram" > <div id="button"> <span ...

  6. React视角下的轮播图

    天猫购物网站最显眼的就是轮播图了.我在学习一样新js库,一个新框架或新的编程思想的时候,总是感叹"入门必做选项卡,进阶须撸轮播图."作为一个React组件,它是状态操控行为的典型, ...

  7. Jquery 轮播图简易框架

    =====================基本结构===================== <div class="carousel" style="width: ...

  8. 原生js焦点轮播图

    原生js焦点轮播图主要注意这几点: 1.前后按钮实现切换,同时注意辅助图2.中间的button随着前后按钮对应切换,同时按button也能跳转到相应的index3.间隔调用与无限轮播.4.注意在动画时 ...

  9. superSlider实现美女轮播图

    superSlider实现美女轮播图 <!DOCTYPE html><html lang="en"><head><meta charset ...

  10. js原生代码实现轮播图案例

    一.轮播图是现在网站网页上最常见的效果之一,对于轮播图的功能,要求不同,效果也不同! 我们见过很多通过不同的方式,实现这一效果,但是有很多比较麻烦,而且不容易理解,兼容性也不好. 在这里分享一下,用j ...

随机推荐

  1. 【转】Linux中多线程wait使用注意

    使用管道生成的while,是无法进行并发管理的 在处理日志的时候,采用管道多线程,怎么都实现不了wait功能,经上篇文章才知道,使用管道生成的while,无法进行并发管理. while read qu ...

  2. GDB和WinDbg中调用函数

    GDB: 特别简单,直接写调用式子即可,如下图的p word.c_str(),其中word的类型是std::string WinDbg:目前都说是.call命令,说实话我宁愿不用...见: http: ...

  3. 开启Visual Studio 2013时,出现Microsoft.VisualStudio.Web.PasteJson.JsonPackage无法载入的可能解決方案

    1.先下载:http://www.jb51.net/dll/Microsoft.VisualStudio.Web.PasteJson.dll.html Microsoft.VisualStudio.W ...

  4. am335x 无屏实现开关机程序

    因测试需要加入开机次数记录,所以记录一下7816开关机是怎么做的 原理很简单,开机时判断一个记录文件是否存在,如果存在,运行一段代码,将记录开机次数文件的值读出来+1 代码如下: #include & ...

  5. 十大Intellij IDEA快捷键<转>

    Intellij IDEA中有很多快捷键让人爱不释手,stackoverflow上也有一些有趣的讨论.每个人都有自己的最爱,想排出个理想的榜单还真是困难.以前也整理过Intellij的快捷键,这次就按 ...

  6. Hdu 2236 无题II 最大匹配+二分

    题目链接: pid=2236">Hdu 2236 解题思路: 将行和列理解为二分图两边的端点,给出的矩阵即为二分图中的全部边, 假设二分图能全然匹配,则说明 不同行 不同列的n个元素 ...

  7. java访问属性

  8. xubuntu14.04下编译pjsip及pjsua2 java

    Run "./configure" without any options to let the script detect the appropriate settings fo ...

  9. 回文树(回文自动机) - BZOJ 3676 回文串

    BZOJ 3676 回文串 Problem's Link: http://www.lydsy.com/JudgeOnline/problem.php?id=3676 Mean: 略 analyse: ...

  10. 第二百五十三节,Bootstrap项目实战-资讯

    Bootstrap项目实战-资讯 html <!DOCTYPE html> <html lang="zh-cn"> <head> <met ...