主要是绑定事件以及实现自动滚轮

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }

        .outer{

            height:650px;

            width: 500px;

            border: dashed cadetblue 5px;

            margin: 0 auto;

            position: relative;

        }

        /*.num{*/

            /*position: absolute;*/

            /*left:0;*/

            /*top:0;*/

        /*}*/

        .num li{

            height:24px;

            width: 24px;

            background-color: grey;

            border-radius:80%;

            /*使每个数字在圈圈之内显示*/

            text-align: center;

            display: inline-block;

            font-size: 20px;

            margin: 5px;

            cursor: pointer;

        }

        ul li{

            list-style: none;

        }

        .outer .img li{

            position: absolute;

            left:0;

            top:0;

        }

        .num{

            position: absolute;

            left:0;

            /*top:0;*/

            bottom: 10px;

            font-size: 0;

            /*情况num下面文本内容*/

            text-align: center;

            width: 100%;

            /*告诉按照宽度的100%来居中*/

        }

        .button{

            height: 60px;

            width: 40px;

            background-color: darkgoldenrod;

            position: absolute;

            /*left:0;*/

            top:50%;

            margin-top: -30px;

            /*移动正中间*/

            opacity: 0.6;

            font-size: 40px;

            text-align: center;

            line-height:60px;

            display: none;

            /*默认隐藏起来这个框框*/

        }

        .btn_right{

            right:0;

            /*把另外一个标签移动到右边*/

        }

        .outer:hover .button{

            display: block;

        }

        .outer .num li.current{

            background-color: red;

        }

    </style>

</head>

<body>

<div class="outer">

    <ul class="img">

        <li><img src="11.jpg"></li>

        <li><img src="22.jpg"></li>

        <li><img src="33.jpg"></li>

        <li><img src="44.jpg"></li>

        <li><img src="55.jpg"></li>

        <!--会先显示最后一张，因为在加载中，后面的内容可以理解为离我们更近，就先显示出来了-->

    </ul>

    <ul class="num">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

    </ul>

    <div class="btn_left button" ><</div>

    <div class="btn_right button">></div>

</div>

<script src="jquery-3.1.1.js"></script>

<script>

$(function () {

    $('.num li').first().addClass('current');

    $('.num li').mouseover(function () {

        $(this).addClass('current').siblings().removeClass('current');

//       当鼠标悬浮上去就触发该事件

        var index = $(this).index();

        i=index;

        //根据索引值取到对应图片的索引值，fadein后面的参数表示过1秒显示出来，fadeout表示隐藏

        $('.img li').eq(index).fadeIn(1000).siblings().fadeOut(1000)

    });

//    自动播放图片

    i = 0;

    var time = setInterval(move, 1500);

    function move() {

        i++;

        if (i == 5) {

            i = 0;

        }

        $('.num li').eq(i).addClass('current').siblings().removeClass('current');

        $('.img li').eq(i).fadeIn(1000).siblings().fadeOut(1000);

//每1.5秒执行一次，改变数字框框的颜色以及控制图片的显示以及隐藏

    }

    $('.outer').hover(function () {

        clearInterval(time)

    }, function () {

        time = setInterval(move, 1500);

    });

    $('.btn_right').click(function(){

        move()

    });

    //点击有边框直接往右边走

    $('.btn_left').click(function(){

        if(i==0){

            i=3

        }else {i=i-2;}

        move();

    });

});

//触碰div则接触自动更换图片，鼠标离开则继续自动滚动图片

</script>

</body>

</html>

　　效果如图

