jquery半屏图片文字左右切换焦点图 -JS/jQuery代码 -演示与下载 -时代Java

dualSlider options

auto:true,
autoDelay: 6000,
easingCarousel: "swing",
easingDetails: "easeOutBack",
durationCarousel: 1000,
durationDetails: 600

Changelog

0.2 - Tested and fixed for IE6+, auto loops, manual pause/play controls
0.3 - Now with seamless looping!

dualSlider demo

As you can see pretty much any html can go in the panels from your CMS, you just need to format them with CSS

A little bit of documentation

It's fairly simple to get this going, just copy and paste markup from this file if need be.

01. The easiest thing you can do is download the quick start pack and modify as you wish :)

02. If you don't want to do that then you can take the elements individually and build them into an existing site. Start by getting all of the dependant files that are listed up top, including dualSlider.

03. You will also need some CSS to get this going, or it won't work at all. To get started just copy it from jquery.dualSlider.0.3.css.

04. Now include all of these files in the <head> of your html document .

05. Once this is all done you need to get the markup onto the page, you can view the source of this document to get an idea of how that works, it can either be static or come out of a database, but thats up to you. If it's out of a database no worries, the paging is built dynamically by the plugin.

06. Initialise the plugin as per previously given, view source for an example.

07. and relax...

下载代码说明
X关闭

jquery半屏图片文字左右切换焦点图

此焦点图代码分左右两部分,左边部分为图片切换,右边部分则是文字左右滚动代码以及控制按钮,包括暂停开始按钮