仿easyslider效果用最简化的jQuery实现

最新推荐文章于 2024-05-31 01:27:40 发布

Riddick

最新推荐文章于 2024-05-31 01:27:40 发布

阅读量371

点赞数

分类专栏： jQuery原创特效文章标签： jquery function class xhtml html javascript

本文链接：https://blog.csdn.net/Riddick_Design/article/details/7165475

版权

jQuery原创特效专栏收录该内容

0 篇文章 0 订阅

订阅专栏

复制代码查看效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery slider效果</title>
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
<!-- 
$(function(){
	/* 定义变量 */
    var $imgShow = $('.imgShow'),
	    $imgShow_li = $imgShow.find('li'),
		$wrap = $('#wrap');
	/* 创建左右按钮 */
	$wrap.append("<a class='prev'> < </a><a class='next'> > </a>");
	$('.next').css({'left':$('#wrap').width()-$('.next').width(),'top':($('#wrap').height()-$('.next').height())/2});
	$('.prev').css({'left':0,'top':($('#wrap').height()-$('.next').height())/2});
	/* 创建编号 */
	$imgShow.after("<ul class='num'></ul>");
	var $num = $('.num');
	$imgShow_li.each(function(index){
		var _number = index+1;
		$num.append('<li>'+_number+'</li>');	
	});
	$('.num > li').eq(0).addClass('visited');
	/* 编号按钮定位 */
    var _numW = $num.width(),
		_numH = $num.height(),
		N_top = $wrap.height()-_numH+"px",
		N_left = ($wrap.width()-_numW)/2+"px"
    $num.css({"left":N_left,"top":N_top});
	/* --------------------- 左右滚动 --------------------- */
	var _ind = 0;
	$('.num > li').bind('click',function(){ 
	    $index = $('.num > li').index($(this));
	   // alert(-($index*$imgShow_li.width()))
		$('.imgShow').animate({ left: -($index*$imgShow_li.width()) }, 500);
		$('.num > li').removeClass('visited');
		$(this).addClass('visited');
		_ind=$index;
	});
	/* 左右按钮 */
    $('.next').bind('click',function(){ 
		if( _ind < $imgShow_li.length-1 ) {
		  _ind++;
		} else {
	      _ind = 0;
		};
	    $('.imgShow').animate({ left: -(_ind*$imgShow_li.width()) }, 500);
		$('.num > li').removeClass('visited');
		$('.num > li').eq(_ind).addClass('visited');
	});
	$('.prev').bind('click',function(){
		if( _ind >= 1 ) {
		  _ind--
		} else {
		  _ind = $imgShow_li.length-1;
		};
	    $('.imgShow').animate({ left: -(_ind*$imgShow_li.width()) }, 500);	
		$('.num > li').removeClass('visited');
		$('.num > li').eq(_ind).addClass('visited');
	});
	/* 自动播放 */
	var xx = '';
	function play(){
	    if( _ind < $imgShow_li.length-1 ) {
			_ind++;
		} else {
			_ind = 0;
		};
		$('.num > li').removeClass('visited');
		$('.num > li').eq(_ind).addClass('visited');
		$('.imgShow').animate({ left: -(_ind*$imgShow_li.width()) }, 500);
	};
    var _time = setInterval(
		play,
	    1500);
    $wrap.hover(function(){
		clearInterval(_time); 
		clearInterval(xx); 
	},function(){
    _time_2 = setInterval(
	    play,
	    1500);
	xx = _time_2
	});

});
-->
</script>
<style>
<!-- 
* { margin:0; padding:0; font-size:12px; color:#000; font-family:Arial, "宋体", "新宋体";}
/* CSS 开始 */
#wrap { width:956px; margin:0 auto;  margin-top:50px; overflow:hidden; position:relative; height:300px;}
.imgShow {  height:300px; width:1000%; position:absolute;}
.imgShow li { float:left; height:300px; width:956px; list-style:none;}
.num { position:absolute; left:0; top:0; height:20px; z-index:998; }
.num li { top:0; z-index:999; background:#000; width:20px; height:20px; text-align:center; line-height:20px; float:left; list-style:none; color:#FFF; cursor:pointer; }
.num li:hover { background:#eee; color:#000;}
.num li.visited { background:#ccc; color:#000; }
.prev,.next { position:absolute; z-index:1001; display:block; cursor:pointer; height:58px;/*与特效无关*/color:#fff; font-size:50px; }
-->
</style>
<body>
<!-- HTML 开始 -->
<div id="wrap">
     <ul class="imgShow">
         <li><img src="http://hi.csdn.net/attachment/201112/30/0_1325234824waYO.gif" alt="图片一" /></li>
         <li><img src="http://hi.csdn.net/attachment/201112/30/0_1325234824waYO.gif" alt="图片一" /></li>
         <li><img src="http://hi.csdn.net/attachment/201112/30/0_1325234824waYO.gif" alt="图片一" /></li>
         <li><img src="http://hi.csdn.net/attachment/201112/30/0_1325234824waYO.gif" width="956" alt="图片一" /></li>
         <li><img src="http://hi.csdn.net/attachment/201112/30/0_1325234824waYO.gif" width="956" alt="图片一" /></li>
         <li><img src="http://hi.csdn.net/attachment/201112/30/0_1325234824waYO.gif" height="300" width="956" alt="图片一" /></li>
     </ul>
</div>
<!-- HTML 结束  -->
</body>
</html>

Riddick

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
仿easyslider效果用最简化的jQuery实现

复制代码查看效果：jQuery slider效果<!-- $(function(){ /* 定义变量 */ var $imgShow = $('.imgShow'), $imgShow_li = $imgShow.find('li'), $wrap = $('#wrap'); /* 创建左右按钮 */ $wrap.append(" > ");
复制链接

扫一扫