CSS水平滚动溢出与jQuery滑块 [英] CSS horizontal scrolling overflow with jQuery slider
问题描述
我想设置一个全屏的jQuery滑块。我已经把项目分成两个步骤1）css和2）js。
1）CSS
< html xmlns =http：// www .w3.org / 1999 / xhtmlxml：lang =enlang =en>
< head>
< style type =text / css>
/ * Positioning * /
#container {width：2500px; }
.block {display：inline; }
/ *样式* /
.block img {padding：5px; }
< / style>
< / head>
< body>
< div id =container>
< div class =block>< img src =http://i42.tinypic.com/1zp2poz.gif>< / div>
< div class =block>< img src =http://i42.tinypic.com/1zp2poz.gif>< / div>
< div class =block>< img src =http://i42.tinypic.com/1zp2poz.gif>< / div>
< / div>
< / body>
< / html>
2）Javascript ，使用jquery如果可能，请点击 jQuery Coda Slider 。
看看那个东西：
< a href =http://apirocks.com/html5/html5.html =nofollow noreferrer> http://apirocks.com/html5/html5.html
（使用Chrome测试）
I'm trying to setup a full screen jquery slider. I've broken the project into two steps 1) css and 2) js.
1) CSS, below is a picture of what I'm shooting for (no fixed height) and below that is the code I have so far that doesn't work.
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<style type="text/css">
/* Positioning */
#container { width: 2500px; }
.block { display: inline; }
/* Styling */
.block img { padding: 5px; }
</style>
</head>
<body>
<div id="container">
<div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
<div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
<div class="block"><img src="http://i42.tinypic.com/1zp2poz.gif"></div>
</div>
</body>
</html>
2) Javascript, using jquery I'd like the divs to slide left when clicked on them... like the jQuery Coda Slider if possible.
Thanks, any help is appreciated.
Look that thing: http://apirocks.com/html5/html5.html (Test with Chrome)
这篇关于CSS水平滚动溢出与jQuery滑块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
