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 进入

转载于:https://www.cnblogs.com/hxun/p/11103868.html

jQuery仿京东首页广告图片切换图片轮播相关推荐

  1. 使用CSS实现简单的图片切换（轮播图）

    使用CSS实现简单的图片切换(轮播图) 预览图如下: 目录 使用CSS实现简单的图片切换(轮播图) 一:首先创建基本布局 1:创建一个div容器 ,里面的ul与ol标签分别对应轮播图片和下方圆点: 二 ...

  2. 实现广告图片切换效果轮播图效果

    轮播图代码: <!DOCTYPE html> <html lang="en">s <head><meta charset="UT ...

  3. 移动端插件-Swiper图片切换、轮播

    Swiper常用于移动端网站的内容触摸滑动 Swiper是纯javascript打造的滑动特效插件,面向手机.平板电脑等移动终端. Swiper能实现触屏焦点图.触屏Tab切换.触屏轮播图切换等常用效 ...

  4. 防仿百度图片背景色php,基于jQuery实现仿百度首页换肤背景图片切换代码_jquery...

    不多说了,先给大家展示效果图,本文支持源码下载哦,需要的朋友可以直接下载使用,代码很简单哦- html代码: css代码: *{margin:0;padding:0} a{color:#fff; ma ...

  5. jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换

    jQuery图片切换,图片幻灯片仿搜房网详情页图片相册切换 1.可左右切换 2.可点击缩略图显示大图 3.缩略图多张滚动效果 直接贴代码 <div class="mod18" ...

  6. 手机京东菜单html,jQuery仿京东商城手机端商品分类滑动切换特效

    jQuery仿京东商城手机端商品分类滑动切换特效 一款仿京商城东手机移动端商品图片分类导航滑动效果,jQuery商品二级分类菜单切换特效. js代码 //设置cookie function setCo ...

  7. 商品浏览时的css,jquery仿京东商品放大浏览页面

    jquery仿京东商品页面 京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面css的代码!!! *{ margin: 0 ...

  8. php商品浏览页面,jquery仿京东商品放大浏览页面_实例分享

    前面我们和大家分享过很多仿京东功能的文章,本文我们主要为大家详细介绍jquery仿京东商品浏览页面,鼠标放在图片上实现放大效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能帮助到大家. j ...

  9. HTML京东商品页面代码,jquery仿京东商品页面代码分享

    jquery仿京东商品页面 京东页面大家都很熟悉,进入商品页面把鼠标放在图片上旁边会出现一个放大的效果,接下来就带大家看看怎么实现的!!!! 仿京东商品页面的效果!!! 仿京东商品页面css的代码!! ...

最新文章

  1. 标准c语言怎么绘图,C语言绘图问题
  2. 使用Python，OpenCV从静态背景中提取移动前景
  3. 25年了，我总结出这些信息提取的经验教训
  4. RK3288 手动设置电池电量
  5. cdt规约报文用程序解析_用Python运维网络（5）：scapy
  6. c语言编常见算法,5个常见C语言算法
  7. 高精度加法（A+BProblemII）
  8. 报错解决——make: *** No targets specified and no makefile found. Stop
  9. 深度学习难？学完它，拿高薪绝对不是问题
  10. Android学习第六天---seekbar
  11. Python3按编号创建文件夹并在文件夹下创建对应编号的txt文件
  12. 第二届世界智能大会，看大咖眼中的智能时代
  13. 关于jenkins打包部署
  14. Excel根据身份证号提取省份
  15. 通达信公式-当天成交量不大于百日均成交量比例
  16. 驱动精灵的护眼大师屏保非常不错
  17. php 导出excel 设置列宽,php – 导出Excel文件时调整列宽
  18. Silvaco TCAD仿真学习Lesson1——Atlas仿真
  19. Selig集团宣布收购MGJ，成为今年公布的第二笔收购
  20. 计算机常用的数字编码是什么意思,编码是什么意思

热门文章

  1. PostgreSQL通知示例
  2. SQL 使用总结四（关于索引）
  3. django ForeignKey on_delete属性相关参数的使用
  4. 查看java运行时参数_查看JVM运行时参数
  5. python爬虫要不要学正则_Python爬虫入门，如何使用正则表达式
  6. 小程序组件的使用（一）创建组件
  7. 北京小学 计算机派位,北京小升初电脑派位原理详解！和对口直升入学有什么区别？...
  8. miniblink载入html,(转)miniblink跨线程异步JS回调,及miniblink提升首屏加载速度的代码...
  9. 计算机网关,如何查看计算机的IP地址和网关
  10. tensorflow 转张量类型为float_一文看懂TensorFlow计算图