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. 剑指offer-31：整数中1出现的次数（从1到n整数中1出现的次数）

    参考: https://troywu0.gitbooks.io/interview/整数中出现1的次数(从1到n整数中1出现的次数).html 题目描述 求出1~13的整数中1出现的次数,并算出100 ...

  2. go基础之json格式数据处理

    go基础之json格式数据处理 1.结构体小写问题导致出错 2.struct没有正确加tag 3.struct加上tag 4.struct tag扩展 go基础之json格式数据处理 go标准库里面提 ...

  3. Mac ifconfig 详解（ifconfig detail）-- 外婆送来的丁香(Grandma's clove)

    引言 Intro 图片源链:https://pixnio.com/zh/%E6%A4%8D%E7%89%A9/%E8%8A%B1/%E4%B8%81%E9%A6%99%E8%8A%B1-%E5%8F% ...

  4. 曹工说Spring Boot源码系列开讲了（1）-- Bean Definition到底是什么，附spring思维导图分享

    写在前面的话&&About me 网上写spring的文章多如牛毛,为什么还要写呢,因为,很简单,那是人家写的:网上都鼓励你不要造轮子,为什么你还要造呢,因为,那不是你造的. 我不是要 ...

  5. cmake 简介

    CMake是一个跨平台的安装(编译)工具,可以用简单的语句来描述所有平台的安装(编译过程).他能够输出各种各样的makefile或者project文件,能测试编译器所支持的C++特性,类似UNIX下的 ...

  6. 基于iCamera测试500w摄像头-mt9p001,mt9p031,mt9p001模块小结

    基于iCamera测试500w摄像头-mt9p001,mt9p031,mt9p001模块小结 先看实物 M12标准无畸变镜头效果 标准CS镜头效果 iCamera底板+mt9p001安装效果 再看看c ...

  7. 【Taro】363- 玩转 Taro 跨端之 flex 布局篇

    Taro 是一套遵循 React 语法规范的跨平台开发解决方案,但是目前当我们使用 Taro 的时候,在不同平台上的开发体验还有不一致的地方,所以我们也都期待有一套跨平台统一的解决方案,能够以最小差异 ...

  8. H5 app在真机调试的时候正常,打包成app后报错

    在自己的一个用h5开发的项目中, 环境 IDE HBuilderX 打包工具 Hbuilder线上打包 开发语言 JS 现象 从一个列表进入详细页之后一直转圈圈.因为是调用系统原生的等待组件,界面无法 ...

  9. yum换源,rpm包下载,源码包安装

    一.yum更换源 yum自带源地址一般斗是国外的,可能下载速度略慢,我们可以自己换成国内的源,比如163等.比如配置163的yum源:1.先删除默认源文件dvd.repo # rm -f /etc/y ...

  10. CCF-CSP题解 201612-3 权限查询

    一共有三层信息,三层信息的依赖关系是: \[用户user->角色role->权限authority\] 先存储\(authority\)信息,\(role\)直接存储\(authority ...