jquery宽屏图片滑动切换滚动特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery宽屏图片滑动切换滚动特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery宽屏图片滑动切换代码</title>
<link rel="stylesheet" href="css/style.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/slides.jquery.js"></script>
</head>

<body>
<div id="slides" class="visual">
  <ul class="slides_container">
    <li> <img src="images/tpack.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/btn_tpack.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
    <li> <img src="images/vpack.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/btn_vpack.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
    <li> <img src="images/visual1.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/slideMore1.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
    <li> <img src="images/visual2.jpg"  alt="" class="imgVis" width="1880"/> <a href="#" ><img src="images/slideMore2.gif"  alt="#"/></a>
      <p class="leftBg"></p>
      <p class="rightBg"></p>
    </li>
  </ul>
  <div class="slideControl">
    <p class="slide_rBt"><a href="#" class="next"></a></p>
    <ul class="pagination">
      <li> <a href="#" rel="0"> <strong>01</strong> <span>대나무 숯<br/>
        코 & T존 팩</span> </a> </li>
      <li> <a href="#" rel="1"> <strong>02</strong> <span>숨쉬는<br/>
        야채팩</span> </a> </li>
      <li> <a href="#" rel="2"> <strong>03</strong> <span>슈퍼아쿠아맥스<br/>
        수분 크림</span> </a> </li>
      <li> <a href="#" rel="3"> <strong>04</strong> <span>캘리포니아<br/>
        알로에 선블럭</span> </a> </li>
    </ul>
    <p class="slide_lBt"><a href="#" class="prev"></a></p>
  </div>
</div>
<script type="text/javascript">
$(function(){
	$('#slides').slides({
		container: 'slides_container',
		preload: true,
		play: 4000,
		pause: 1500,
		hoverPause: true,
		effect: 'slide',
		slideSpeed: 850
	});
});
</script>
</body>
</html>

JS代码(slides.jquery.js):

/** Slides,A Slideshow Plugin for jQuery* Intructions:http://slidesjs.com* By:Nathan Searles,http://nathansearles.com* Version:1.0* Updated:November 21st,2010** Licensed under the Apache License,Version 2.0 (the "License");
	* you may not use this file except in compliance with the License.* You may obtain a copy of the License at** http://www.apache.org/licenses/LICENSE-2.0** Unless required by applicable law or agreed to in writing,software* distributed under the License is distributed on an "AS IS" BASIS,* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND,either express or implied.* See the License for the specific language governing permissions and* limitations under the License.*/
