index7.html

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>多图左右滚动-jQuery全能滚动插件：power-slider演示-前端博客</title>
	<link type="image/x-icon" href="https://qdkfweb.cn/favicon.ico" rel="icon">
  	<link type="image/x-icon" href="https://qdkfweb.cn/favicon.ico" rel="shortcut icon">
  	<link rel="stylesheet" href="reset.css"/>
    <meta name="keywords" content="前端博客,代码演示" />
  	<meta name="description" content="多图左右滚动jquery插件，前端博客代码演示，caibaojian.com，前端代码范例，演示代码" />
	<style type="text/css">
body{text-align: left;width:696px; margin:0 auto;}
.demolist{font-size: 0; *word-spacing: -1px;}
.demolist li{display: inline-block; font-size:14px; border:1px solid #eee; padding:10px; margin-right:10px; *display:inline; *zoom:1; word-spacing: normal; letter-spacing: normal; vertical-align: top;}
.active{background:#eee;}
.hidden{display: none;}
.menu{width:100%; background:#ECECEC; position:fixed; _position:absolute; top:0; left:0; z-index:3;}
.menu ul{width:600px; margin:0 auto;}
.menu ul li{float:left; margin-right:10px; padding:2px 6px;}
.menu ul li.active{background: #fff;}
.menu ul li a{line-height:32px; padding:0 4px;}
.code{padding:10px 0;}
.code h3 span{border:1px solid #ddd; margin-left:-1px; padding:10px;display:inline-block; cursor:pointer;}
pre{background:#eee; padding:10px;}
.slider{height:174px; margin:20px auto; overflow:hidden; position:relative;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
.slidernav{position:absolute; right:0; bottom:0; width:100%; background: rgba(0,0,0,0.5); color:#fff; font-size:0; *word-spacing: -1px;}
.slidernav li{display: inline-block; *display: inline; *zoom:1; vertical-align: top; font-size:14px; margin-left: 10px; letter-spacing: normal; word-spacing: normal;}
.slidernav li a{width:16px; padding:2px 4px; height:12px; background:#fff; color:#000; text-align:center;}
.slidernav li.current a{background:#3B8DD1; color:#fff;}
@media screen and (-webkit-min-device-antio:0){
.slidernav{letter-spacing: -5px;}
}
.slider .prev, .slider .next{position: absolute; top:50%; margin-top:-30px; cursor: pointer; width:61px; height:61px; left:0; background: url(images/ft_icons.png) 0 0 no-repeat; text-indent:-9999px;}
.slider .next{right:0; left:auto; background-position: 0 -61px;}
	</style>
</head>
<body>
	<div class="main">
		<div class="path">你的位置：<span xmlns:v="http://rdf.data-vocabulary.org/#">
        <span typeof="v:Breadcrumb"><a href="https://qdkfweb.cn" rel="v:url" property="v:title">前端博客</a></span>  &gt;
                <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="https://qdkfweb.cn/t/jquery插件">jquery插件</a></span> &gt; <span typeof="v:Breadcrumb"><span class="breadcrumb_last" property="v:title"><a href="https://qdkfweb.cn/power-slider">jQuery插件：万能滚动power-slider</a></span></span>
        </span></div>
        <div class="menu">
	        <ul class="fix">
	        	<li>
					<div><a href="https://qdkfweb.cn" target="_blank">前端博客</a></div>
				</li>
				<li>
					<div><a href="https://qdkfweb.cn/power-slider" target="_blank">power-slider插件主页</a></div>
				</li>
	        	<li>
					<div><a href="index.html">单张图片滚动</a></div>
				</li>
				<li class="active">
					<div><a href="index6.html">多张图片滚动</a></div>
				</li>
				<li>
					<div><a href="index11.html">文字滚动</a></div>
				</li>
				<li>
					<div><a href="index13.html">内容滚动</a></div>
				</li>
	        </ul>
	    </div>
		<div class="content">
			<div class="slider" id="img">
				<ul class="sliderbox">
					<li class="first">
						
						<a href=""><img src="images/ban1.gif" alt="HTML代码"/></a>
					</li>
					<li>
						
						<a href=""><img src="images/ban2.gif" alt="css代码"/></a>
					</li>
					<li>
						
						<a href=""><img src="images/ban3.gif" alt="HTML代码"/></a>
					</li>
					<li>
						
						<a href=""><img src="images/ban4.gif" alt="HTML代码"/></a>
					</li>
					<li class="first">
						
						<a href=""><img src="images/ban5.gif" alt="HTML代码"/></a>
					</li>
					<li>
						
						<a href=""><img src="images/ban5.gif" alt="HTML代码"/></a>
					</li>
					<li>
						
						<a href=""><img src="images/ban5.gif" alt="HTML代码"/></a>
					</li>
					<li>
						
						<a href=""><img src="images/ban4.gif" alt="HTML代码"/></a>
					</li>
				</ul>
				<ul class="slidertext"></ul>
				<ul class="slidernav"></ul>
				<div class="prev">&lt;</div>
				<div class="next">&gt;</div>
			</div>
		</div>
	</div>
	<ul class="demolist">
		<li>
			<div><a href="index6.html">多图上下滚动</a></div>
		</li>
		<li class="active">
			<div><a href="index7.html">多图左右滚动</a></div>
		</li>
		<li>
			<div><a href="index8.html">多图消失与出现</a></div>
		</li>
		<li>
			<div><a href="index9.html">多图渐隐渐现</a></div>
		</li>
		<li>
			<div><a href="index10.html">多图滑上滑下</a></div>
		</li>
	</ul>
	<div class="code">
		<h3><span class="active">HTML代码</span><span>CSS代码</span><span>JS代码</span></h3>
		<pre>&lt;div class=&quot;slider&quot; id=&quot;img&quot;&gt;&lt;ul class=&quot;sliderbox&quot;&gt;
&lt;li class=&quot;first&quot;&gt;&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban1.gif&quot; alt=&quot;HTML代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban2.gif&quot; alt=&quot;css代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban3.gif&quot; alt=&quot;HTML代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban4.gif&quot; alt=&quot;HTML代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li class=&quot;first&quot;&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban5.gif&quot; alt=&quot;HTML代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban5.gif&quot; alt=&quot;HTML代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban5.gif&quot; alt=&quot;HTML代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;li&gt;
&lt;a href=&quot;&quot;&gt;&lt;img src=&quot;images/ban4.gif&quot; alt=&quot;HTML代码&quot;/&gt;&lt;/a&gt;
&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class=&quot;slidernav&quot;&gt;&lt;/ul&gt; /*显示数字导航，非必须*/
&lt;div class=&quot;prev&quot;&gt;&amp;lt;&lt;/div&gt; /*显示上一页，非必须*/
&lt;div class=&quot;next&quot;&gt;&amp;gt;&lt;/div&gt; /*显示下一页，非必须*/
&lt;/div&gt;</pre>
<pre class="hidden">.slider{height:174px; margin:20px auto; overflow:hidden; position:relative;}
.sliderbox{position:relative;}/*必须加这句css,否则向左右，上下滚动时会没有效果*/
.slidernav{position:absolute; right:0; bottom:0; width:100%; background: rgba(0,0,0,0.5); color:#fff; font-size:0; *word-spacing: -1px;}
.slidernav li{display: inline-block; *display: inline; *zoom:1; vertical-align: top; font-size:14px; margin-left: 10px; letter-spacing: normal; word-spacing: normal;}
.slidernav li a{width:16px; padding:2px 4px; height:12px; background:#fff; color:#000; text-align:center;}
.slidernav li.current a{background:#3B8DD1; color:#fff;}
@media screen and (-webkit-min-device-antio:0){
.slidernav{letter-spacing: -5px;}
}
.slider .prev, .slider .next{position: absolute; top:50%; margin-top:-30px; cursor: pointer; width:61px; height:61px; left:0; background: url(images/ft_icons.png) 0 0 no-repeat; text-indent:-9999px;}
.slider .next{right:0; left:auto; background-position: 0 -61px;}
</pre>
<pre class="hidden">$("#img").powerSlider({handle:"left",sliderNum:4});
</pre>
	</div>
    <h1><a href="https://qdkfweb.cn/power-slider">返回全能插件的详细介绍</a></h1>
    <script type="text/javascript" src="images/jquery-1.9.1.min.js"></script>
	<script type="text/javascript" src="power-slider.js"></script>
    <script type="text/javascript">
    $(function(){  
        $("#img").powerSlider({handle:"left",sliderNum:4});
        //$("#text").powerSlider();
        //$("#img").powerSlider({picNum:4,handle:"hide"});
        $(".code h3 span").each(function(i){
        	$(this).click(function(){
        		$(this).addClass("active").siblings().removeClass("active");
        		$(".code pre").eq(i).show().siblings("pre").hide();
        	})
        })
    });
</script>
<script type="text/javascript" src="https://qdkfweb.cn/demo/base.js" charset="UTF-8"></script>
</body>
</html>