<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-2.1.0.js"></script>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
margin: 0px;
padding: 0px;
text-align: center;
}
#banner{
border: 1px solid #000;
width: 900px;
height: 420px;
position: relative;
margin: 100px auto;
}
#imglist{
position: relative;
width: 900px;
height: 420px;
left: 0px;
top: 0px;
}
#imglist img{
left: 0px;
top: 0px;
width: 900px;
height: 420px;
position: absolute;
display: none;
}
#box{
width: 190px;
height: 11px;
left: 650px;
top: 370px;
position: absolute;
}
#box div{
width: 12px;
height: 12px;
float: left;
margin-right: 10px;
border-radius: 12px;
border: 1px solid #000;
opacity: 0.8;
}
#box div.dot{
background: black;
width: 12px;
height: 12px;
}
</style>
<script>
$(function(){

var i=0;

box();    //调用自定义函数

$("#box div").click(function(){  //点击改变图片轮播的索引，实现图片的切换

i=$(this).index();  //

$(this).addClass("dot").siblings().removeClass("dot");

$("#imglist img").eq(i).fadeIn(700).siblings().fadeOut(700);
});

function box(){

setTimeout(function(){  //自定义时间函数，实现每5秒执行一次的自动轮播

i++;

if(i>=5){i=0};

$("#imglist img").eq(i).fadeIn(700).siblings().fadeOut(700).parents("#banner").find("#box div").eq(i).addClass("dot").siblings().removeClass("dot");  //实现图片的淡入淡出以及点击图片的切换(实现原理：通过淡入显示当前图片，淡出隐藏其它图片)

box();

},5000);}  //每5秒自动调用

})
</script>
</head>
<body>
<div id="banner">
<div id="imglist">
<img src="img/f1.jpg" width="900px" height="420px" style="display: block;" />
<img src="img/f2.jpg" width="900px" height="420px" />
<img src="img/f3.jpg" width="900px" height="420px" />
<img src="img/f4.jpg" width="900px" height="420px" />
<img src="img/f5.jpg" width="900px" height="420px" />
</div>
<div id="box">
<div class="dot"></div>  //点击环扣按钮
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
</body>
</html>

京东商城首页jquery轮播特效的更多相关文章

  1. 原生js和jquery实现图片轮播特效

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  2. 原生js和jquery实现图片轮播特效(转)

    本文给大家分享的是使用原生JS和JQ两种方法分别实现相同的图片轮播特效,十分的实用,也非常方便大家对比学习原生js和jQuery,有需要的小伙伴可以参考下. 1)首先是页面的结构部分对于我这种左右切换 ...

  3. 基于jQuery游戏网站焦点图轮播特效

    基于jQuery的一款游戏网站焦点图轮播特效.这是一款带进度条定时切换,带缩略图切换的jQuery网站焦点图代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <cente ...

  4. Android 深入ViewPager补间动画,实现类京东商城首页广告Banner切换效果

    如有转载,请声明出处: 时之沙: http://blog.csdn.net/t12x3456 某天看到京东商城首页的滑动广告的Banner,在流动切换的时候有立体的动画效果,感觉很有意思,然后研究了下 ...

  5. 一款基于jQuery轮播切换焦点图,可播放多张图片

    今天给大家分享一款基于jQuery轮播切换焦点图,可播放多张图片,在这个组件中,你可以任意指定8张图片,然后插件就会帮你自动生成缩略图,并且自动开始切换播放图片.当然,你也可以手动切换图片,只要点击缩 ...

  6. 分享一款简洁的jQuery轮播源码

    <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页</titl ...

  7. 自己写的一个jQuery轮播插件

    大概是四月初开始写的,中间停了有一个月吧.这是我在Github的第一个项目.项目地址:https://github.com/linzb93/jquery.slide.js. 轮播应该是最好写的插件了, ...

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

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

  9. jQuery轮播图（一）轮播实现并封装

    利用面向对象自己动手写了一个封装好的jquery轮播组件,可满足一般需求,不仅使用简单且复用性高. demo:点此预览 代码地址:https://github.com/zsqosos/componen ...

随机推荐

  1. 通过git提交代码到仓库

    昨天有一个妹子问我如何在还没有commit之前push本地的代码到仓库,现在写写,希望能够帮到大家. 当我们pull的时候会出现没有代码commit的错误提示,在这种情况下,我们需要再commit之前 ...

  2. java爬虫查找四川大学所有学院的网站的网址中的通知和新闻——以计算机学院为例

    需求:查找四川大学所有学院的网站的网址中的通知和新闻——以计算机学院为例 流程图 3. 具体步骤 (1) 学院的主页为:http://cs.scu.edu.cn/ 获取该页面的所有内容(本文只获取新闻 ...

  3. [lua] 你所不知道的lua nil值在可变参数函数中怎么处理！

    在lua中, 问题1:如果你在可变参数...中传入若干个参数,其中有的参数要带nil,这时怎么解决呢?(比如local function _test(...) end    _test(1, nil, ...

  4. IE浏览器下使用AJAX登陆接口请求缓存与登陆不了的问题解决

    问题: 在IE浏览器下面,登陆的时候老是登陆不上,但是打开控制台的时候再登陆却能登陆上. 分析: 通过抓包,发现,在不打开控制台的时候,少了一个接口的请求,却返回了改接口的返回信息,但是返回信息并不是 ...

  5. git 由http切换成git

    项目中经常会遇到http 的git 协议为了安全切换成ssh 的git 协议. 这个时候,只要使用如下命令变更 remote 字符串就好了. git remote set-url origin git ...

  6. C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC（中）

    译文,个人原创,转载请注明出处(C# 6 与 .NET Core 1.0 高级编程 - 41 ASP.NET MVC(中)),不对的地方欢迎指出与交流. 章节出自<Professional C# ...

  7. 关于Trie KMP AC自动机

    个人认为trie,KMP,AC自动机是思想非常明确的,AC自动机的性质是与KMP算法的思想类似的(失配后跳转) 而KMP是线性的,AC自动机是在tire树上跑KMP,为方便那些不会用指针的小朋友(我也 ...

  8. Seajs使用实例入门介绍

    本文所用例子的代码目录结构: seajs example |--sea-module //存在依赖文件 |--jquery |--jqeury.js |--sea.js |--static //存放自 ...

  9. 将node.js程序作为服务，并在windows下开机自动启动（使用forever）

    手上项目中有一块服务是用node.js实现的,运行环境是windows server 2008 R2,刚开始着手实现这块功能的时候时间很紧迫,随便写了个console程序就部署上去了--启动方式就是在 ...

  10. TensorFlow安装-windows系统

    官方各版本的安装说明:https://www.tensorflow.org/install/ 本文介绍如何在windows环境下安装tensorflow, 跑起来简单的demo. 1.安装python ...