jquery|jquery slider 实现手机网页上-仿淘宝首页轮播焦点图效果。 jqueryslider实现手机网页上-仿淘

文章图片

需要：

jquery.min.js
jquery 轮播插件：
slider.js

css部分：

.flexslider{position:relative; width:100%; height:150px; overflow:hidden; zoom:1; } .flex-viewport{max-height:2000px; -webkit-transition:all 1s ease; -moz-transition:all 1s ease; transition:all 1s ease; } .flexslider .slides{zoom:1; } .flex-direction-nav a{width:60px; height:90px; line-height:99em; overflow:hidden; margin:-30px 0; display:block; background:url(./img/ad_ctr.png) no-repeat; position:absolute; top:50%; z-index:10; cursor:pointer; opacity:0; filter:alpha(opacity=0); -webkit-transition:all .3s ease; } .flex-direction-nav .flex-next{background-position:0 -90px; right:0; } .flex-direction-nav .flex-prev{left:0; } .flexslider:hover .flex-next{opacity:0.8; filter:alpha(opacity=25); } .flexslider:hover .flex-prev{opacity:0.8; filter:alpha(opacity=25); } .flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover{opacity:1; filter:alpha(opacity=50); } .flexslider .img {position:relative; width:100%; background:red; margin-left:-40px; } .flexslider .img a {display:block; width:100%; } .flexslider .img a img {display:block; } .flex-control-nav{width:100%; height:12px; position:absolute; bottom:0px; text-align:center; } .flex-control-nav li{margin:0px; display:inline-block; zoom:1; *display:inline; } .flex-control-paging li a{background:url(./img/dot.png) no-repeat 0 -16px; display:block; height:16px; overflow:hidden; text-indent:-99em; width:16px; cursor:pointer; } .flex-control-paging li a.flex-active{background-position:0 0; }

html部分：