欢迎各位兄弟 发布技术文章

这里的技术是共享的

You are here

左右点击 滑到下一个图片 自己亲自做的 有大用 有大大用

<div class="xuexijcpd_demo_outer">
<a href="javascript:void(0);" class="qkbkc_xuexijcpd_prev" id="qkbkc_xuexijcpd_prev"><img src="leftprev.png"></a>
<a href="javascript:void(0);" class="qkbkc_xuexijcpd_prev qkbkc_xuexijcpd_next" id="qkbkc_xuexijcpd_next"><img src="rightnext.png"></a>
<div class="xuexijcpd_demo" id="xuexijcpd_demo" style="overflow:hidden;">
<table cellpadding="0" cellspacing="0">
<tr>
<td valign="top" id="marquePic1">
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr align="center">
<td><img src="jcpd1.jpg"></td>
<td><img src="jcpd2.jpg"></td>
<td><img src="jcpd3.jpg"></td>
<td><img src="jcpd4.jpg"></td>
<td><img src="jcpd5.jpg"></td>
<td><img src="jcpd6.jpg"></td>
</tr>
</table>
</td>
<td id="marquePic2" valign="top"></td>
</tr>
</table>
</div>
</div>

<script language="javascript">
$(document).ready(function(){
marquePic2.innerHTML=marquePic1.innerHTML;
//alert(xuexijcpd_demo.clientWidth);
       $('#qkbkc_xuexijcpd_next').click(function(){
if(xuexijcpd_demo.scrollLeft>=marquePic1.scrollWidth){//demo向左滚动的距离,, 如果大于marquePic1的宽度
           }else{
var to_left = xuexijcpd_demo.scrollLeft+xuexijcpd_demo.clientWidth/2
               $('#xuexijcpd_demo').animate({scrollLeft:to_left});
//xuexijcpd_demo.scrollLeft = xuexijcpd_demo.scrollLeft+xuexijcpd_demo.clientWidth/2 ;
           }
return false;
});
$('#qkbkc_xuexijcpd_prev').click(function(){
if(xuexijcpd_demo.scrollLeft<=0){//demo向左滚动的距离,, 如果大于marquePic1的宽度
           }else{
var to_left = xuexijcpd_demo.scrollLeft-xuexijcpd_demo.clientWidth/2;
$('#xuexijcpd_demo').animate({scrollLeft:to_left});
//xuexijcpd_demo.scrollLeft = xuexijcpd_demo.scrollLeft-xuexijcpd_demo.clientWidth/2 ;
           }
return false;
});
});
</script>


.xuexijcpd_demo img{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
padding: 1px;
width: 39.84375vw;
}
.xuexijcpd_demo_outer{
position: relative;
}
.xuexijcpd_demo{
width: 79.6875vw;
margin: auto;
}
a.qkbkc_xuexijcpd_prev{
position: absolute;
display: block;
width: 3.90625vw;
height: 28.90625vw;
left: 0;
top: 0;
}
a.qkbkc_xuexijcpd_next{
left: 83.59375vw;
}


image.png

普通分类: