京东广告轮播自动HtML小案例

京东广告轮播自动，鼠标悬浮停止
html5代码

<!doctype html><html lang="en"><head><meta charset="UTF-8"><meta name="Generator" content="EditPlus®"><meta name="Author" content=""><meta name="Keywords" content=""><meta name="Description" content=""><title>京东常见问题分类页面</title><link href="css/style.css" rel="stylesheet" /><script src="js/jquery-1.12.4.js"></script><script src="js/jquery-1.8.3.min.js"></script>
</head><body><div class="top"><div class="wrap"><div class="top-l left">欢迎光临京东，请<a href="" class="top-login">登录</a><a href="">免费注册</a></div><ul class="top-m right"><li><a href=""><i class="top-car left"></i>购物车</a></li><li class="line"></li><li><a href="">我的交易单</a></li><li class="line"></li><li><a href="">会员中心</a></li><li class="line"></li><li><a href=""><i class="top-tel left"></i>我的关注</a></li><li class="line"></li><li class="on"><a href="" class="menu-btn">联系客服</a><ul class="topDown"><li><a href="">帮助中心</a></li><li><a href="">我要吐槽</a></li><li><a href="">在线客服</a></li><li><a href="">咨询JIMI</a></li><li><a href="">客服邮箱</a></li></ul></li><li class="line"></li><li><a href="" class="menu-btn">手机金融</a></li><li class="line"></li><li><a href="" class="menu-btn">网站导航</a></li><li class="line"></li></ul><div class="clearfix"></div></div></div><div class="wrap"><a href=""><img src="data:images/logo.png" alt="logo" /></a></div><div class="wrap"><nav class="nav"><header>常见问题分类</header><ul><li><dl><dt>京东金融</dt><dd><a href="#">京东金融简介</a></dd><dd><a href="#">京东金融会员</a></dd><dd><a href="#">京东金融安全中心</a></dd></dl></li><li><dl><dt>理财</dt><dd><a href="#">京东小金库</a></dd><dd><a href="#">京东基金理财</a></dd><dd><a href="#">京东保险理财</a></dd><dd><a href="#">小白理财</a></dd><dd><a href="#">智投理财</a></dd><dd><a href="#">乐猜</a></dd></dl></li><li><dl><dt>白条</dt><dd><a href="#">京东白条</a></dd><dd><a href="#">京东金条</a></dd><dd><a href="#">校园白条</a></dd><dd><a href="#">教育白条</a></dd><dd><a href="#">乡村白条</a></dd><dd><a href="#">京东金采</a></dd><dd><a href="#">京农贷</a></dd></dl></li><li><dl><dt>众筹</dt><dd><a href="#">产品众筹</a></dd><dd><a href="#">轻众筹</a></dd><dd><a href="#">产品众筹发起者常见问题</a></dd><dd><a href="#">产品众筹支持者常见问题</a></dd><dd><a href="#">产品众筹永久众筹常见问题</a></dd><dd><a href="#">京东众创常见问题</a></dd></dl></li><li><dl><dt>京东钱包</dt><dd><a href="#">京东钱包简介</a></dd><dd><a href="#">自动服务及常见问题</a></dd><dd><a href="#">购房盈</a></dd></dl></li></ul></nav><section class="content"><p>京东金融 > 京东金融会员</p><ul><li>•<a href="#">什么是京东金融会员</a> </li><li>•<a href="#">会员签到规则</a> </li><li>•<a href="#">会员金币</a> </li><li>•<a href="#">小白信用</a> </li><li>•<a href="#">外部虚拟券</a> </li></ul></section></div>
</body>
<script>//  $(".menu-btn:first").css("border","1px red solid");$(".menu-btn:first").hover(function () {$(".topDown").show("slow");},function () {$(".topDown").hide("fast");});$(".nav ul li").toggle(function () {var str_index = $(this).index();var index = parseInt(str_index);$(".nav ul li:eq(" + index + ")>dl dd").slideDown("slow");},function () {var str_index = $(this).index();var index = parseInt(str_index);$(".nav ul li:eq(" + index + ")>dl dd").slideUp("slow");});// $(".nav ul li dl dt").click(//    function () {//         var str_index = $(this).index();//         var index = parseInt(str_index);//         $(".nav ul li:eq(" + index + ")>dl dd").toggle(//          function(){//               $(".nav ul li:eq(" + index + ")>dl dd").slideUp("slow");//           },//            function(){//               $(".nav ul li:eq(" + index + ")>dl dd").slideDown("slow");//             }//         );  //  }
// );</script></html>

