html 标签代码, JS 代码
- <div class="slider">
- // 轮播箭头
- <p class="lastpic"><img src="../images/prev.png"></p>
- <p class="nextpic"><img src="../images/next.png"></p>
- // 轮播图片
- <ul id="slides" class="slides clearfix">
- <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
- <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
- <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
- <li><img class="responsive" src="../images/wrap-page.jpg" alt="暂无图片"></li>
- </ul>
- </div>
- <script type="text/javascript">
- $(document).ready(function() {
- var len = $(".slider li").length-1;
- // 给 slider 设置样式
- $(".slider").CSS({
- "width":"100%",
- "height": "inherit",
- "overflow": "hidden",
- "display":"inline-block"
- });
- // 给 ul 设置宽度
- $(".slides").CSS({
- "position": "relative",
- "width":((len+1)*100).toString()+"%",
- "margin":"0",
- "padding":"0"});
- // 给 li 设置百分比宽度
- $(".slides li").CSS({
- "width":(100/(len+1)).toString()+"%",
- "float":"left"
- });
- // 给图片设置宽度
- $(".responsive").CSS({
- "width":"100%",
- "height":"inherit"
- });
- // 控制点样式
- $(".slider p").CSS({
- "position": "absolute",
- "z-index":"999",
- "cursor": "pointer"
- });
- $(".slider .lastpic").CSS({
- "left":"0",
- "margin-top":"7%"
- });
- $(".slider .nextpic").CSS({
- "right":"0",
- "margin-top":"7%"
- });
- //animate 移动
- var i = 0;
- $(".nextpic").click(function(){
- moveNext(i);
- });
- $(".lastpic").click(function(){
- moveLast(i);
- });
- // 自动轮播
- var timer = setInterval(function(){
- moveNext(i);
- },5000);
- moveNext = function(n){
- if(n==len){
- i=-1;
- $(".slider .slides").animate({right: ""},800);
- }else{
- $(".slider .slides").animate({right:((n+1)*100).toString()+"%"}, 800);
- }
- i++;
- }
- moveLast = function(n){
- if(n==0){
- i=len+1;
- $(".slider .slides").animate({right:(len*100).toString()+"%"}, 800);
- }else{
- $(".slider .slides").animate({right:((n-1)*100).toString()+"%"}, 800);
- }
- i--;
- }
- // 手机触摸效果
- var startX,endX,moveX;
- function touchStart(event){
- var touch = event.touches[0];
- startX = touch.pageX;
- }
- function touchMove(event){
- var touch = event.touches[0];
- endX = touch.pageX;
- }
- function touchEnd(event){
- moveX = startX - endX;
- if(moveX>50){
- moveNext(i);
- }else if(moveX<-50){
- moveLast(i);
- }
- }
- document.getElementById("slides").addEventListener("touchstart",touchStart,false);
- document.getElementById("slides").addEventListener("touchmove",touchMove,false);
- document.getElementById("slides").addEventListener("touchend",touchEnd,false);
- //transition 移动固定宽度, 无法自适应
- // $(".nextpic").click(function(){
- // if(i==len){
- // i=-1;
- // $(".slider .slides").CSS({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(0px)'
- // })
- // }else{
- // $(".slider .slides").CSS({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(-'+(i+1)*width+'px)'
- // })
- // }
- // i++;
- // });
- // $(".lastpic").click(function(){
- // if(i==0){
- // i=len+1;
- // $(".slider .slides").CSS({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(-'+len*width+'px)'
- // })
- // }else{
- // $(".slider .slides").CSS({
- // 'transition-timing-function':'linear',
- // 'transition-duration':'800ms',
- // 'transform':'translateX(-'+(i-1)*width+'px)'
- // })
- // }
- // i--;
- // })
- });
- </script>
来源: http://www.bubuko.com/infodetail-3100512.html