图片轮播

来源：互联网发布：魔方社区网络编辑：程序博客网时间：2024/05/16 17:26

滑动轮播<!DOCTYPE html>  <html>  <head>  <title></title>  <style type="text/css">  *{  margin:0;  padding:0;  }  #box{  position: relative;  overflow: hidden;  margin:0 auto;  }  button{  position: absolute;  display: inline-block;  width: 50px;  height: 70px;  color: #fff;  font-size: 40px;  padding-bottom: 10px;  cursor: pointer;  border: 1px solid rgba(54,54,54,0.4);  }  button:focus{  outline: none;  }  .arrow_left{  top: 200px;  padding-left: 2px;  background-color: rgba(54,54,54,0.4);  }  .arrow_right{  top: 200px;  right: 0;  padding-right: 2px;  background-color: rgba(54,54,54,0.4);  }  ul{  position: absolute;  bottom: 10px;  left: 300px;  list-style: none;  }  li{  float: left;  color: #fff;  width: 20px;  height: 20px;  text-align: center;  line-height: 20px;  margin-left: 10px;  background-color: #000;  border-radius: 10px;  cursor: pointer;  }.pic{overflow: hidden;}  img{  float:left;  }  li.red{  background-color: red;  }  </style>  </head>  <body>  <div id="box"><div class="panel"> <div class="icon_arrow">  <button class="arrow_left"><</button>  <button class="arrow_right">></button>  <ul class="circle">  <li class="red">1</li>  <li>2</li>  <li>3</li>  <li>4</li>  </ul>  </div>  <div class="pic">  <img src="4.jpg" name="4">  <img src="1.jpg" name="1">  <img src="2.jpg" name="2">  <img src="3.jpg" name="3">  <img src="4.jpg" name="4">  <img src="1.jpg" name="1"></div> </div>       </div>  <script src="jquery-1.11.3.js"></script>  <script type="text/javascript">    function test(num,width,height,time){//图片总数，相框长度，相框宽度,轮播间隔    var pic = $('.pic');    var current = getNumber();    function carousel(num,width,height,time){//设置轮播相框的大小$('#box').css({'width':width,'height':height});pic.css({'width':width*(num+2),'height':height,'margin-left':-width});//自动轮播var tip = setInterval(function(){$('.arrow_right').trigger('click');}, time);$('.panel').mouseenter(function(){clearInterval(tip);})$('.panel').mouseleave(function(){tip = setInterval(function(){$('.arrow_right').trigger('click');}, time);})}function getNumber(){var current = 0;var moveLeft = function(){current--;return getnum();}var moveRight = function(){current++;return getnum();}var getnum = function(){var num = (current%4+4)%4+1;return num;}var setnum = function(num){current = num;}var getCurrent =  function(){return current;}return {moveL:moveLeft,moveR:moveRight,setnum:setnum,getnum:getnum,getCurrent:getCurrent};}//鼠标点击右箭头$('.arrow_right').on('click',function(){PreventContinuousClick(this);pic.css('transition','margin-left 1s linear');var moveNum = current.moveR();circleAuto(moveNum);if(moveNum == 1){pic.css({'transition':'none','margin-left':0});}setTimeout(function(){$('.pic').css({'transition':'margin-left 1s linear','margin-left':-width * moveNum});},0);});//鼠标点击左箭头$('.arrow_left').on('click',function(){PreventContinuousClick(this);var moveNum = current.moveL();circleAuto(moveNum);if(moveNum == 4){pic.css({'margin-left':-width*5,'transition':'none'});}setTimeout(function(){pic.css({'transition':'margin-left 1s linear','marginLeft':-width * moveNum});},0);});//防止连续点击,每隔1S点击一次  function PreventContinuousClick(target){target.disabled=true;  setTimeout(function(){  target.disabled=false;  },1000);  }//点击小圆点跳转并注红功能  function circleRun(){$('.circle').on('click','li',function(){$('.circle').find('li').removeClass('red');$(this).addClass('red');var oldNum = current.getCurrent();var Newnum = parseInt($(this).html())-1;current.setnum(Newnum);if(oldNum>Newnum){pic.css({'transition':'margin-left 1s linear','marginLeft':-width * (Newnum+1)});}else if(oldNum<Newnum){pic.css({'transition':'margin-left 1s linear','marginLeft':-width *  (Newnum+1)});}               })}//小圆点自动跟随function circleAuto(value){var children = $('.circle').find('li');children.removeClass('red');for(var i =0;i<num;i++){if($(children[i]).html()==value){$(children[i]).addClass('red');return;}}}carousel(num,width,height,time);circleRun();}test(4,450,497,3000); </script>  </body>  </html>

渐显渐隐轮播

<!DOCTYPE html><html><head>    <title></title>    <style type="text/css">        *{            padding: 0;            margin: 0;        }        ul{            list-style: none;        }        #d1{            position: relative;            width: 167px;            height: 220px;            border:1px solid red;            margin-left: 100px;        }        li{            position: absolute;            opacity: 0;            transition: opacity 0.3s linear;        }        .show{            opacity: 1;        }    </style></head><body>    <div id="d1">        <ul>            <li id="li_1" class="show">                <img src="1.jpg" height="220" width="167" alt="">            </li>            <li id="li_2">                <img src="2.jpg" height="220" width="167" alt="">            </li>            <li id="li_3">                <img src="3.jpg" height="220" width="167" alt="">            </li>        </ul>    </div>    <script type="text/javascript">    var count=1;    function changePic(num){//该案例只有3张图片，需要根据实际图片写入参数        var countCur=count+1;        var liHide=document.getElementById("li_"+count);//找到当前需要隐藏的图片        if(count==num){            countCur=1;        }        var liShow=document.getElementById("li_"+countCur);//找到当前需要显示的图片        liHide.style.opacity=0;        liShow.style.opacity=1;        if(count==num){            count=1;        }else{            count++;        }    }    setInterval("changePic(3)",600);//因为函数句柄不能带参数，所以写成字符串你的形式可以使达到效果，或者写一个返回值是一个函数    </script></body></html>

0 0