走马灯

最新推荐文章于 2024-11-08 12:00:00 发布

一丢丢的幸福

最新推荐文章于 2024-11-08 12:00:00 发布

阅读量646

点赞数

CC 4.0 BY-SA版权

分类专栏： JAVASCRIPT

本文链接：https://blog.csdn.net/dly120219891208/article/details/39293685

JAVASCRIPT 专栏收录该内容

16 篇文章

订阅专栏

//插件
(function($){
	$.fn.Xslider = function(options){var settings ={
			affect: 'scrollx', //crollx|scrolly|fade|none
			speed: 1200, //动画速度
			space: 6000, //时间间隔
			auto: true, //自动滚动
			trigger: 'mouseover', //触发事件 注意用mouseover代替hover
			conbox: '.conbox', //内容容器
			ctag: 'a', //内容标签
			switcher: '.switcher', //切换触发器
			stag: 'a', //切换器标签
			current:'cur', //当前切换器样式名称
			rand:false //是否随机指定默认幻灯图片
		};
		settings = $.extend({}, settings, options);
		var index = 1;
		var last_index = 0;
		var $conbox = $(this).find(settings.conbox),$contents = $conbox.find(settings.ctag);
		var $switcher = $(this).find(settings.switcher),$stag = $switcher.find(settings.stag);
		if(settings.rand) {index = Math.floor(Math.random()*$contents.length);slide();}
		if(settings.affect == 'fade'){$.each($contents,function(k, v){(k === 0) ? $(this).css({'position':'absolute','z-index':9}):$(this).css({'position':'absolute','z-index':1,'opacity':0});
			});
		}
		function slide(){if (index >= $contents.length) index = 0;
			$stag.removeClass(settings.current).eq(index).addClass(settings.current);
			switch(settings.affect){case 'scrollx':
					$conbox.width($contents.length*$contents.width());
					$conbox.stop().animate({left:-$contents.width()*index},settings.speed);
					break;
				case 'scrolly':
					$contents.css({display:'block'});
					$conbox.stop().animate({top:-$contents.height()*index+'px'},settings.speed);
					break;
				case 'fade':
					$contents.eq(last_index).stop().animate({'opacity': 0}, settings.speed/2).css('z-index',1)
							 .end()
							 .eq(index).css('z-index',9).stop().animate({'opacity': 1}, settings.speed/2)
					break;
				case 'none':
					$contents.hide().eq(index).show();
					break;
			}
			last_index = index;
			index++;
		};
		if(settings.auto) var Timer = setInterval(slide, settings.space);
		$stag.bind(settings.trigger,function(){_pause()
			index = $(this).index();
			slide();
			_continue()
		});
		$conbox.hover(_pause,_continue);
		function _pause(){
			clearInterval(Timer);
		}
		function _continue(){
			if(settings.auto)Timer = setInterval(slide, settings.space);
		}	
	}
})(jQuery);

//初始化
$(document).ready(function(){
				// 焦点图片水平滚动
				$(".scroll-box").Xslider({
					// 默认配置
					affect: 'scrollx', //效果  有scrollx|scrolly|fade|none
					speed: 400, //动画速度
					space: 3000, //时间间隔
					auto: true, //自动滚动
					trigger: 'mouseover', //触发事件 注意用mouseover代替hover
					conbox: '.slider', //内容容器id或class
					ctag: 'li', //内容标签 默认为<a>
					switcher: '.switcher', //切换触发器id或class
					stag: 'li', //切换器标签 默认为a
					current:'on', //当前切换器样式名称
					rand:false //是否随机指定默认幻灯图片
				});
			});

//网页
<div class="scroll-box">
				<div class="img">
					<ul class="slider" style="width: 5000px; left: -1000px;">
						<li>
							<a href="#" target="_blank" style="width: 1000px;"><img
									src="${basePath}/images/banner/W020140717313097320621.jpg"
									alt="banner_asd.png" style="width: 1000px;"> </a>
						</li>
						<li>
							<a href="#" target="_blank" style="width: 1000px;"><img
									src="${basePath}/images/banner/W020140703336946469485.jpg"
									alt="banner_zgzq.png" style="width: 1000px;"> </a>
						</li>
						<!-- <li>
							<a href="#" target="_blank" style="width: 1000px;"><img
									src="${basePath}/images/banner/W020140703307930483969.jpg"
									alt="banner_custom.png" style="width: 1000px;"> </a>
						</li> -->
						<li>
							<a href="#" target="_blank" style="width: 1000px;"><img
									src="${basePath}/images/banner/W020140710295884180026.jpg"
									alt="banner_investment.png" style="width: 1000px;"> </a>
						</li>
						<li>
							<a href="#" target="_blank" style="width: 1000px;"><img
									src="${basePath}/images/banner/W020140701312850518375.jpg"
									alt="banner_zgzq.png" style="width: 1000px;"> </a>
						</li>
					</ul>
					<ul class="switcher">
						<li class="">
							1
						</li>
						<li class="on">
							2
						</li>
						<li class="">
							3
						</li>
						<li class="">
							4
						</li>
						<!-- <li class="">
							5
						</li> -->
					</ul>
				</div>
			</div>

//样式
.scroll-box{width:1000px; height:282px; background-color:#fff;margin:-1px 0 0 -1px; z-index:0; position:relative;}
.scroll-box .img{width:1000px; height:282px; overflow:hidden; position:relative;}
.scroll-box .slider{ position:absolute;}
.scroll-box .slider li{ float:left; width:1000px; height:282px; overflow:hidden; background-color:#fff;}
.scroll-box .switcher{ position:absolute; bottom:20px; left:45%;width:100px;font-size: 0; height:10px;}
.scroll-box .switcher li{ float:left;display: block;padding-top:10px;width:10px;height: 0;-webkit-border-radius: 50%;-moz-border-radius: 50%;-ms-border-radius: 50%;-o-border-radius: 50%;border-radius: 50%;background: #cecece;overflow: hidden; margin-right:10px; cursor:pointer;}
.scroll-box .switcher li.on{ background: #f76920;}