(function($){
	$.fn.slides = function( option ){
	// override defaults with specified optionoption = $.extend({
}
,$.fn.slides.option,option );
	return this.each(function(){
	// wrap slides in control container,make sure slides are block level$('.' + option.container,$(this)).children().wrapAll('<div class="slides_control"/>').children().css({
	display:'block'}
);
	var elem = $(this),control = $('.slides_control',elem),total = control.children().size(),width = control.children().outerWidth(),height = control.children().outerHeight(),start = option.start - 1,effect = option.effect.indexOf(',') < 0 ? option.effect:option.effect.replace(' ','').split(',')[0],paginationEffect = option.effect.indexOf(',') < 0 ? effect:option.effect.replace(' ','').split(',')[1],next = 0,prev = 0,number = 0,current = 0,loaded,active,clicked,position,direction;
	// 2 or more slides requiredif (total < 2){
	return;
}
// change current based on start option numberif (option.start){
	current = start;
}
;
	// randomizes slide orderif (option.randomize){
	control.randomize();
}
// set width based on slide widthelem.css({
	width:width}
);
	$(this).find('li').css({
	width:'100%'}
);
	// make sure overflow is hidden$('.' + option.container,elem).css({
	overflow:'hidden',// fix for ieposition:'relative'}
);
	control.css({
	position:'relative',// size of control 3 x slide widthwidth:('100%' * 3),// set height to slide heightheight:height,// center control to slideleft:'-100%'}
);
	// set css for slidescontrol.children().css({
	position:'absolute',top:0,left:'100%',zIndex:0,display:'none'}
);
	// if autoHeight true,get and set height of first slideif (option.autoHeight){
	control.animate({
	height:control.children(':eq('+ start +')').outerHeight()}
,o.autoHeightSpeed);
}
// checks if image is loadedif (option.preload && control.children()[0].tagName=='IMG'){
	// adds preload imageelem.css({
	background:'url(' + option.preloadImage + ') no-repeat 50% 50%'}
);
	// gets image src,with cache bustervar img = $('img:eq(' + start + ')',elem).attr('src') + '?' + (new Date()).getTime();
	// checks if image is loaded$('img:eq(' + start + ')',elem).attr('src',img).load(function(){
	// once image is fully loaded,fade in$(this).fadeIn(option.fadeSpeed,function(){
	$(this).css({
	zIndex:5}
);
	// removes preload imageelem.css({
	background:''}
);
	// let the script know everything is loadedloaded = true;
}
);
}
);
}
else{
	// if no preloader fade in start slidecontrol.find(':eq(' + start + ')').fadeIn(option.fadeSpeed,function(){
	// let the script know everything is loadedloaded = true;
}
);
}
// click slide for nextif (option.bigTarget){
	// set cursor to pointercontrol.children().css({
	cursor:'pointer'}
);
	// click handlercontrol.children().click(function(){
	// animate to next on slide clickanimate('next',effect);
	return false;
}
);
}
// pause on mouseoverif (option.hoverPause && option.play){
	control.children().bind('mouseover',function(){
	// on mouse over stopstop();
}
);
	control.children().bind('mouseleave',function(){
	// on mouse leave start pause timeoutpause();
}
);
}
// next button$('.' + option.next,elem).click(function(e){
	e.preventDefault();
	if (option.play){
	pause();
}
;
	animate('next',effect);
}
);
	// previous button$('.' + option.prev,elem).click(function(e){
	e.preventDefault();
	if (option.play){
	pause();
}
;
	animate('prev',effect);
}
);
	// pause button$('.pause').bind('click',function(){
	// on click stopstop();
}
);
	// generate pagination/* if (option.generatePagination){
	// create unordered listelem.append('<ul class='+ option.paginationClass +'></ul>');
	// for each slide create a list item and linkcontrol.children().each(function(){
	$('.' + option.paginationClass,elem).append('<li><a rel='+ number +' href="#">'+ (number+1) +'</a></li>');
	number++;
}
);
}
*/
// add current class to start slide pagination$('.' + option.paginationClass + ' li a:eq('+ start +')',elem).parent().addClass('current');
	// click handling$('.' + option.paginationClass + ' li a',elem ).click(function(){
	// pause slideshowif (option.play){
	pause();
}
;
	// get clicked,pass to animate functionclicked = $(this).attr('rel');
	// if current slide equals clicked,don't do anythingif (current != clicked){
	animate('pagination',paginationEffect,clicked);
}
return false;
}
);
	if (option.play){
	// set intervalplayInterval = setInterval(function(){
	animate('next',effect);
}
,option.play);
	// store interval idelem.data('interval',playInterval);
}
;
	function stop(){
	// clear interval from stored idclearInterval(elem.data('interval'));
}
;
	function pause(){
	if (option.pause){
	// clear timeout and intervalclearTimeout(elem.data('pause'));
	clearInterval(elem.data('interval'));
	// pause slide show for option.pause amountpauseTimeout = setTimeout(function(){
	// clear pause timeoutclearTimeout(elem.data('pause'));
	// start play interval after pauseplayInterval = setInterval(function(){
	animate("next",effect);
}
,option.play);
	// store play intervalelem.data('interval',playInterval);
}
,option.pause);
	// store pause intervalelem.data('pause',pauseTimeout);
}
else{
	// if no pause,just stopstop();
}
}
;
	// animate slidesfunction animate(direction,effect,clicked){
	width = control.children().outerWidth();
	if (!active && loaded){
	active = true;
	switch(direction){
	case 'next':// change current slide to previousprev = current;
	// get next from current + 1next = current + 1;
	// if last slide,set next to first slidenext = total === next ? 0:next;
	// set position of next slide to right of previousposition = width*2;
	// distance to slide based on width of slidesdirection = -width*2;
	// store new current slidecurrent = next;
	break;
	case 'prev':// change current slide to previousprev = current;
	// get next from current - 1next = current - 1;
	// if first slide,set next to last slidenext = next === -1 ? total-1:next;
	// set position of next slide to left of previousposition = 0;
	// distance to slide based on width of slidesdirection = 0;
	// store new current slidecurrent = next;
	break;
	case 'pagination':// get next from pagination item clicked,convert to numbernext = parseInt(clicked,10);
	// get previous from pagination item with class of currentprev = $('.' + option.paginationClass + ' li.current a',elem).attr('rel');
	// if next is greater then previous set position of next slide to right of previousif (next > prev){
	position = width*2;
	direction = -width*2;
}
else{
	// if next is less then previous set position of next slide to left of previousposition = 0;
	direction = 0;
}
// store new current slidecurrent = next;
	break;
}
// fade animationif (effect === 'fade'){
	// fade animation with crossfadeif (option.crossfade){
	// put hidden next above currentcontrol.children(':eq('+ next +')',elem).css({
	zIndex:10// fade in next}
).fadeIn(option.fadeSpeed,function(){
	// hide previouscontrol.children(':eq('+ prev +')',elem).css({
	display:'none',zIndex:0}
);
	// reset z index$(this).css({
	zIndex:0}
);
	// end of animationactive = false;
}
);
}
else{
	// fade animation with no crossfadecontrol.children(':eq('+ prev +')',elem).fadeOut(option.fadeSpeed,function(){
	// animate to new heightif (option.autoHeight){
	control.animate({
	// animate container to height of nextheight:control.children(':eq('+ next +')',elem).outerHeight()}
,option.autoHeightSpeed,// fade in next slidefunction(){
	control.children(':eq('+ next +')',elem).fadeIn(elem.data('slides').fadeSpeed);
}
);
}
else{
	// if fixed heightcontrol.children(':eq('+ next +')',elem).fadeIn(option.fadeSpeed,function(){
	// fix font rendering in ie,lameif($.browser.msie){
	$(this).get(0).style.removeAttribute('filter');
}
}
);
}
// end of animationactive = false;
}
);
}
// slide animation}
else{
	// move next slide to right of previouscontrol.children(':eq('+ next +')').css({
	left:position,display:'block'}
);
	// animate to new heightif (option.autoHeight){
	control.animate({
	left:direction,height:control.children(':eq('+ next +')').outerHeight()}
,option.slideSpeed,function(){
	control.css({
	left:'-100%'}
);
	control.children(':eq('+ next +')').css({
	left:'100%',zIndex:5}
);
	// reset previous slidecontrol.children(':eq('+ prev +')').css({
	left:'100%',display:'none',zIndex:0}
);
	// end of animationactive = false;
}
);
	// if fixed height}
