用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. 样子就是上面图片那样,先不管好不好看,主要是学会运用和理解轮播的原理 掌握核心的理论知识和技术的操作,其他的都可以在这个基 ...
随机推荐
- 在pypi上发布python包详细教程
使用Python编程中Python的包安装非常方便,一般都是可以pip来安装搞定:pip install <package name>,我们自己写的python也可以发布在pypi上,很简 ...
- 阿里云 持续集成环境自动部署cordova项目热更新脚本
linux脚本: #!/bin/sh rm -rf /home/tomcat/xiecang_hybird_web/xiecang_hybird_web.zip rm -rf /home/tomcat ...
- 使用POP3协议接收并解析电子邮件（全）
package org.yangxin.study.jm; import java.io.BufferedInputStream; import java.io.BufferedOutputStrea ...
- 进程锁 Lock
进程锁其实是锁的输入终端,屏幕,太多的进程,为了防止打印错乱而锁,作用不大 from multiprocessing import Process, Lock def f(l, i): l.acqui ...
- Thinkphp 视图模型
1.创建视图模型 2.定义视图模型 class BlogViewModel extends ViewModel { public $viewFields = array( 'Blog'=>arr ...
- TensorFlow Saver的使用方法
我们经常在训练完一个模型之后希望保存训练的结果,这些结果指的是模型的参数,以便下次迭代的训练或者用作测试.Tensorflow针对这一需求提供了Saver类. Saver类提供了向checkpoint ...
- ubuntu 17.10.1 安装 virtual box 增强工具
ubuntu 17.10.1 安装 virtual box 增强工具遇到 “ Please install the gcc make perl packages from your distribu ...
- 黄聪：PHP发送邮件出现Connection: opening to ssl://的解决办法
PHP.ini文件开启下面2个功能: extension=php_sockets.dll extension=php_openssl.dll
- PyQt—QTableWidget实现翻页功能
主要使用QTableWidget中的三个函数实现: verticalScrollBar().setSliderPosition() 设置当前滑动条的位置 verticalScrollBar().max ...
- 解决python中路径中包含中文无法找到文件的问题
a="C:\Users\Dell\Desktop\ATOU\公共测试用例" (带中文的路径) a=a.decode("utf-8").encode(" ...