您的位置：首页 > Web前端 > JQuery

Jquery实例-图片轮播

2014-08-26 21:59 169 查看
图片轮播演示地址：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;  /*设置字体颜色*/}

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                jquery
                                                javascript
                                                图片轮播
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航