Jquery实例-图片轮播

来源：互联网发布：搜客网络编辑：程序博客网时间：2024/06/06 07:03

图片轮播演示地址：http://blog.zxtms.net/blog/WorkPace/Jquery/Imgslider/slider.html

图片轮播演示效果：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>图片轮播</title><link rel="stylesheet" href="slider.css" /> <script src="../jquery-1.8.3.js"></script>  <script src="slider.js"></script></head><body><div class="imgSlider"><ul><li><img src="1.jpg" alt=""></li><li><img src="2.jpg" alt=""></li><li><img src="3.jpg" alt=""></li><li><img src="4.jpg" alt=""></li></ul><ol><li class="current">1</li><li>2</li><li>3</li><li>4</li></ol></div></body></html>

$(document).ready(function(){       var  $ol_li = $(".imgSlider ol li");       var $sliderUl =$(".imgSlider ul");       var $sliderli =$(".imgSlider ul li");       var $imgWidth = $(".imgSlider ul li img").eq(0).css("width").split("px")[0];       var inter = null;        var  n = 0; //定义计数器              $ol_li.click(function()       {           $(this).addClass("current").siblings().removeClass();                       $sliderUl.animate({"left":-$imgWidth*$(this).index()+"px"},300);       });//自动轮播方法     $carousel = function(){     if(n==3)      {      n=0;      }      else      {      n++;      }                         $ol_li.eq(n).addClass("current").siblings().removeClass();                       $sliderUl.animate({"left":-$imgWidth*n+"px"},500);     } //默认自动轮播   inter=setInterval($carousel,1000);//设置鼠标点击停止轮播   $sliderli.mouseover(function(){        clearInterval(inter);     });//鼠标移开轮播$sliderli.mouseout(function(){ inter=setInterval($carousel,1000);});});

*{margin:0;padding:0;}body{margin:50px;}li{list-style-type: none;}.imgSlider{width:500px;height:350px;overflow: hidden;border: 3px solid #abcdef;position: relative;/*定位定的是自身元素*/}.imgSlider ul{width:2000px;left: 0;top: 0;position: absolute;}.imgSlider ul li {   float: left;   width:500px; }.imgSlider ol{position: absolute;right:10px;bottom: 5px;  /*离底部5px*/}.imgSlider ol li{    float: left;width: 16px;height: 16px;     line-height: 16px;text-align: center;border: 1px solid #fc0;background: #000;color: #fff;margin-right: 3px;cursor: pointer;}.imgSlider ol li.current{    background: #abcdef; color:#fff;  /*设置字体颜色*/}

0 0