京东轮播图

有个计数的,点右边,计数增加,判断计数是否超过总的长度,超过设置计数为0,再设置当前的图片动画,兄弟的图片动画

左边点击同理,计数是--,判断计数是否等于-1,等于则reset计数为总长度,在设置当前的图片动画,兄弟的图片动画

<!DOCTYPE html>
<html lang="zh-CN"> <head>
<meta charset="UTF-8">
<title>京东商城</title>
<style>
* {
margin: 0;
padding: 0;
list-style: none;
} .slider {
height: 340px;
width: 790px;
margin: 100px auto;
position: relative;
} .slider li {
position: absolute;
display: none;
} .slider li:first-child {
display: block;
} .arrow {
display: none;
} .slider:hover .arrow {
display: block;
} .arrow-left,
.arrow-right {
font-family: "SimSun", "宋体";
width: 30px;
height: 60px;
background-color: rgba(0, 0, 0, 0.1);
position: absolute;
top: 50%;
margin-top: -30px;
cursor: pointer;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: 700;
font-size: 30px;
} .arrow-left:hover,
.arrow-right:hover {
background-color: rgba(0, 0, 0, .5);
} .arrow-left {
left: 0;
} .arrow-right {
right: 0;
}
</style>
</head> <body>
<div class="slider">
<ul>
<li><a href="#"><img src="data:images/1.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/2.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/3.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/4.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/5.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/6.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/7.jpg" alt=""></a></li>
<li><a href="#"><img src="data:images/8.jpg" alt=""></a></li>
</ul>
<!--箭头-->
<div class="arrow">
<span class="arrow-left">&lt;</span>
<span class="arrow-right">&gt;</span>
</div>
</div> <script src="jquery-1.12.4.js"></script>
<script> $(function () {
var count = 0;
$(".arrow-right").click(function () {
count++;
if (count == $(".slider li").length) {
count = 0;
}
console.log(count);
//让count渐渐的显示,其他兄弟渐渐的隐藏
$(".slider li").eq(count).fadeIn().siblings().fadeOut();
}); $(".arrow-left").click(function () {
count--;
if (count == -1) {
count = $(".slider li").length - 1;
}
console.log(count);
$(".slider li").eq(count).fadeIn().siblings().fadeOut();
});
}); </script> </body> </html>

jQuery---京东轮播图的更多相关文章

  1. Javascript 京东轮播图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  2. js仿京东轮播图效果

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  3. 基于jQuery的移动轮播图(支持触屏)

    移动轮播图我看到两款, 一款是无线天猫的m.tmall.com,实现了无缝轮播. 一款是蘑菇街的,没有实现无缝轮播. 我自己重写一个,类似蘑菇街 <!doctype html> <h ...

  4. 用jQuery实现轮播图效果,js中的排他思想

    ---恢复内容开始--- jQuery实现轮播图不用单独加载. 思路: a. 通过$("#id名");选择需要的一类标签,获得一个伪数组 b.由于是伪数组的原因,而对数组的处理最多 ...

  5. 用js和jQuery做轮播图

    Javascript或jQuery做轮播图 css样式 <style> a{ text-decoration:none; } .naver{ width: 100%; position:r ...

  6. jQuery 简单滑动轮播图效果

    一般页面简单轮播图效果用jQuery制作更加简单.我们来看看以下效果是如何来进行制作的. 其html结构下所示: <div id="box">         < ...

  7. 自实现PC端jQuery版轮播图

    最近其他项目不是很忙,被安排给公司的官网项目做一个新的页面(之前没接触公司官网项目),其中有一个用到轮播图的地方,最开始想直接用swiper.js插件实现就好了,可是发现官网项目里之前都没有引入过sw ...

  8. JQuery实现轮播图及其原理

    源码: <!DOCTYPE html> <html> <head> <meta charset="utf-8" name="vi ...

  9. Jquery无缝轮播图的制作

    轮播是html页面中比较常见的一种展现形式,也是基础,把轮播图做好,是排版中比较关键的 1.首先是轮播的html元素放置:做轮播之前,要有一个初步的认识 2.每个元素的位置怎样摆放,也是很关键的,这里 ...

随机推荐

  1. java连接Oracle数据库,从ResultSet中提取数据出现java.sql.sqlException结果集已耗尽

    出现错误的原因是ResultSet中并没有任何东西,再调用next()方法就会出错,原因可能是oracle创建用户,表没有提交,commit即可

  2. 2020-2-27今日总结——滚动监听&导航

    利用Bootstrap 开发工具实现滚动监听 (此文只做学习路上的归纳分享总结用,如有侵权,请联系我删除) 使用滚动监听,比较特殊,要在body中设置scroll,以及触点. 很好理解,因为滚动是多对 ...

  3. toj 3616 Add number (没想到啊~~)

    Add number 时间限制(普通/Java):1000MS/3000MS 运行内存限制:65536KByte总提交: 60 测试通过: 21 描述 Employees of Baidu like ...

  4. CSS中元素的显示模式

     在CSS中,根据元素显示模式的不同元素标签被分为了两类:行内元素(inline-level).块级元素(block-level). 1,首先介绍什么是行内元素,什么又是块级元素? 1.1,行内元素就 ...

  5. HTML连载69-透视属性以及其他属性练习

    一.透视属性 1.什么是透视 透视简单来说就是近大远小 2.​注意点:一定要注意,透视属性必须添加到需要呈现近大远小效果的​元素的父元素. 3.​格式:perspective:数字px; 这里的数字代 ...

  6. Android Studio 学习笔记(四):Adapter和RecyclerView说明

    在现版本中,滚动控件有多种,而相比于ListView,GridView,RecyclerView的用途更广,因此将前两者作为Adapter适配器的引入,再对RecyclerView进行简单讲解. MV ...

  7. 小程序封装request请求

    //request.js var host = 'https://www.xxx.com';//请求域名 module.exports = function (type, params, method ...

  8. 4.python流程控制语句介绍

    流程控制语句分类 1).顺序结构 2).判断结构 3).循环结构 判断结构 特点:如果 ... 否则 ... 格式一:                 ①                 if 条件表 ...

  9. Linux系统的安装和常用命令

    (1)切换到目录 /usr/bin: (2)查看目录/usr/local 下所有的文件: (3)进入/usr 目录,创建一个名为 test 的目录,并查看有多少目录存在: (4)在/usr 下新建目录 ...

  10. idea将普通项目转换为maven项目

    方式一 1.在项目根目录下,新建文件 pom.xml,并填写好内容. 2.在pom.xml文件上,右键 Add as Maven Project 或 在项目上,右键 Add Framework Sup ...