<!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. Java数据结构之Set学习总结

    前言: 前面介绍了Java的数据结构List.Map,今天抽空学习总结一下另一种数据结构Set. Set介绍 Set相对于List.Map是最简单的一种集合.集合中的对象不按特定的方式排序,并且没有重 ...

  2. 有关ospf抓包

    有关ospf抓包 1.相关的路由器为这样子的: 路由器都运行了ospf: 抓包的链路为GE0/0/2 , 2.抓包图: 从图上我们可以看到,protocol info 这一栏里面出现了: hello ...

  3. MyBatis:学习笔记(1)——基础知识

    MyBatis:学习笔记(1)--基础知识 引入MyBatis JDBC编程的问题及解决设想 ☐ 数据库连接使用时创建,不使用时就释放,频繁开启和关闭,造成数据库资源浪费,影响数据库性能. ☐ 使用数 ...

  4. 搭建ftp服务器实现文件共享

    FTP服务器(File Transfer Protocol Server)是在互联网上提供文件存储和访问服务的计算机,它们依照FTP协议提供服务. FTP(File Transfer Protocol ...

  5. 不可重入定时器Newlife.TimerX

    在.net常用的定时器类有下面三种,使用定时器时需要设定参数,如间断时间.定时器计溢出后的回调函数.延时.开始等,定时器的的主要方法有开始.终止等,不同的定时器实现上述的方法会有一些差异,本文会针对具 ...

  6. Internet Information Services安装与启动

    Internet Information Services安装 1.打开控制面板——程序——启动或关闭windows功能 2.找到Internet Information Services ——将其全 ...

  7. 适用MySQL Migration Toolkit 1.0 将oracle迁移到mysql中遇到的问题

    这里主要说一下我在适用中碰到的问题,主要过程参考 http://www.cnblogs.com/duwenlei/p/3520759.html. 首先启动MySQLMigrationTool.exe ...

  8. Zookepper（2015.08.16笔记）

    2015.08.16zookepper   Zookeeper 是 Google 的 Chubby一个开源的实现,是 Hadoop 的分布式协调服务(如同小区里面的供水.电的系统) 它包含一个简单的原 ...

  9. android中在java代码中设置Button按钮的背景颜色

    android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...

  10. 编写PHP代码总结

    1- 编写模块化代码 良好的PHP代码应该是模块化代码.PHP的面向对象的编程功能是一些特别强大的工 具,可以把你的应用程序分解成函数或方法.你应该尽可能多的从你的应用程序的服务器端分开前端的HTML ...