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. 升级xcode10.0, 终端运行 运行报错：Print: Entry, “:CFBundleIdentifier”, Does Not Exist

    目录 问题原因 解决方法 终端解决 Print: Entry, ":CFBundleIdentifier", Does Not Exist 第一步: 去官网GitHub下载对应包就 ...

  2. Linux下RocketMQ下载安装教程

    一.下载 1.官网下载:下载地址   2.百度网盘下载:下载地址 提取码:0g5a java开发工具下载地址及安装教程大全,点这里. 更多深度技术文章,在这里. 二.安装及启动 1.将zip文件上传到 ...

  3. 十大C++实战项目，你会几个？【高薪必备】

    前言 本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:实验楼   市面上有很多C++的实战项目,从简单到进阶,学习每个项目都 ...

  4. 使用WebClient实现断点续传 重写

    早上下个东西,半天不动,火冒三丈,我可是100M光纤... WebClient.Httpclient.HttpWebRequest.WebRequest 我选了了WebClient因为他封装的够好 断 ...

  5. cs5642 v3摄像头拍照效果

    4个摄像头拍照效果 配置的是ov5642_960p_RAW 测试图片分别如下:

  6. 基于RT-Thread的开源飞控StarryPilot

    背景描述 近年来无人机应用市场日趋火热,无人机开始被应用在多个领域之中,比如航拍,植保,运输,安防等.随着应用场景的增加,对于无人机的大脑一飞控,的性能和功能要求也变得越来越高.国内具有一大批优质的无 ...

  7. vue 组件传递值以及获取DOM元素的位置信息

    1.父组件 select_li.vue 1.1 父组件模板 <template> <div id='selectLi' ref="selectLi"> &l ...

  8. 关于页面打印window.print()的样式问题

    当我们打印网页的时候.有时候会发现.打印出来的.跟网页上看到的样式的差别有点大.这其中可能有的问题是.样式问题. 当调用打印(window.print())方法时.打印机会在网页的样式中查找 @med ...

  9. 多线程之美5一 AbstractQueuedSynchronizer源码分析<一>

    AQS的源码分析 目录结构 1.什么是CAS ? 2.同步器类结构 3.CLH同步队列 4.AQS中静态内部类Node 5.方法分析 ​ 5.1.acquire(int arg ) ​ 5.2.rel ...

  10. 五分钟学会conda常用命令

    文章目录 conda常用命令 1. 获取版本号 2. 获取帮助 3. 环境管理 4. 分享环境 5. 包管理 conda常用命令 1. 获取版本号 conda --version 或 conda -V ...