1、效果图如下：

2、源码如下：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery仿京东首页广告图片切换</title>

<style type="text/css">

div,ul,li,a,span,img{margin:0;padding:0;}

li{list-style:none;}

#slider{width:790px;height:340px;margin:10% auto;position:relative;}

.slider_list li{position:absolute;display:none;}

.slider_list li:first-child{display:block;}

.slider_icon{position:absolute;z-index:1;left:40%;bottom:20px;font-size:0;padding:4px 8px;border-radius:12px;background-color:hsla(0,0%,100%,.3);}

.slider_icon i{display:inline-block;width:12px;height:12px;border-radius:50%;margin:0 5px;}

.btn{background:#fff;}

.arrow{display:none;width:30px;height:60px;background-color:rgba(0,0,0,.2);position:absolute;top:50%;margin-top:-30px;}

.prve{left:0;}

.next{right:0;}

.arrow span{display:block;width:10px;height:10px;border-bottom:2px solid #fff;border-left:2px solid #fff;}

.slider_left{margin:25px 0 0 10px;transform:rotate(45deg);}

.slider_right{margin:25px 0 0 5px;transform:rotate(-135deg);}

.arrow:hover{background:#444;}

#slider:hover .arrow{display:block;}

.btn_act{background:#db192a;}

</style>

<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>

<script type="text/javascript">

$(function(){

	var count = 0;

	var $li = $("#slider>ul>li");

	$(".next").click(function(){

		count++;

		if(count == $li.length){

			count =0;

		}

		$li.eq(count).fadeIn().siblings().fadeOut();

		$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');

		console.log(count);

	});

	$(".prve").click(function(){

		count--;

		if(count == -1){

			count = $li.length-1;

		}

		console.log(count);

		$li.eq(count).fadeIn().siblings().fadeOut();

		$(".slider_icon i").eq(count).addClass("btn_act").siblings().removeClass('btn_act');

	});

	$(".slider_icon i").mouseenter(function(){

		$(this).addClass('btn_act').siblings().removeClass("btn_act");

		$li.eq($(this).index()).fadeIn().siblings().fadeOut();

		count = $(this).index();

	});

});

</script>

</head>

<body>

<div id="slider">

	<ul class="slider_list">

		<li><a href="#"><img src="img/banner1.jpg"></a></li>

		<li><a href="#"><img src="img/banner2.jpg"></a></li>

		<li><a href="#"><img src="img/banner3.jpg"></a></li>

		<li><a href="#"><img src="img/banner4.jpg"></a></li>

		<li><a href="#"><img src="img/banner5.jpg"></a></li>

		<li><a href="#"><img src="img/banner6.jpg"></a></li>

		<li><a href="#"><img src="img/banner7.jpg"></a></li>

		<li><a href="#"><img src="img/banner8.jpg"></a></li>

	</ul>

	<div class="slider_icon">

		<i class="btn btn_act"></i>

		<i class="btn"></i>

		<i class="btn"></i>

		<i class="btn"></i>

		<i class="btn"></i>

		<i class="btn"></i>

		<i class="btn"></i>

		<i class="btn"></i>

	</div>

	<a href="javascript:;" class="arrow prve">

		<span class="slider_left"></span>

	</a>

	<a href="javascript:;" class="arrow next">

		<span class="slider_right"></span>

	</a>

</div>

<div style="text-align:center;margin:20px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>

</div>

</body>

</html>

3、在线体验

Banner-Demo 进入

jQuery仿京东首页广告图片切换图片轮播的更多相关文章

  1. jQuery+html5实现的3D动态切换焦点轮播幻灯片

    今天爱编程给网友们分享一款基于jQuery+html5实现的3D动态切换焦点轮播幻灯片,支持左右箭头和圆点按钮播放控制,支持多种不同的3D动态切换特效,自适应全屏显示,兼容360.FireFox.Ch ...

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

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

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

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

  4. jQuery实现的鼠标滑过切换图片代码实例

    jQuery实现的鼠标滑过切换图片代码实例:有时候网页需要这样的简单效果,那就是当鼠标滑过默认图片的时候,能够实现图片的切换,可能在实际应用中,往往没有这么简单,不过大家可以自行扩展一下,下面简单介绍 ...

  5. js 鼠标滚动到某屏时，加载那一屏的数据，仿京东首页楼层异步加载模式

    js用处:在做商城时,首页图片太多,严重影响首页打开速度,所以我们需要用到异步加载楼层.js名称:鼠标滚动到某屏时,加载那一屏的数据,仿京东首页楼层模式js解释:1.用于商城的楼层内容异步加载,滚动条 ...

  6. 利用jQuery实现图片无限循环轮播(不借助于轮播插件)

    原来我主要是用Bootstrap框架或者swiper插件实现轮播图的功能,而这次是用jQuery来实现图片无限循环轮播! 用到的技术有:html.css.JavaScript(少).jQuery(主要 ...

  7. Js实现图片点击切换与轮播

    Js实现图片点击切换与轮播 图片点击切换 <!DOCTYPE html> <html> <head> <meta charset="UTF-8&qu ...

  8. js 实现图片间隔循环轮播以及没有间隔的循环轮播

    链接地址:http://blog.sina.com.cn/s/blog_75cf5f32010199dn.html 最近做了个图片循环轮播的功能.就是几张图片不断的循环滚动显示. 感觉这个方法不错所以 ...

  9. iOS：实现图片的无限轮播（二）－－－之使用第三方库SDCycleScrollView

    iOS:实现图片的无限轮播(二)---之使用第三方库SDCycleScrollView 时间:2016-01-19 19:13:43      阅读:630      评论:0      收藏:0   ...

随机推荐

  1. 蓝牙5.0芯片NRF52810和NRF52832可进行mesh组网

    提供智能化mesh照明解决方案,在现有传统灯具的基础上,插入NRF52832/52810的照明Mesh模块,可以迅速升级现有的传统灯具,配合手机APP和服务器系统,使每一盏灯成为物联网的一个智能节点, ...

  2. yarn 与 npm 比较

    一.首先需要了解的命令 npm install === yarn —— install 安装是默认行为. npm install taco --save === yarn add taco —— ta ...

  3. 源码分析 RocketMQ DLedger(多副本) 之日志复制(传播)

    目录 1.DLedgerEntryPusher 1.1 核心类图 1.2 构造方法 1.3 startup 2.EntryDispatcher 详解 2.1 核心类图 2.2 Push 请求类型 2. ...

  4. linux—ln

    1.  软连接:不可删除源文件,删除源文件导致链接文件找不到,出现红色闪烁. 2.  硬链接:  源文件删除后,链接文件可以正常打开,链接前后的文件inode号相同,硬链接只能针对文件做链接,,不能针 ...

  5. 基于 .NET Core 的简单文件服务器

    Netnr.FileServer 基于 .NET Core 的简单文件服务器,数据库为SQLite 源码 https://github.com/netnr/blog https://gitee.com ...

  6. 基于 raft 协议的 RocketMQ DLedger 多副本日志复制设计原理

    目录 1.RocketMQ DLedger 多副本日志复制流程图 1.1 RocketMQ DLedger 日志转发(append) 请求流程图 1.2 RocketMQ DLedger 日志仲裁流程 ...

  7. 面试题-JS中的作用域相关问题

    对象类型: 原始数据类型存储的是值,而对象类型存储的是地址(指针).下面的这个例子就比较有意思了. 先看题: function test(person) { person.age = 26 perso ...

  8. 学习Python第一天 ---Hello World

    引言 人生苦短,请用 Python(3.+) 越来越多的情况下使用Python语言进行"代码粘合"和"数据分析"变得非常方便,而且Python 在"爬 ...

  9. 你不知道的JavaScript（中）读书笔记（二）

    第三章 原生函数 常用的原生函数(内建函数)有: String() Number() Boolean Array() Object() Function() RegExp() Date() Erroe ...

  10. spring源码学习（四）-spring生命周期用到的后置处理器

    生命周期的九大后置处理器 第一次调用后置处理器org.springframework.beans.factory.support.AbstractAutowireCapableBeanFactory# ...