特效介绍
jQuery带左右箭头的3D效果图片轮播,兼容IE678,火狐和360等浏览器
使用方法
1、将下面代码放入head标签
<style>
<!-- /* jQuery jcImgScroll css */ .jcImgScroll { position:relative; height:342px;
} .jcImgScroll li { border:1px solid #ccc; } .jcImgScroll li a { background:#fff;
display:block; height:340px; } .jcImgScroll li.loading a { background:#fff
url(img/loading.gif) no-repeat center center;} .jcImgScroll li img,.jcImgScroll
li,.jcImgScroll em,.jcImgScroll dl { display:none; border:0 none;} .jcImgScroll
em.sPrev { background:url(images/arrow-left.png) no-repeat left center;
} .jcImgScroll em.sNext { background:url(images/arrow-right.png) no-repeat
right center;} .jcImgScroll dl dd { background:url(images/NumBtn.png) no-repeat
0 bottom; text- indent:-9em; } .jcImgScroll dl dd:hover,.jcImgScroll dl
dd.curr { background-position:0 0; } -->
</style>
<script src="js/jQuery-1.7.1.js" language="javascript" type="text/javascript">
</script>
<script src="js/jQuery-easing.js" language="javascript" type="text/javascript">
</script>
<script src="js/jQuery-jcImgScroll.js" language="javascript" type="text/javascript">
</script>
<script language="javascript" type="text/javascript">
< !--$(function() {
$("#demo1").jcImgScroll({});
$("#demo2").jcImgScroll({
count: 7
});
$("#demo3").jcImgScroll({
arrow: {
width: 110,
height: 342,
x: 220,
y: 0
},
count: 3,
offsetX: 140,
NumBtn: true,
title: false
});
}); -->
</script>
2、将下面代码放入你想显示的地方
<div id="demo1" class="jcImgScroll">
<ul>
<li>
<a href="https://5.jimth.com/" target="_blank" path="images/01.jpg"
title="我爱模版网 5.jimth.com">
</a>
</li>
<li>
<a href="https://5.jimth.com/" target="_blank" path="images/02.jpg"
title="我爱模版网 5.jimth.com">
</a>
</li>
<li>
<a href="https://5.jimth.com/" target="_blank" path="images/03.jpg"
title="我爱模版网 5.jimth.com">
</a>
</li>
<li>
<a href="https://5.jimth.com/" target="_blank" path="images/04.jpg"
title="我爱模版网 5.jimth.com">
</a>
</li>
<li>
<a href="https://5.jimth.com/" target="_blank" path="images/05.jpg"
title="我爱模版网 5.jimth.com">
</a>
</li>
<li>
<a href="https://5.jimth.com/" target="_blank" path="images/06.jpg"
title="我爱模版网 5.jimth.com">
</a>
</li>
<li>
<a href="https://5.jimth.com/" target="_blank" path="images/07.jpg"
title="我爱模版网 5.jimth.com">
</a>
</li>
</ul>
</div>
