SuperSlide插件轮播图展示

最新推荐文章于 2024-08-10 07:11:53 发布

开着拖拉机的梦想家

最新推荐文章于 2024-08-10 07:11:53 发布

阅读量5.6k

点赞数 1

分类专栏： jquery

jquery 专栏收录该内容

44 篇文章 0 订阅

订阅专栏

SuperSlide轮播展示非常棒的一个插件，这里讲解两个案例。

1.标签切换/书签切换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="jquery-1.8.3.js"></script>
  <script src="jquery.SuperSlide.2.1.1.js"></script>
 <style type="text/css">
	/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }
		a:hover{ color:#1974A1;  }


		/* 本例子css */
		.slideTxtBox{ width:450px; border:1px solid #ddd; text-align:left;  }
		.slideTxtBox .hd{ height:30px; line-height:30px; background:#f4f4f4; padding:0 10px 0 20px;   border-bottom:1px solid #ddd;  position:relative; }
		.slideTxtBox .hd ul{ float:left; position:absolute; left:20px; top:-1px; height:32px;   }
		.slideTxtBox .hd ul li{ float:left; padding:0 15px; cursor:pointer;  }
		.slideTxtBox .hd ul li.on{ height:30px;  background:#fff; border:1px solid #ddd; border-bottom:2px solid #fff; }
		.slideTxtBox .bd ul{ padding:15px;  zoom:1;  }
		.slideTxtBox .bd li{ height:24px; line-height:24px;   }
		.slideTxtBox .bd li .date{ float:right; color:#999;  }

		/* 下面是前/后按钮代码，如果不需要删除即可 */
		.slideTxtBox .arrow{  position:absolute; right:10px; top:0; }
		.slideTxtBox .arrow a{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
			 cursor:pointer; background:url("../images/arrow.png") 0 0 no-repeat; }
		.slideTxtBox .arrow .next{ background-position:0 -50px;  }
		.slideTxtBox .arrow .prevStop{ background-position:-60px 0; }
		.slideTxtBox .arrow .nextStop{ background-position:-60px -50px; }
 </style>
 </head>

 <body>
  <div class="slideTxtBox">
    <div class="hd">
        <ul><li>教育</li><li>培训</li><li>出国</li></ul>
    </div>
    <div class="bd">
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            
			<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            
			<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            
        </ul>
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">名师教作文：３妙招巧写高分</a></li>
            
			<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            
			<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            
        </ul>
        <ul>
            <li><a href="http://www.SuperSlide2.com" target="_blank">澳大利亚八大名校招生说明会</a></li>
			<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            
			<li><a href="http://www.SuperSlide2.com" target="_blank">SuperSlide2.0正式发布！</a></li>
            
        </ul>
    </div>
</div>
 <script type="text/javascript">
		jQuery(".slideTxtBox").slide({});
		//jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true});
  </script>
 </body>
</html>

2.焦点图幻灯片

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" content="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <script src="jquery-1.8.3.js"></script>
  <script src="jquery.SuperSlide.2.1.1.js"></script>
  <style type="text/css">
	
		/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }

		/* 本例子css */
		.slideBox{ width:450px; height:230px; overflow:hidden; position:relative; border:1px solid #ddd;  }
		.slideBox .hd{ height:15px; overflow:hidden; position:absolute; right:5px; bottom:5px; z-index:1; }
		.slideBox .hd ul{ overflow:hidden; zoom:1; float:left;  }
		.slideBox .hd ul li{ float:left; margin-right:2px;  width:15px; height:15px; line-height:14px; text-align:center; background:#fff; cursor:pointer; }
		.slideBox .hd ul li.on{ background:#f00; color:#fff; }
		.slideBox .bd{ position:relative; height:100%; z-index:0;   }
		.slideBox .bd li{ zoom:1; vertical-align:middle; }
		.slideBox .bd img{ width:450px; height:230px; display:block;  }

		/* 下面是前/后按钮代码，如果不需要删除即可 */
		.slideBox .prev,
		.slideBox .next{ position:absolute; left:3%; top:50%; margin-top:-25px; display:block; width:32px; height:40px; background:url(../images/slider-arrow.png) -110px 5px no-repeat; filter:alpha(opacity=50);opacity:0.5;   }
		.slideBox .next{ left:auto; right:3%; background-position:8px 5px; }
		.slideBox .prev:hover,
		.slideBox .next:hover{ filter:alpha(opacity=100);opacity:1;  }
		.slideBox .prevStop{ display:none;  }
		.slideBox .nextStop{ display:none;  }
  </style>
 </head>
 <body>
  <div id="slideBox" class="slideBox">
	<div class="hd">
		<ul>
			<li class="">1</li>
			<li class="">2</li>
			<li class="on">3</li>
		</ul>
	</div>
	<div class="bd">
		<ul>
			<li style="display: none;">
				<a href="http://www.SuperSlide2.com" target="_blank">
					<img src="images/Chrysanthemum.jpg">
				</a>
			</li>
			<li style="display: none;">
				<a href="http://www.SuperSlide2.com" target="_blank">
					<img src="images/Desert.jpg">
				</a>
			</li>
			<li style="display: list-item; opacity: 0.9516;">
				<a href="http://www.SuperSlide2.com" target="_blank">
					<img src="images/Hydrangeas.jpg">
				</a>
			</li>
		</ul>
	</div>
	<a class="prev" href="javascript:void(0)"></a>
	<a class="next" href="javascript:void(0)"></a>
</div>
<script type="text/javascript">
<!--
	
		 var ary = location.href.split("&");
		jQuery(".slideBox").slide({mainCell:".bd ul",autoPlay:true,easing:"easeOutCirc"});
		//jQuery(".slideBox").slide( { mainCell:".bd ul", effect:ary[1],autoPlay:ary[2],trigger:ary[3],easing:ary[4],delayTime:ary[5],mouseOverStop:ary[6],pnLoop:ary[7] })
//-->
</script>
 </body>
</html>

工具类：

http://download.csdn.net/my

我这只是两个简单的demo，参数及更多的案例可以查看：http://www.superslide2.com/demo.html