jquery实现京东淘宝首页的轮番效果图的更多相关文章

  1. Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片

    Android中仿淘宝首页顶部滚动自定义HorizontalScrollView定时水平自动切换图片 自定义ADPager 自定义水平滚动的ScrollView效仿ViewPager 当遇到要在Vie ...

  2. 淘宝首页源码藏美女彩蛋(下)（UED新作2013egg）

    我们已经知道,执行美女会得到"彩蛋",而正是彩蛋做到了taobaoUED展现给大家的神奇的前端魅力.今天我们来看看FP.egg&&FP.egg("%cjo ...

  3. js实现淘宝首页图片轮播效果

    原文:http://ce.sysu.edu.cn/hope2008/Education/ShowArticle.asp?ArticleID=10585 <!DOCTYPE html> &l ...

  4. Android之仿京东淘宝的自动无限轮播控件

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于Re ...

  5. 【angularjs】使用angularjs模拟淘宝首页-淘宝头条滚动效果

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  6. 模仿淘宝首页写的高仿页面，脚本全用的原生JS，菜鸟一枚高手看了勿喷哈

    自己仿照淘宝首页写的页面,仿真度自己感觉可以.JS脚本全是用原生JavaScript写得,没用框架.高手看了勿喷,请多多指正哈!先上网页截图看看效果,然后上源码: 上源码,先JavaScript : ...

  7. Android高仿京东淘宝自动无限循环轮播控件的实现思路和过程

    在App的开发中,很多的时候都需要实现类似京东淘宝一样的自动无限轮播的广告栏,所以就自己写了一个,下面是我自定义控件的实现思路和过程. 一.自定义控件属性 新建自定义控件SliderLayout继承于 ...

  8. javascript实现 京东淘宝等商城的商品图片大图预览功能

    在京东和淘宝等购买东西的时候,我们会经常预览左侧商品展示图片,把鼠标放到原图,右侧就会有个大图显示出细节.本文将带领大家写一个这样简单的功能! 一.实现原理 当鼠标移入某一图片内部时,图片上部会出现一 ...

  9. 浅谈android中只使用一个TextView实现高仿京东,淘宝各种倒计时

    今天给大家带来的是只使用一个TextView实现一个高仿京东.淘宝.唯品会等各种电商APP的活动倒计时.近期公司一直加班也没来得及时间去整理,今天难得歇息想把这个分享给大家.只求共同学习,以及自己兴许 ...

随机推荐

  1. C#声明方法

    一.声明方法 方法是类中用于执行计算或其它行为的成员. 方法可以分为: ?静态方法:可以通过类进行访问.?实例方法:可以通过类的对象进行访问. 1. C#方法的声明 声明方法的语法格式如下: 访问修饰 ...

  2. C# CheckBoxList 实现全选/反选功能怎么写？

    首先我们用RadioButtonList控件,且必须包含OnSelectedIndexChanged事件和AutoPostBack=‘true’属性, <asp:LinkButton ID=&q ...

  3. 内置函数SQLCODE和SQLERRM的使用

    由于ORACLE的错信息最大长度是512字节,为了得到完整的错误提示信息,我们可用 SQLERRM 和 SUBSTR 函数一起得到错误提示信息,方便进行错误,特别是如果WHEN OTHERS异常处理器 ...

  4. CSS3一些特殊属性

    (一)-webkit-tap-highlight-color         这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就 ...

  5. react中密码自动填充及解决火狐浏览器，360浏览器记住密码后，密码框自动填充终极解决方案

    先直接上核心代码如下: 在火狐浏览器,360浏览器,初次加载,bug长这样: 如果你想通过生命周期componentDidMounted等生命周期进行置空操作都是不行的,这可能是浏览器自带的特性记住密 ...

  6. 微信小程序之setData原理以及几点关于小程序的吐槽

    小程序不方便之处: 1: 想做个获取列表中每个item所在的对应滚动条的高度在哪里,或者元素本身的高度也不好获取,极其不方便,网上看的别人做的滚动条相关的,都是写死或者已知的item高度,目前没找到正 ...

  7. noip2018 洛谷 P5020 货币系统

    关键: 要使m最小,(m,b)中的数不能用(n,a)中的数表示出来 对于 3  19  10  6 19=10+3+3+3 6=3+3 只有3 和 10 不能被(n,a)中的数表示 所以m=2 只需要 ...

  8. Servlet学习笔记06——什么是转发，路径，状态管理？

    1.include指令 (1)作用: 告诉容器,在将jsp转换成Servlet时,将 某个文件的内容插入到该指令所在的位置. (2)语法: <%@ include file="&quo ...

  9. 事件监听和window.history以及自定义创建事件

    1.事件监听window.addEventListener方法: Window.addEventListener(event, function, useCapture); useCapture:表示 ...

  10. 课时68.id选择器（掌握）

    1.什么是id选择器? 作用:根据指定的id名称找到对应的标签,然后设置属性 格式: #id名称{ 属性:值; } 注意点: 1.每个html标签都有一个属性叫做id,也就是说每个标签都可以设置id ...