else{
	// animate controlcontrol.animate({
	left:direction}
,option.slideSpeed,function(){
	// after animation reset control positioncontrol.css({
	left:'-100%'}
);
	// reset and show nextcontrol.children(':eq('+ next +')').css({
	left:'100%',zIndex:5}
);
	// reset previous slidecontrol.children(':eq('+ prev +')').css({
	left:'100%',display:'none',zIndex:0}
);
	// end of animationactive = false;
}
);
}
}
// set current state for paginationif (option.pagination){
	// remove current class from all$('.'+ option.paginationClass +' li.current',elem).removeClass('current');
	// add current class to next$('.'+ option.paginationClass +' li a:eq('+ next +')',elem).parent().addClass('current');
}
}
}
;
	// end animate function}
);
}
;
	// default options$.fn.slides.option ={
	preload:true,// boolean,Set true to preload images in an image based slideshowpreloadImage:'/img/loading.gif',// string,Name and location of loading image for preloader. Default is "/img/loading.gif"container:'slides_container',// string,Class name for slides container. Default is "slides_container"next:'next',// string,Class name for next buttonprev:'prev',// string,Class name for previous buttonpagination:true,// boolean,If you're not using pagination you can set to false,but don't have togeneratePagination:true,// boolean,Auto generate paginationpaginationClass:'pagination',// string,Class name for paginationfadeSpeed:850,// number,Set the speed of the fading animation in millisecondsslideSpeed:850,// number,Set the speed of the sliding animation in millisecondsstart:1,// number,Set the speed of the sliding animation in millisecondseffect:'slide',// string,'[next/prev],[pagination]',e.g. 'slide,fade' or simply 'fade' for bothcrossfade:false,// boolean,Crossfade images in a image based slideshowrandomize:false,// boolean,Set to true to randomize slidesplay:0,// number,Autoplay slideshow,a positive number will set to true and be the time between slide animation in millisecondspause:0,// number,Pause slideshow on click of next/prev or pagination. A positive number will set to true and be the time of pause in millisecondshoverPause:false,// boolean,Set to true and hovering over slideshow will pause itautoHeight:false,// boolean,Set to true to auto adjust heightautoHeightSpeed:350,// number,Set auto height animation time in millisecondsbigTarget:false // boolean,Set to true and the whole slide will link to next slide on click}