css代码style.css

ul,li{padding: 0;margin: 0; list-style: none;}
.adver{margin: 0 auto; width: 700px; overflow: hidden; height: 454px; position: relative; background: url("../images/adver01.jpg");}
ul{position: absolute; bottom:10px; z-index: 100; width: 100%; text-align: center;}
ul li{display: inline-block; font-size: 10px; line-height: 20px; font-family: "΢���ź�"; margin: 0 1px; width: 20px; height: 20px; border-radius: 50%; background: #333333; text-align: center; color: #ffffff;}
.arrowLeft,.arrowRight{position: absolute;width: 30px;background:rgba(0,0,0,0.2);height: 50px;line-height: 50px;text-align: center;top:200px;z-index: 150;font-family: "΢���ź�";font-size: 28px;font-weight: bold;cursor: pointer;display: none;
}
.arrowLeft{left: 10px;}
.arrowRight{right: 10px;}
li:nth-of-type(1){background: orange;}

京东广告轮播自动HtML小案例相关推荐

js轮播图按钮小案例
案列介绍我们在写网页和app的时候经常看到轮播图,通过小按钮或者左右箭头按钮操作切换图片,点击到当前的小按钮并改变它的样式,并实现切换图片,本案例是写一个切换按钮的小案例. 一.大概步骤注意:有很 ...
Android 自动广告轮播图
近来项目忙完了,觉得自己的自动广告轮播蛮不错的 ,所以分享出来.先说说他的功能,第一能够实现自动轮播图片 ,第二可以修改自动更换广告条的小点默认是圆形的可以修改为小的正方向 ,同时还可以修改 ...
安卓开发笔记——自定义广告轮播Banner（实现无限循环）
关于广告轮播,大家肯定不会陌生,它在现手机市场各大APP出现的频率极高,它的优点在于"不占屏",可以仅用小小的固定空位来展示几个甚至几十个广告条,而且动态效果很好,具有很好的用户& ...
广告轮播图的前后台实现
这个广告轮播系统是老师布置的前端实训的一个结课作业. 前端: 图片在广告位进行有时间性的轮播. 在两侧有前进和后退的操作. 在下面有几张轮播图的小框框,用来显示图片的进度, 点击小框框还可以立刻跳转到 ...
Android商城开发----viewPager实现广告轮播（在首页Fragment中实现）
Android商城开发----在商城首页Fragment使用viewPager实现广告轮播写在前面:本篇文章建立在创建底部导航栏之后,对商城首页进行开发.创建底部导航栏的内容请查看:Android开 ...
京东快报轮播公告的实现
手机京东app首页的京东快报有一个无限轮播的公告栏,先看效果: 京东快报轮播公告.gif 公告内容大概每3s从中间向上滑出,同时下一条内容从底部向上滑动进入.整个过程还伴随有内容的渐变消失. 开始想这 ...
Android一段时间无操作之后，进入广告轮播界面，以及触摸之后停止轮播
想要的图片轮播Activity public class BannerMediaActivity extends AppCompatActivity implements View.OnClickLi ...
android Banner 广告轮播
看了几个Banner,代码量都不少,小巫这个算是比较少的了,流程也不算复杂小巫的广告轮播思路 MainActivity里从上到下 handler // 更新视图用 onCreate() //U ...
android banner 广告,Android convinientbanner顶部广告轮播控件使用详解
本文实例为大家分享了convinientbanner顶部广告轮播控件的具体代码,供大家参考,具体内容如下 gradle中添加 compile 'com.bigkoo:convenientbanner: ...
Bootstrap练习：京东商城轮播图
练习:京东商城的一个轮播图效果,可以自动切换图片和点击切换图片,主要运用了Bootstrap的Carousel插件与js插件等知识内容,练习源文件下面有下载链接. 目录前言一.练习 1.目标图: ...

京东广告轮播自动HtML小案例

京东广告轮播自动HtML小案例相关推荐

最新文章

热门文章