<!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. Oracle-函数大全

    ORACLE函数大全 1． 第一讲 单行函数和组函数详解 PL/SQL单行函数和组函数详解 函数是一种有零个或多个参数并且有一个返回值的程序.在SQL中Oracle内建了一系列函数,这些函数都可被称为 ...

  2. 不懂这些分布式架构、分布式系统的数据一致性解决方案，你如何能找到高新互联网工作呢？强势解析eBay BASE模式、去哪儿及蘑菇街分布式架构

    互联网行业是大势所趋,从招聘工资水平即可看出,那么如何提升自我技能,满足互联网行业技能要求?需要以目标为导向,进行技能提升,本文主要针对招聘中高频提及的分布式系统设计.架构(数据一致性)做了分析,祝各 ...

  3. multiSelect 下拉多选插件

    multiSelect是一款很好用的下拉多选插件,可以在下拉框中实现多选框,全选及取消全选等方法.使用方法:1.引用 multiSelect.css及 multiSelect.js.下载地址 http ...

  4. sublime text笔记

    sublime text确实是一个很不错的编辑器,而且还是跨平台的,这个很不错.---Linux V2.0.2 有些时候可以比VIM要好有些 1.安装: apt-get install sublime ...

  5. koa中间件系统原理及koa+orm2实践。

    koa是由 Express 原班人马打造的新的web框架.套用其官方的说法:Koa 应用是一个包含一系列中间件 generator 函数的对象. 这些中间件函数基于 request 请求以一个类似于栈 ...

  6. 【Android】TextView跑马灯效果

    老规矩,先上图看效果. 说明 TextView的跑马灯效果也就是指当你只想让TextView单行显示,可是文本内容却又超过一行时,自动从左往右慢慢滑动显示的效果就叫跑马灯效果. 其实,TextView ...

  7. Struts2之标签使用

    上一篇我们一起探讨了Struts2中的OGNL表达式的知识,本篇我们一起来学习一下关于Struts2标签的使用,包括:基础标签:property.set.bean.include:判断标签:if el ...

  8. CentOS 中 YUM 安装桌面环境（转）

    使用 yum groupinstall 指令很容易就能安装上图形界面的桌面系统. 1. yum 的 group 指令 yum 可以以程序组的模式来安装成套的软件包.支持的软件包可以通过, # yum ...

  9. Chrome 开发工具 Workspace 使用

    前端开发中我们经常要在浏览器中做一些细节调整,比如对 CSS 的微调,最快的方式当然是直接在 Chrome 的开发者工具中调整,但问题在于在控制台中调试好的数值我们还需要再在 CSS 源码中再写一次, ...

  10. ASP.NET Core：CMD命令行+记事本 创建Console程序和Web Application

    今天看了Scott关于ASP.NET Core的介绍视频,发现用命令行一步一步新建项目.添加Package.Restore.Build.Run 执行的实现方式,更让容易让我们了解.NET Core的运 ...