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. 数据库Oracle字符处理函数

    练习字符处理函数(数据库表都是从1开始),我们用到一张"伪表" dual: dual 表:dual 是一张只有一个字段,一行记录的表.dual 表也称之为'伪表',因为他不存储主题 ...

  2. 【Python3网络爬虫开发实战】 分析Ajax爬取今日头条街拍美图

    前言本文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理.作者:haoxuan10 本节中,我们以今日头条为例来尝试通过分析Ajax请求 ...

  3. 【React】345- React v16.9 新特性[译]

    今天我们发布了 React 16.9.它包含了一些新特性.bug修复以及新的弃用警告,以便与筹备接下来的主要版本. 一.新弃用 重命名 Unsafe 生命周期方法 一年前,我们宣布 unsafe 生命 ...

  4. Vue底层实现原理总结

    要实现MVVM 响应式原理,要实现如下几点 1.实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者 2.实现一个指令解析器Compile,对每个元素 ...

  5. thinking in java 阅读收获

    <thinking in java>,国内翻译为<JAVA编程思想>,一直听说该书写的非常好,今日研读,果然有所收获,特在此记录一些阅读时点点滴滴的收获. 1.  “基本数据类 ...

  6. webpack前端简单配置

    每次用webpack创建项目时,总是要安装一堆包,还要配置一系列文件解析规则,webpack打包规则等,烦不胜烦.网上找的很多webpack配置里面很多里面的配置或者引入包都是被弃用的,因此自己总结了 ...

  7. Python爬虫基础——re模块的提取和匹配

    re是Python的一个第三方库. 为了能更直观的看出re的效果,我们先新建一个HTML网页文件(可直接复制): index.html <!DOCTYPE html> <html l ...

  8. poj 2631 Roads in the North （自由树的直径）

    Roads in the North Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 4513   Accepted: 215 ...

  9. Codeforces Global Round 6

    久违的写篇博客吧  A. Competitive Programmer 题目链接:https://codeforces.com/contest/1266/problem/A 题意: 给你一个只包含数字 ...

  10. java基础集合简介Set（三）中

    今天主要说夏set集合,每天抽出一个小时总结下,生活会更加美好! --< java.util >-- Set接口: 数据结构:数据的存储方式: Set接口中的方法和Collection中方 ...