淘宝首页商品广告图片左右轮播 JQuery JS特效

最新推荐文章于 2016-10-06 20:59:19 发布

chaonanwo

最新推荐文章于 2016-10-06 20:59:19 发布

阅读量1.6k

点赞数 2

分类专栏： js css JQuery 文章标签： jquery function class scroll float xhtml

本文链接：https://blog.csdn.net/chaonanwo/article/details/8030361

版权

JQuery 同时被 3 个专栏收录

11 篇文章 1 订阅

订阅专栏

6 篇文章 0 订阅

订阅专栏

css

5 篇文章 0 订阅

订阅专栏

淘宝首页商品广告图片左右轮播 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>

chaonanwo

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
淘宝首页商品广告图片左右轮播 JQuery JS特效

淘宝首页商品广告图片左右轮播 JQuery JS特效，点击左边向左按钮，广告图片向左滚动。点击右边边向右按钮，广告图片向右滚动。具体效果请查看：在线演示 MJBlog(mj.588cy.com)* {margin:0;padding:0;font-size:12px;list-style:none;border:0;}body{ margin:0px; padding:0px;
复制链接

扫一扫

专栏目录