jquery 图片左右翻页

最新推荐文章于 2024-06-13 21:16:17 发布

iziminy

最新推荐文章于 2024-06-13 21:16:17 发布

阅读量1.9k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/zimin1985/article/details/18546795

版权

jQuery 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!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=utf-8" />
<title>zimin</title>
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<style>
*{ font-size:12px;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}
table {border-collapse:collapse;border-spacing:0;}
fieldset,img {border:0}
address,caption,cite,code,dfn,em,strong,th,var {font-style:normal;font-weight:normal}
ol,ul {list-style:none}
caption,th {text-align:left}
h1,h2,h3,h4,h5,h6 {font-size:100%;font-weight:normal}
q:before,q:after {content:''}
abbr,acronym { border:0}
a{ text-decoration:none;}

body{background:#eee;}
ul{ position:absolute;}
li{float: left;
   margin:0 69px 0 0;
    text-align: center;}
#slider_pic{height: 186px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
   background:#fff;
    width: 688px;}
</style>
</head>

<body>
<div style="border:1px solid #333; width:800px; background:#eee;">
<a href="#" id="prev">上一页</a>
<a href="#" id="next">下一页</a>
<div id="slider_pic">
   <ul>
      <li><img width="114" height="114" src="images/201401/goods_img/3261_G_1388618222612.jpg"></li>
      <li><img width="114" height="114" src="images/201311/goods_img/987_G_1384993098120.jpg"></li>
      <li><img width="114" height="114" src="images/201309/goods_img/896_G_1378435472649.jpg"></li>
      <li><img width="114" height="114" src="images/201401/goods_img/3893_G_1389222376993.jpg"></li>
      <li><img width="114" height="114" src="images/201312/goods_img/3865_G_1386995917625.jpg"></li>
      <li><img width="114" height="114" src="images/201309/goods_img/164_G_1378435468487.jpg"></li>
      <li><img width="114" height="114" src="images/201309/goods_img/976_G_1378435475572.jpg"></li>
      <li><img width="114" height="114" src="images/201312/goods_img/3867_G_1386898414515.jpg"></li>
      <li><img width="114" height="114" src="images/201309/goods_img/1448_G_1379977792394.jpg"></li>
      <li><img width="114" height="114" src="images/201309/goods_img/3557_G_1378435529859.jpg"></li>
      <li><img width="114" height="114" src="images/201311/goods_img/3844_G_1384474769691.jpg"></li>
</ul>
</div>
</div>
</body>
<script type="text/javascript">

var oPic = jQuery('#slider_pic').find('ul');
var oImg = oPic.find('li');
var oLen = oImg.length;
var oLi = oImg.width();
var prev = jQuery("#prev");
var next = jQuery("#next");

oPic.width(oLen * 185);
   oPic.width();
   var iNow = 0;
   var iTimer = null;
   oLen = Math.ceil(oLen/4);
   prev.click(function() {
       if (iNow > 0) {
           iNow--;

       }
       ClickScroll();
   })
   next.click(function() {
       //console.log(oLen);
       if (iNow < oLen - 1) {
           iNow++
       }
       //console.log(iNow);
       ClickScroll();
   })

   function ClickScroll() {

       //iNow == 0 ? prev.addClass('no_click') : prev.removeClass('no_click');
       //iNow == oLen - 4 ? next.addClass("no_click") : next.removeClass("no_click");

       oPic.animate({
           left: -iNow * (185*4)
       })
   }
</script>
</html>

iziminy

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
jquery 图片左右翻页

zimin*{ font-size:12px;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {margin:0;padding:0;}table {border-collapse:collapse;border-spacing
复制链接

扫一扫

专栏目录