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. UIView的作用

    UIView [UIView的作用] 主要用来显示应用程序的内容,可以作为label.button等控件的容器.表示屏幕上的一块矩形区域,同时可以处理该区域的绘制和触屏事件. MVC,MVVM等设计架 ...

  2. Swap Digits

    Description ) in the first line, which has the same meaning as above. And the number is in the next ...

  3. ASP.NET Core 选项模式源码学习Options IOptionsMonitor（三）

    前言 IOptionsMonitor 是一种单一示例服务,可随时检索当前选项值,这在单一实例依赖项中尤其有用.IOptionsMonitor用于检索选项并管理TOption实例的选项通知, IOpti ...

  4. Django 11

    目录 功能配置设计 跨站请求伪造CSRF 什么是CSRF 如果实现CSRF 如何避免CSRF CSRF相关的两个装饰器 auth模块 常用方法 扩展auth_user表中的字段 功能配置设计 实现类似 ...

  5. DARLING in the FRANXX

    那是一种叫比翼的鸟,这种鸟只有半边翅膀,如果雌鸟和雄鸟不紧靠在一起的话,它们就无法飞上天空,是不完整的生物. 但是,为什么,我总认为这种生活方式是如此美丽,感觉如此美丽. 那是一种叫比翼的鸟,我以前从 ...

  6. Java中真的只有值传递么？

    Java中真的只有值传递么? (本文非引战或diss,只是说出自己的理解,欢迎摆正心态观看或探讨) 回顾值传递和引用传递 关于Java是值传递还是引用传递,网上有不一样的说法. 1.基本类型或基本类型 ...

  7. python爬虫--模拟12306登录

    模拟12306登录 超级鹰: #!/usr/bin/env python # coding:utf-8 import requests from hashlib import md5 class Ch ...

  8. python学习-dict

    a = ["秦时明月","长沙","女"]bafenshu = ["八分熟","上海"," ...

  9. Python爬虫基础——XPath语法的学习与lxml模块的使用

    XPath与正则都是用于数据的提取,二者的区别是: 正则:功能相对强大,写起来相对复杂: XPath:语法简单,可以满足绝大部分的需求: 所以,如果你可以根据自己的需要进行选择. 一.首先,我们需要为 ...

  10. luogu1337 [JSOI2004]平衡点 / 吊打XXX(模拟退火）

    推荐博客:模拟退火总结(模拟退火)by FlashHu.模拟退火的原理,差不多就是不断地由现有的值不断地试探,不断地转到更优的值,并在一定概率下转到较差的值. 题目传送门:luogu1337 [JSO ...