淘宝首页商品广告图片左右轮播 JQuery JS特效
来源:互联网 发布:网络推广软件有哪些 编辑:程序博客网 时间:2024/04/29 00:32
淘宝首页商品广告图片左右轮播 JQuery JS特效,点击左边向左按钮,广告图片向左滚动。 点击右边边向右按钮,广告图片向右滚动。具体效果请查看:在线演示
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>MJBlog(mj.588cy.com)</title><style>* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}body{ margin:0px; padding:0px; background-color:#f0f0f0; font-family:Arial, Helvetica, sans-serif;}a{ text-decoration:none;}.top{ width:800px; height:30px; border-bottom:1px solid #dbdbdb; margin:0px auto;}.logo{ width:300px; height:30px; line-height:30px; float:left; font-size:14px; margin:0px 5px;}.logo a{ color:#666666;}.denglu{ height:30px; line-height:30px; float:right; font-size:14px;}.denglu a{ color:#666666; margin:0px 10px;}.clear{ display:block; height:0px; line-height:0px; font-size:0px; clear:both;}.box{ width:780px; height:auto; margin:0px auto; border-top:1px solid #f9f9f9; padding:30px 10px;}.img_box{ width:450px; height:auto; padding:10px 165px; background-color:#FFFFFF; margin:0px auto;}.lb{background-color:#ffffff; width:400px; height:200px; overflow:hidden; position:relative; float:left;}.lb ul{ position:absolute; width:700px;}.lb li{ width:200px; height:200px; float:left;}.lb li img{ width:200px; height:200px;}.xz,.xy{ width:13px; height:200px; cursor:pointer; float:left; padding:0px 6px;}.xz_bg{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat -13px 90px #FFFFFF;}.xz_bgs{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat -13px -40px #FFFFFF;}.xy_bg{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat 12px 90px #FFFFFF;}.xy_bgs{background:url(http://mj.588cy.com/img/tb_lb.png) no-repeat 12px -40px #FFFFFF;}</style><script type="text/javascript" src="http://mj.588cy.com/img/jquery.js"></script><script type="text/javascript">$(document).ready(function(){ var scroll_time = 500; $(".xz").click(function(){ $("#an").css("left",-200); $("#an li:last").clone().prependTo("#an"); $("#an li:last").detach(); $("#an").animate({left:0},scroll_time); }); $(".xy").click(function(){ $("#an").css("left",0); $("#an li:first").clone().appendTo("#an"); $("#an").animate({left:-200},scroll_time,xy_an); }); function xy_an(){ $("#an li:first").detach(); $("#an").css("left",0); }; $(".xz").hover(function(){ $(this).removeClass("xz_bg").addClass("xz_bgs"); },function(){ $(this).removeClass("xz_bgs").addClass("xz_bg"); }); $(".xy").hover(function(){ $(this).removeClass("xy_bg").addClass("xy_bgs"); },function(){ $(this).removeClass("xy_bgs").addClass("xy_bg"); });});</script></head><body><div class="top"><div class="logo"><a href="http://mj.588cy.com">MJBlog</a></div><div class="denglu"><a href="#">登录</a><a href="#">注册</a></div><div class="clear"></div></div><div class="box"><div class="img_box"><div class="xz xz_bg"></div><div class="lb"><ul id="an"><li><a href="http://www.chaonanwo.com/note/243/g/213" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/002/43/8dddf6254f72a0c940c3161d7a8b4dfcOQ1VuT_200x999.jpg" /></a></li><li><a href="http://www.chaonanwo.com/note/197/g/167" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/97/0a2e7a450935c400fd4e4c2a0bd297a6uLq22G_200x999.jpg" /></a></li><li><a href="http://www.chaonanwo.com/note/131/g/103" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/31/8ba706159850b27253b41814f856de85nHK4hH_200x999.jpg" /></a></li><li><a href="http://www.chaonanwo.com/note/194/g/164" target="_blank"><img src="http://www.chaonanwo.com/public/upload/share/000/000/001/94/9b1751bc26272121498ac3f340f11b0eCO9ZPD_200x999.jpg" /></a></li></ul></div><div class="xy xy_bg"></div><div class="clear"></div></div></div></body></html>
- 淘宝首页商品广告图片左右轮播 JQuery JS特效
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- 【Android】首页图片轮播效果(淘宝、京东首页广告效果)
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- 安卓首页图片轮播效果(淘宝、京东首页广告效果)
- jquery菜单式图片轮播特效仿淘宝
- Android 商品广告轮播图 图片轮播
- 摩天轮图片轮播特效 图片从左到右循环轮播的Jquery JS特效
- jQuery图片轮播特效
- 原生js和jquery实现图片轮播特效
- jquery轮播特效(左右轮播)
- 首页轮播特效
- JS淘宝商品广告效果
- JavaScript特效动画实例—图片轮播 右下角图片广告 原生js日历
- 杂项
- 最小树形图
- 最小费用最大流
- perl 6 第一个编译器pugs的实现人唐凤/唐汉宗
- 推荐三十款最好的免费项目管理软件
- 淘宝首页商品广告图片左右轮播 JQuery JS特效
- 【2步搞定】Lion 10.7.4!!在VMware下完美啃苹果
- Android Create Shortcut
- 整数的快速幂和矩阵的快速幂
- 计算机组成原理与接口技术知识大纲
- 网站测速工具
- Java 反射Reflection
- SWT GridLayout网格布局
- 寻觅反思,追求卓越——毕业工作所感