用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. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- mysql之 redo log
重做日志(redo log) 前言:之前一直弄不清楚 mysql 里面 bin log 和 innodb log 文件的区别,在脑子里面一直有个疑问 binlog 日志文件已经可以用来进行数据库的日志 ...
- webpack报错：Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find module 'babel-preset-env' from '...' - Did you mean "@babel/env"?
webpack报错:Module build failed (from ./node_modules/babel-loader/lib/index.js): Error: Cannot find mo ...
- Day 04 if判断，while循环，for循环
if判断语法一:if 条件: # 条件成立时执行的子代码块 代码1 代码2 代码3 示例:sex='female'age=18is_beautiful=True if sex == 'female' ...
- Linux 建立 TCP 连接的超时时间分析(解惑)
Linux 系统默认的建立 TCP 连接的超时时间为 127 秒,对于许多客户端来说,这个时间都太长了, 特别是当这个客户端实际上是一个服务的时候,更希望能够尽早失败,以便能够选择其它的可用服务重新尝 ...
- Maven下载项目依赖jar包和使用方法
一.Maven3.5.0安装与配置+Eclipse应用 参考:Maven3.5.0安装与配置+Eclipse应用 二.http://mvnrepository.com/ 此处以http://mvnre ...
- Arduino在64位WIN7下无法安装驱动的解决办法
1.获取权限 打开C:\Windows\System32\DriverStore\FileRepository,对着FileRepository文件夹,右键 >>属性 >>安全 ...
- 【java】Hello World
class Demo { //程序的主入口,能保证类的独立运行 public static void main(String[] args) { System.out.println("He ...
- NAND FLASH控制器
一.nand flash访问原理 地址空间概念 nand的编址 nand命令 命令,地址,数据 使用S3C2440的nand flash控制器访问nand flash 前几个编译出来的文件都小于4k ...
- 《JavaScript设计模式与开发》笔记 7.单例模式
废话一箩筐就这个原来 var instance; return function asdf(name){ if(!this.instance){ this.instance = new asdf(na ...
- CheckFail设计很垃圾
function checkFail(node, onError, fuckIE) { var id = node.src;//检测是否死链 node.onlo ...