jquery实例-多张图片无缝滚动实现

最新推荐文章于 2024-04-23 11:28:13 发布

小哲z5

最新推荐文章于 2024-04-23 11:28:13 发布

阅读量1w

点赞数 3

分类专栏： Jquery实例文章标签： jquery图片无缝滚动 jquery图片滚动 javascript图片滚动图片无缝滚动

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

版权

Jquery实例专栏收录该内容

2 篇文章 0 订阅

订阅专栏

演示地址：http://blog.zxtms.net/blog/WorkPace/Jquery/jquerySider/sider.html

演示效果：

html页面代码:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多张图片无缝滚动实现</title>
    <link rel="stylesheet" href="sider.css"/>

    <script src="../jquery-1.8.3.js"></script>
    <script src="sider.js"></script>
</head>
<body>
	 <a href="#" id="leftmove">向左走</a>
       <a href="#" id="rightmove">向右走</a>
    <div class="siderImg">
   
    	<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>
            <li><img src="5.jpg" alt=""></li>
    	</ul>
    </div>


</body>
</html>

css代码：

*{
	padding: 0;
	margin:0;
}

body{
	margin:50px;
}

li{
	list-style-type: none;
}

.siderImg{
   width:800px;
   height: 200px;
   border: 5px solid #abcdef; 
   position: relative;
   overflow: hidden;  /*内容隐藏溢出,超出部分自动隐藏*/
}


.siderImg ul{
   overflow: hidden;  /*清除ul浮动*/
   width: 1600px;
   height:200px;
   left: 0px;  /*相对于起点*/
   position:absolute;
   _height:1px;  /*IE兼容清除浮动*/
}

.siderImg ul li{
	float:left;
	cursor: pointer;   /*设置鼠标样式为手状*/
}

jquery代码：

/**
  多张图片无缝滚动实现
*/
$(document).ready(function(){
     
     var $siderImg = $(".siderImg ul");

     var $siderImgHtml = $siderImg.html();

     $siderImg.html($siderImgHtml+$siderImgHtml);  

     var $imgWidth = $siderImg.children().eq(0).css("width");  //img元素的宽度
     
     var $size =  $siderImg.children().size();  //img元素的个数

     var $ulWidth = $imgWidth.split("px")[0] * $size;   //获取ul中img元素的总宽度

     $siderImg.css("width",$ulWidth+"px");   //设置ul中宽度

     $leftVar=0;
     
     var $temp=-8;

     var $interval = null;
     
//图片滚动方法
    var  moveImg=function()
    { 
       $leftVar=$leftVar+$temp;
        
//判断图片滚动方向
        if($temp>0)   
		{	 
		  if($leftVar==0)
          {      
           $leftVar =-$ulWidth/2; //向左走重置
          }    
		}
		if($temp<0)
		{
		  if($leftVar==-$ulWidth/2)
          {
           $leftVar = 0;  //向右走重置
          }
        }
	  $siderImg.css("left",$leftVar+"px");
    };

//设置一定时间调用反复调用该函数
   interval = setInterval(moveImg,300);

/*鼠标待在元素上面触发该事件*/
    $siderImg.mouseover(function(){
         clearInterval(interval);
    });
/*鼠标移开触发该事件*/
$siderImg.mouseout(function(){
   interval = setInterval(moveImg,300);
})

$("#leftmove").click(function(){

   $temp = -8;
});

$("#rightmove").click(function(){

   $temp = 8;
});
});