<!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. Hibernate优缺点

    下面就Hibernate优缺点分别进行简单的阐述.1.Hibernate优点:(1)对象/关系数据库映射(Basic O/R Mapping)它使用时只需要操纵对象,使开发更对象化,抛弃了数据库中心的 ...

  2. 1611: [Usaco2008 Feb]Meteor Shower流星雨

    1611: [Usaco2008 Feb]Meteor Shower流星雨 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1010  Solved: 44 ...

  3. ehcache memcache redis 区别

    之前用过redis 和 memcache ,没有ehcache 的开发经验,最近也查阅不少文档和博客,写一些总结,也有不少内容总结与诸多博客中的博主总结:  Ehcache EhCache 是一个纯J ...

  4. （转）Uploadify 3.2 参数属性、事件、方法函数详解

    转自http://blog.sina.com.cn/s/blog_5079086b0101fkmh.html Hallelujah博客 一.属性 属性名称 默认值 说明 auto true 设置为tr ...

  5. Unity无缝循环世界实现

    一年前曾经碰到过已无限世界为题材的游戏开发比赛,虽然对比赛没有兴趣,但是对这个题材倒是有点想法.如何通过unity3d实现无缝的循环世界呢. 有一种想法是动态生成,一块场景一块场景进行动态加载.(做过 ...

  6. Unity3D动态读取外部MP3文件给AudioSource

    在PC端VR游戏开发中,需要动态加载本地的MP3文件,但是Unity3D不知道出于什么原因,到5.4.0也不支持MP3文件的外部加载(目前只支持wav和ogg). 因此要想通过www来加载mp3文件就 ...

  7. echo print print_r的区别

    echo       PHP语句   效率最高    输出一个或者多个字符串 print()    函数       效率高     只能打印出简单类型变量的值(如int,string) print_ ...

  8. iOS 按钮连续提交执行一次（如留言提交，多次拍照问题）

    在很多项目中暴力测试时会出现多次点击执行一个方法  可以用下面的语句进行解决 //先将未到时间执行前的任务取消. [[self class] cancelPreviousPerformRequests ...

  9. Java基础—String类小结

    一.String类是什么 public final class String implements java.io.Serializable, Comparable<String>, Ch ...

  10. 老李分享：loadrunner的java user脚本开发

    老李分享:loadrunner的java user脚本开发 poptest在性能测试loadrunner的课程里,以web协议为主,同时也讲解其他协议的脚本开发,对于一个性能测试工程师需要掌握一个以上 ...