;
	// Randomize slide order on load$.fn.randomize = function(callback){
	function randomizeOrder(){
	return(Math.round(Math.random())-0.5);
}
return($(this).each(function(){
	var $this = $(this);
	var $children = $this.children();
	var childCount = $children.length;
	if (childCount > 1){
	$children.hide();
	var indices = [];
	for (i=0;
	i<childCount;
	i++){
	indices[indices.length] = i;
}
indices = indices.sort(randomizeOrder);
	$.each(indices,function(j,k){
	var $child = $children.eq(k);
	var $clone = $child.clone(true);
	$clone.show().appendTo($this);
	if (callback !== undefined){
	callback($child,$clone);
}
$child.remove();
}
);
}
}
));
}
;
}
)(jQuery);

CSS代码(style.css):

@charset "utf-8";/* CSS Document */
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial,Helvetica,sans-serif,"新宋体";}
/*banner*/
div.visual{width:100%!important;height:545px;background:url("../images/navi_bg.gif") 0 0 repeat;position:relative;min-width:978px;margin-top:-4px;}
div.visual ul.slides_container{width:100% !important;height:481px;display:inline-block;position:relative;}
div.visual ul.slides_container li{text-align:center;width:100% !important;position:relative;height:481px;overflow:hidden;background:#fff;}
div.visual ul.slides_container li p.mov a{position:relative;z-index:9999999;left:-240px;top:200px;}
div.visual ul.slides_container li a{position:absolute;left:50%;top:370px;margin:0 0 0 88px;}
img.imgVis{position:absolute;left:50%;top:0;margin-left:-940px;}
div.slideControl{width:978px;height:63px;margin:0 auto;overflow:hidden;position:relative;}
div.slideControl ul.pagination{width:836px;height:63px;margin:0 auto;overflow:hidden;}
div.slideControl ul.pagination li{width:209px !important;float:left;padding:11px 0 0 0;}
div.slideControl ul.pagination li a{width:209px;height:41px;display:inline-block;background:url("../images/slideOff3.gif") 0 0 no-repeat;text-decoration:none;}
div.slideControl ul.pagination li a:hover,div.slideControl ul.pagination li.current a{background:url("../images/slideOn3.gif") 0 0 no-repeat;}
div.slideControl ul.pagination li a strong{float:left;height:46px;width:68px;font-size:28px;text-align:center;padding:4px 0 0 0;color:#FFF;}
div.slideControl ul.pagination li a span{float:left;height:38px;width:116px;padding:8px 0 0 0;color:#FFF;line-height:14px;}
div.slideControl ul.pagination li a:hover strong,div.slideControl ul.pagination li a:hover span,div.slideControl ul.pagination li.current a strong,div.slideControl ul.pagination li.current a span{color:#947d5c;}
div.slideControl p.slide_lBt{position:absolute;left:10px;top:10px;}
div.slideControl p.slide_lBt a{display:inline-block;width:45px;height:45px;background:url("../images/leftBt3_off.gif") 0 0 no-repeat;}
div.slideControl p.slide_lBt a:hover{background:url("../images/leftBt3_on.gif") 0 0 no-repeat;}
div.slideControl p.slide_rBt{position:absolute;right:10px;top:10px;}
div.slideControl p.slide_rBt a{display:inline-block;width:45px;height:45px;background:url("../images/rightBt3_off.gif") 0 0 no-repeat;}
div.slideControl p.slide_rBt a:hover{background:url("../images/rightBt3_on.gif") 0 0 no-repeat;}
p.leftBg{position:absolute;left:50%;top:0;width:600px;height:582px;margin-left:-1245px;background:url("../images/BG_visualWallL.png") no-repeat left top;z-index:9999999;}
p.rightBg{position:absolute;right:50%;top:0;width:600px;height:582px;margin-right:-1245px;background:url("../images/BG_visualWallR.png") no-repeat right top;z-index:9999999;}

附件:下载该文件资源,减少时间成本(增值服务)