Jquery实例-图片轮播

最新推荐文章于 2024-09-16 08:47:17 发布

小哲z5

最新推荐文章于 2024-09-16 08:47:17 发布

阅读量988

点赞数

分类专栏： Jquery实例文章标签： jquery javascript 图片轮播

本文链接：https://blog.csdn.net/zxtms/article/details/38854765

版权

Jquery实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

图片轮播演示地址：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;  /*设置字体颜色*/
}