用jQuery实现简单的简单的轮播图
图片来源
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
ul{
list-style-type: none;
}
.outer{
margin: 50px auto;
width: 590px;
height: 470px;
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: gray;
color: #ffffff;
text-align: center;
line-height: 60px;
top: 50%;
margin-top: -30px;
display: none;
opacity: 0.8;
}
.left_btn{
left: 0; }
.rigth_btn{
right: 0;
}
.outer:hover .btn{
display:block ;
}
.current{
background-color: red!important; /*设置优先级*/
}
{# .num .current{#}
{# background-color: red#}
{#}#}
</style>
</head>
<body>
<div class="outer">
<ul class="img">
<li><img src="img/1.jpg"></li>
<li><img src="img/2.jpg"></li>
<li><img src="img/3.jpg"></li>
<li><img src="img/4.jpg"></li>
<li><img src="img/5.jpg"></li>
<li><img src="img/6.jpg"></li> </ul>
<ul class="num">
<li class="current">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
<div class="left_btn btn"> < </div>
<div class="rigth_btn btn"> > </div>
</div>
<script src="jquery-3.3.1.min.js"></script>
<script>
var i=0;
$(".num li").mouseover(function () {
$(this).addClass("current").siblings().removeClass('current');
var index=$(this).index();
i=index;//解决一个bug（当鼠标放到outer图上时，定时器是停止，鼠标再指到current的某个数字，图片就要开始从
//那里开始轮播，如果没有i=index，图片会从最原先定时器停止的位置的开始轮播。
$(".img li").eq(index).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
})
var time=setInterval(move,1000);
//eq() 方法将匹配元素集缩减值指定 index 上的一个。
//stop() 方法用于在动画或效果完成前对它们进行停止
function move() {
i++
$(".num li").eq(i).addClass("current").siblings().removeClass('current');
var index=$(this).index();
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
if(i==6){
i=-1
}
}
//当鼠标放到页面上时，停止定时器，离开开启定时器函数hover
// hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
$(".outer").hover(function () {
clearInterval(time)
},function () {
time=setInterval(move,1000)
})
/****************点击左右按钮******************/
$(".rigth_btn").click(function () {
move()
})
$(".left_btn").click(function () {
move_left()
})
function move_left() {
if(i==0){
i=6
}
i--
$(".num li").eq(i).addClass("current").siblings().removeClass('current')
var index=$(this).index();
$(".img li").eq(i).stop().fadeIn(1000).siblings().stop().fadeOut(1000);
}
</script>
</body>
</html>
京东的首页
用jQuery实现简单的简单的轮播图的更多相关文章
- jQuery与原生js实现banner轮播图
jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta ...
- 带轮播图、导航栏、商品的简单html，以及轮播图下边数字随轮播图的改变而改变
---恢复内容开始--- 在做这个的时候,最不会的是中间轮播图下边的数字是如何实现转变的,后来加入了jQuery就能实现了. css部分: <style type="text/css& ...
- 用jquery实现带左右按键的轮播图
成品如下: 简单来说就是点击“右”按钮时,转换到右边的下一幅图片,同时上面的小方块颜色也跟着改变,如果已经是最后一幅图片,再点击“右”,则转换到第一幅图片,是直接向左移找到第一幅图的,明天再做一下无缝 ...
- jquery左右切换的无缝滚动轮播图
1.HTML结构: <head> <script type="text/javascript" src="../jquery-1.8.3/jquery. ...
- Jquery基础（动画效果的轮播图特效）
jquery文档准备的三种写法: $(document).ready(function() { }); $().ready(function() { }); $(function() { }); jq ...
- （新手向）基于Bootstrap的简单轮播图的手机实现
个人电脑里存了不少适合手机欣赏的图片,但是放手机里看是件很占据资源的事.鉴于家里有一台电脑经常开着,正好用来做家庭局域网共享,于是笔者就设想通过一种比较简单环保的思路.通过手机访问电脑内的图片. 首先 ...
- 原生js实现简单移动端轮播图
最近项目不是很忙,自己就用原生js写了一个简单的移动端轮播图的小demo,可实现自动轮播和手势滑动轮播,然后就把它记录到个人博客里.还有很多不足的地方,希望多多指出,以便改进. 1.代码部分 分为四个 ...
- 简单介绍无限轮播图，js源代码
无限轮播图js源代码,今天介绍一下用js简单的编写无限轮播图 <!DOCTYPE html> <html> <head> <meta charse ...
- jQuery轮播图--不使用插件
说明:引入jquery.min.js 将轮播图放入imgs文件夹 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitiona ...
- 纯js轮播图练习-1
偶尔练习,看视频自己学着做个简单的纯JS轮播. 简单的纯js轮播图练习-1. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- 启用 webpack 的模块热替换特性
启用 webpack 的模块热替换特性: module.exports = { //... devServer: { hot: true } } 注意,必须有 webpack.HotModuleRep ...
- java中length与length()
length是对数组而言的,指的是数组的长度. length()是对字符串而言的,指的是字符串所包含的字符个数. public class LengthDemo { public static voi ...
- Java 笔试题（一）
应聘Java笔试时可能出现问题及其答案 Java基础方面: 1.作用域public,private,protected,以及不写时的区别 答:区别如下: 作用域 当前类 同一package 子孙类 ...
- Git-.gitignore配置
.gitignore文件配置:keil工程文件类型模板 # reference to Keil->help->µVision User's Guide->Appendix->B ...
- PHP-不同Str 拼接方法性能对比
问题 在PHP中,有多种字符串拼接的方式可供选择,共有: 1 . , .= , sprintf, vprintf, join, implode 那么,那种才是最快的,或者那种才是最适合业务使用的,需要 ...
- Maven 之多模块构建
项目的打包类型:pom.jar.war 项目中一般使用maven进行模块管理,每个模块下对应都有一个pom文件,pom文件中维护了各模块之间的依赖和继承关系.项目模块化可以将通用的部分抽离出来,方便重 ...
- C#中数据库事务、存储过程基本用法
SQL 事务 public bool UpdateQsRegisterSql(List<string> ids, int newQueueId, string newQueueName) ...
- 【idea】之取消@param注释参数错误提示
改为
- 推荐两个小工具MediaInfo 和 netpersec
[转载请注明出处]:http://blog.csdn.net/longlong530 流媒体服开发的时候常用的两个工具, 1. MediaInfo 下载路径:(http://w.x.baidu ...
- Java-Runoob-高级教程-实例-方法：12. Java 实例 – Enum（枚举）构造函数及方法的使用-um
ylbtech-Java-Runoob-高级教程-实例-方法:12. Java 实例 – Enum(枚举)构造函数及方法的使用 1.返回顶部 1. Java 实例 - Enum(枚举)构造函数及方法的 ...