需要标题滑块的示例 [英] Need example of header slider
问题描述
你好
你能不能提供标题滑块的例子。我在互联网上找到了tinycarousel。
但我面临一个问题
1）我必须一次显示2或3张图像（不是一张）。用户可以在点击任何图像时滑动标题
2）将打开一个下拉列表（显示）。你能给我一些例子吗？
// **************** *************的index.html **********************************
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // ENhttp://www.w3.org/TR/xhtml1/DTD/xhtml1-strict。 dtd>
< html xmlns =http://www.w3.org/1999/xhtmllang =enxml：lang =en>
< head>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/ >
< title> Tiny Carousel：一个轻量级的jQuery插件< / title>
< link rel =stylesheethref =css / website.css type =text / cssmedia =screen/>
< script type =text / javascriptsrc =https：// ajax。 googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js\"></script>
< script type =text / javascriptsrc =js / jquery.tinycarousel.min.js>< / script>
< script type =text / javascript>
$（document）.ready（ functi on（）{
$（''＃slider1''）。tinycarousel（）;
}）;
功能测试（）
{
alert（*****） ;
var mySelect = document.getElementById（''mySelect''），
newOption = document.createElement（''option''）;
newOption.value =''bmw'';
//并非所有浏览器都支持textContent（符合W3C标准）
//可用时，textContent更快（参见http://stackoverflow.com/a/1359822/139010）
mySelect.appendChild（newOption）;
}
< / script>
< / head>
< body>
< div id =slider1> ;
< a class =按钮prevhref =＃> left< / a>
< div class =viewport>
< ul class =overview>
< li>< img src =images / picture6.jpgonclick =test（）/>
< select id =mySelect>
<！ - option value =volvo> Volvo< / option>
< option value =saab> Saab< / option>
< option value =mercedes> Mercedes< / option>
< option value =audi> Audi< / option - >
< / select>
< / li>
< li>< img src =images / picture5.jpg/>< / li>
< li>< img src =images / picture4.jpg/> ;< /锂>
< li>< img src =images / picture3.jpg/>< / li>
< li>< img src = images / picture2.jpg/>< / li>
< li>< img src =images / picture1.jpg/>< / li>
< / ul>
< / div>
< a class =按钮nexthref =＃> right< / a> ;
< / div>
< / body>
< / html>
************************** css * ****************************
/ * Tiny Carousel * /
＃slider1 {height：1％;溢出：隐藏;填充：0 0 10px; }
＃slider1 .viewport {float：left;宽度：600px;身高：125px;溢出：隐藏;位置：相对; }
＃slider1 .buttons {background：url（../ images / buttons.png）no-repeat scroll 0 0 transparent;显示：块;保证金：30px 10px 0 0; background-position：0 -38px; text-indent：-999em;向左飘浮;宽度：39px;身高：37px;溢出：隐藏;位置：相对; }
＃slider1 .next {background-position：0 0;保证金：30px 0 0 10px; }
＃slider1 .disable {visibility：hidden; }
＃slider1 .overview {list-style：none;位置：绝对;填充：0;保证金：0;宽度：240px;左：0顶：0; }
＃slider1 .overview li {float：left;保证金：0 20px 0 0;填充：1px;身高：121px; border：1px solid #dcdcdc;宽度：236像素;}
***************************** ********** js ****************************** *
（函数（）{a.tiny = a.tiny || {}; a.tiny.carousel = {选项：{开始：1，显示：1，轴： X，控制：真，寻呼机：假的，间隔：假，intervaltime：3000，倒带：假，动画：真，持续时间：1000，回调：空}}; a.fn.tinycarousel_start =函数（）{A（本）。数据（ TCL）开始（）。 }; a.fn.tinycarousel_stop =函数（）{A（本）。数据（ TCL）停止（）}; a.fn.tinycarousel_move =函数（c）中{A（本）。数据（ TCL ）.move（c-1，true）}; function b（q，e）{var i = this，h = a（。viewport：first，q），g = a（。overview：first， q）中，k = g.children（）中，f = A（ 下一个：第一，q），d = A（ 分组：第一，q），L = A（ 寻呼机：第一， q），w = 0，u = 0，p = 0，j =未定义，o =假，n =真，s = e.axis ===x;函数m（）{if（e.controls） {d.toggleClass（ 禁用 中，p = 0）; f.toggleClass（！ 禁用，第（p + 1·; U））}如果（e.pager）{风险大于0 && f.length大于0）{d .click（function（）{i.move（-1）; return false}）; f.click（function（）{i.move（1）; return false}）} if（e.interval）{q.hover （i.stop，i.start）}如果（e.pag ER && l.length大于0）{A（ 一，升）。单击（V）}} = this.stop函数（）{clearTimeout（J）; O =真}; this.start =函数（）{O = false; t（）}; this.move = function（y，z）{p = z？y：p + = y; if（p> -1 && p
（document）.ready（function（）{
（''＃slider1''）。tinycarousel（）;
}）;
功能测试（）
{
alert（*****） ;
var mySelect = document.getElementById（''mySelect''），
newOption = document.createElement（''option''）;
newOption.value =''bmw'';
//并非所有浏览器都支持textContent（符合W3C标准）
//可用时，textContent更快（参见http://stackoverflow.com/a/1359822/139010）
mySelect.appendChild（newOption）;
}
< / script>
< / head>
< body>
< div id =slider1> ;
< a class =按钮prevhref =＃> left< / a>
< div class =viewport>
< ul class =overview>
< li>< img src =images / picture6.jpgonclick =test（）/>
< select id =mySelect>
<！ - option value =volvo> Volvo< / option>
< option value =saab> Saab< / option>
< option value =mercedes> Mercedes< / option>
< option value =audi> Audi< / option - >
< / select>
< / li>
< li>< img src =images / picture5.jpg/>< / li>
< li>< img src =images / picture4.jpg/> ;< /锂>
< li>< img src =images / picture3.jpg/>< / li>
< li>< img src = images / picture2.jpg/>< / li>
< li>< img src =images / picture1.jpg/>< / li>
< / ul>
< / div>
< a class =按钮nexthref =＃> right< / a> ;
< / div>
< / body>
< / html>
************************** css * ****************************
/ * Tiny Carousel * /
＃slider1 {height：1％;溢出：隐藏;填充：0 0 10px; }
＃slider1 .viewport {float：left;宽度：600px;身高：125px;溢出：隐藏;位置：相对; }
＃slider1 .buttons {background：url（../ images / buttons.png）no-repeat scroll 0 0 transparent;显示：块;保证金：30px 10px 0 0; background-position：0 -38px; text-indent：-999em;向左飘浮;宽度：39px;身高：37px;溢出：隐藏;位置：相对; }
＃slider1 .next {background-position：0 0;保证金：30px 0 0 10px; }
＃slider1 .disable {visibility：hidden; }
＃slider1 .overview {list-style：none;位置：绝对;填充：0;保证金：0;宽度：240px;左：0顶：0; }
＃slider1 .overview li {float：left;保证金：0 20px 0 0;填充：1px;身高：121px; border：1px solid #dcdcdc;宽度：236像素;}
***************************** ********** js ****************************** *
（函数（）{a.tiny = a.tiny || {}; a.tiny.carousel = {选项：{开始：1，显示：1，轴： X，控制：真，寻呼机：假的，间隔：假，intervaltime：3000，倒带：假，动画：真，持续时间：1000，回调：空}}; a.fn.tinycarousel_start =函数（）{A（本）。数据（ TCL）开始（）。 }; a.fn.tinycarousel_stop =函数（）{A（本）。数据（ TCL）停止（）}; a.fn.tinycarousel_move =函数（c）中{A（本）。数据（ TCL ）.move（c-1，true）}; function b（q，e）{var i = this，h = a（。viewport：first，q），g = a（。overview：first， q）中，k = g.children（）中，f = A（ 下一个：第一，q），d = A（ 分组：第一，q），L = A（ 寻呼机：第一， q），w = 0，u = 0，p = 0，j =未定义，o =假，n =真，s = e.axis ===x;函数m（）{if（e.controls） {d.toggleClass（ 禁用 中，p = 0）; f.toggleClass（！ 禁用，第（p + 1·; U））}如果（e.pager）{风险大于0 && f.length大于0）{d .click（function（）{i.move（-1）; return false}）; f.click（function（）{i.move（1）; return false}）} if（e.interval）{q.hover （i.stop，i.start）}如果（e.pag ER && l.length大于0）{A（ 一，升）。单击（V）}} = this.stop函数（）{clearTimeout（J）; O =真}; this.start =函数（）{O = ？假; T（）}; this.move =函数（Y，Z）{p = Z Y：p + = Y;如果（p -1个&& p
Hello
can you please provide some example of header slider .I found tinycarousel on internet .
But i am facing one problem
1) i have to show 2 or 3 image (Not one) at a time. user can slide the header
2)on clicking any image one dropdown will open(display) . can you please give me some example?
//*****************************Index.html**********************************
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Tiny Carousel: A lightweight jQuery plugin</title>
<link rel="stylesheet" href="css/website.css" type="text/css" media="screen"/>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.tinycarousel.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(''#slider1'').tinycarousel();
});
function test()
{
alert("*****");
var mySelect = document.getElementById(''mySelect''),
newOption = document.createElement(''option'');
newOption.value = ''bmw'';
// Not all browsers support textContent (W3C-compliant)
// When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010)
mySelect.appendChild(newOption);
}
</script>
</head>
<body>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" onclick="test()"/>
<select id="mySelect">
<!--option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option-->
</select>
</li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</body>
</html>
**************************css*****************************
/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px; }
#slider1 .viewport { float: left; width: 600px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
***************************************js******************************
(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var>0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p
(document).ready(function(){
(''#slider1'').tinycarousel();
});
function test()
{
alert("*****");
var mySelect = document.getElementById(''mySelect''),
newOption = document.createElement(''option'');
newOption.value = ''bmw'';
// Not all browsers support textContent (W3C-compliant)
// When available, textContent is faster (see http://stackoverflow.com/a/1359822/139010)
mySelect.appendChild(newOption);
}
</script>
</head>
<body>
<div id="slider1">
<a class="buttons prev" href="#">left</a>
<div class="viewport">
<ul class="overview">
<li><img src="images/picture6.jpg" onclick="test()"/>
<select id="mySelect">
<!--option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
<option value="audi">Audi</option-->
</select>
</li>
<li><img src="images/picture5.jpg" /></li>
<li><img src="images/picture4.jpg" /></li>
<li><img src="images/picture3.jpg" /></li>
<li><img src="images/picture2.jpg" /></li>
<li><img src="images/picture1.jpg" /></li>
</ul>
</div>
<a class="buttons next" href="#">right</a>
</div>
</body>
</html>
**************************css*****************************
/* Tiny Carousel */
#slider1 { height: 1%; overflow:hidden; padding: 0 0 10px; }
#slider1 .viewport { float: left; width: 600px; height: 125px; overflow: hidden; position: relative; }
#slider1 .buttons { background:url("../images/buttons.png") no-repeat scroll 0 0 transparent; display: block; margin: 30px 10px 0 0; background-position: 0 -38px; text-indent: -999em; float: left; width: 39px; height: 37px; overflow: hidden; position: relative; }
#slider1 .next { background-position: 0 0; margin: 30px 0 0 10px; }
#slider1 .disable { visibility: hidden; }
#slider1 .overview { list-style: none; position: absolute; padding: 0; margin: 0; width: 240px; left: 0 top: 0; }
#slider1 .overview li{ float: left; margin: 0 20px 0 0; padding: 1px; height: 121px; border: 1px solid #dcdcdc; width: 236px;}
***************************************js******************************
(function(a){a.tiny=a.tiny||{};a.tiny.carousel={options:{start:1,display:1,axis:"x",controls:true,pager:false,interval:false,intervaltime:3000,rewind:false,animation:true,duration:1000,callback:null}};a.fn.tinycarousel_start=function(){a(this).data("tcl").start()};a.fn.tinycarousel_stop=function(){a(this).data("tcl").stop()};a.fn.tinycarousel_move=function(c){a(this).data("tcl").move(c-1,true)};function b(q,e){var i=this,h=a(".viewport:first",q),g=a(".overview:first",q),k=g.children(),f=a(".next:first",q),d=a(".prev:first",q),l=a(".pager:first",q),w=0,u=0,p=0,j=undefined,o=false,n=true,s=e.axis==="x";function m(){if(e.controls){d.toggleClass("disable",p<=0);f.toggleClass("disable",!(p+1<u))}if(e.pager){var>0&&f.length>0){d.click(function(){i.move(-1);return false});f.click(function(){i.move(1);return false})}if(e.interval){q.hover(i.stop,i.start)}if(e.pager&&l.length>0){a("a",l).click(v)}}this.stop=function(){clearTimeout(j);o=true};this.start=function(){o=false;t()};this.move=function(y,z){p=z?y:p+=y;if(p>-1&&p
这篇关于需要标题滑块的示例的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
