利用jquery实现向外推出幻灯片效果



44 174 59



特效描述:利用jquery实现 向外推出 幻灯片效果,利用jquery实现向外推出幻灯片效果 

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/mainstyle.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen" />

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/wowslider.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<div class="container" >
<br>
<div class="ruled1">
<div id="wowslider-container1">
<div class="ws_images"><ul>
<li><a href="#"><img src="images/autumn_leaves.jpg" alt="Autumn Leaves : Banner Slider" title="Autumn Leaves" id="wows0"/></a></li>
<li><a href="#"><img src="images/creek.jpg" alt="Creek : Joomla Banner Slider" title="Creek" id="wows1"/></a></li>
<li><a href="#"><img src="images/desert_landscape.jpg" alt="Desert Landscape : Flash Banner Slider" title="Desert Landscape" id="wows2"/></a></li>
<li><a href="#"><img src="images/dock.jpg" alt="Dock : Banner Slider Script" title="Dock" id="wows3"/></a></li>
<li><a href="#"><img src="images/forest.jpg" alt="Forest : jQuery Banner Rotator" title="Forest" id="wows4"/></a></li>
<li><a href="#"><img src="images/forest_flowers.jpg" alt="Forest Flowers : jQuery Image Banner" title="Forest Flowers" id="wows5"/></a></li>
<li><a href="#"><img src="images/frangipani_flowers.jpg" alt="Frangipani Flowers : jQuery Sliding Banner" title="Frangipani Flowers" id="wows6"/></a></li>
<li><a href="#"><img src="images/garden.jpg" alt="Garden : jQuery Banner Rotator Download" title="Garden" id="wows7"/></a></li>
<li><a href="#"><img src="images/green_sea_turtle.jpg" alt="Green Sea Turtle : jQuery Scrolling Banner" title="Green Sea Turtle" id="wows8"/></a></li>
<li><a href="#"><img src="images/humpback_whale.jpg" alt="Humpback Whale : jQuery Banner Effects" title="Humpback Whale" id="wows9"/></a></li>
</ul></div>
<div class="ws_bullets"><div>
<a href="#" title="Autumn Leaves"><img src="images/x/autumn_leaves.jpg" alt="autumn_leaves"/>jQuery Banner Rotator Fade</a>
<a href="#" title="Creek"><img src="images/x/creek.jpg" alt="creek : Sliding Banner jQuery"/>Sliding Banner jQuery</a>
<a href="#" title="Desert Landscape"><img src="images/x/desert_landscape.jpg" alt="desert_landscape : jQuery Floating Banner"/>jQuery Banner Fade</a>
<a href="#" title="Dock"><img src="images/x/dock.jpg" alt="dock jQuery Rotate Banner"/>jQuery Banner Effects</a>
<a href="#" title="Forest"><img src="images/x/forest.jpg" alt="forest : jQuery Scrolling Banner"/>jQuery Banner Rotator Download</a>
<a href="#" title="Forest Flowers"><img src="images/x/forest_flowers.jpg" alt="forest_flowers : jQuery Sliding Banner"/>jQuery Image Banner</a>
<a href="#" title="Frangipani Flowers"><img src="images/x/frangipani_flowers.jpg" alt="frangipani_flowers : Banner Rotator jQuery"/>jQuery Banner Animation</a>
<a href="#" title="Garden"><img src="images/x/garden.jpg" alt="garden : jQuery Rotating Banner"/>jQuery Banner Rotator</a>
<a href="#" title="Green Sea Turtle"><img src="images/x/green_sea_turtle.jpg" alt="green_sea_turtle"/>Flash Banner Slider</a>
<a href="#" title="Humpback Whale"><img src="images/x/humpback_whale.jpg" alt="humpback_whale : Joomla Banner Slider"/>Banner Slider</a>
</div></div>
<div class="ws_shadow"></div>
</div>
</div>
<div style="text-align:center;clear:both">
</div>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滑动滑过 flash焦点图 渐隐切换 淡出淡入淡进 切换按钮 form表单 焦点图幻灯片 图片淡出淡进 带标题的焦点图 图片滑动 按钮控制

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到