自动轮播jQuery焦点图插件SliderJS轮播滚动切换特效代码

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

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

以下是自动轮播jQuery焦点图插件SliderJS轮播滚动切换特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<title>自动轮播jQuery焦点图插件SliderJS</title>
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
<br><br><br>
<div id="jquery-script-menu"> </div>
<div class="slider">
  <div class="slider-container">
    <div class="slider-wrapper">
      <div class="slide"> <img src="assets/img/img1.jpg" alt="jQuery Slider with CSS Transitions"> </div>
      <div class="slide"> <img src="assets/img/img2.jpg" alt="jQuery Slider with CSS Transitions"> </div>
      <div class="slide"> <img src="assets/img/img3.jpg" alt="jQuery Slider with CSS Transitions"> </div>
      <div class="slide"> <img src="assets/img/img4.jpg" alt="jQuery Slider with CSS Transitions"> </div>
    </div>
  </div>
</div>
<script src="assets/js/jquery-1.8.3.min.js"></script> 
<script src="assets/js/slider.js"></script> 
<script type="text/javascript">
	(function() {
		Slider.init({
			target: $('.slider'),
			time: 6000
		});
	})();
</script>
</body>
</html>

JS代码(slider.min.js):

/*--------------------------------SliderJS - jQuery Slider with CSS Transitions--------------------------------+ https://github.com/pinceladasdaweb/SliderJS+ version 1.0.1+ Copyright 2013 Pedro Rogerio+ Licensed under the MIT license+ Documentation:https://github.com/pinceladasdaweb/SliderJS*/
var supports=function(){
	"use strict";
	/*global document*/
var a,b,c,d=document.createElement("div").style,e=["","Moz","Webkit","Khtml","O","ms"];
	return function(f){
	if("string"==typeof d[f])return!0;
	for(f=f.replace(/^[a-z]/,function(a){
	return a.toUpperCase()}
),b=0,c=e.length;
	c>b;
	b+=1)if(a=e[b]+f,"string"==typeof d[a])return!0;
	return!1}
}
(),Slider=function(a){
	"use strict";
	/*global jQuery,setTimeout,clearTimeout*/
var b={
	npos:0,timer:null,config:function(a){
	b.target=a.target,b.container=b.target.find(".slider-wrapper"),b.sWidth=b.container.find(".slide").outerWidth(!0),b.max=b.container.find(".slide").length,b.tWidth=b.sWidth*b.max,b.time=a.time||5e3}
,early:function(){
	var b,c,d=this,e=d.target;
	for(d.container.css({
	width:d.tWidth}
),e.append(d.pager()),b=0,c=d.max;
	c>b;
	b+=1)d.items(b+1).insertBefore(a(".slider-nav .next").parents("li"));
	e.find(".bullet:first").addClass("active")}
,events:function(){
	var c=this,d=c.target;
	d.on("click",".slider-nav a",function(b){
	b.preventDefault();
	var d=a(this),e=d.html();
	d.hasClass("next")&&c.next(),d.hasClass("prev")&&c.prev(),d.hasClass("bullet")&&(c.bullets(e),c.update())}
),c.container.on({
	mouseenter:function(){
	clearTimeout(c.timer)}
,mouseleave:function(){
	b.auto()}
}
)}
,slip:function(){
	supports("transition")?b.container.css({
	left:-b.npos*b.sWidth}
):b.container.animate({
	left:-b.npos*b.sWidth}
,800)}
,bullets:function(a){
	clearTimeout(b.timer),b.auto(),b.npos=parseInt(a,null)-1,b.slip()}
,prev:function(){
	clearTimeout(b.timer),b.auto(),b.npos-=1,b.npos<0&&(b.npos=b.max-1),b.slip(),b.update()}
,next:function(){
	clearTimeout(b.timer),b.auto(),b.npos+=1,b.npos>b.max-1&&(b.npos=0),b.slip(),b.update()}
,update:function(){
	var a=this,b=a.target;
	b.find(".bullet").removeClass("active"),b.find(".bullet").eq(a.npos).addClass("active")}
,auto:function(){
	var a=this;
	a.timer=setTimeout(a.next,a.time)}
,pager:function(){
	var b=a('<ul class="slider-nav"><li><a href="#" class="control prev">Prev</a></li><li><a href="#" class="control next">Next</a></li></ul>');
	return b}
,items:function(b){
	var c=a('<li><a class="bullet" href="#">'+b+"</a></li>");
	return c}
,init:function(a){
	b.config(a),b.max&&1!==b.max&&(b.auto(),b.events(),b.early())}
}
;
	return{
	init:b.init}
}
(jQuery);

CSS代码(style.css):

body,div,ul,ol,h1,h2{margin:0;padding:0}
img{border:0}
li{list-style:none;margin:0;padding:0}
a{margin:0;outline:none;padding:0;text-decoration:none}
/*+----------------------------------------------------------------+Extras+----------------------------------------------------------------+*/
.cf:before,.cf:after{content:" ";display:table}
.cf:after{clear:both}
.clear{clear:both}
/*+----------------------------------------------------------------+Definicoes Gerais+----------------------------------------------------------------+*/
body{background-color:#2D2C30;color:#eaeaea;font:62.5% Verdana,Geneva,sans-serif}
h1{font:3.8em 'OratorpraOi-TextTwo';text-align:center;margin-top:150px;margin-right:0;margin-bottom:50px;margin-left:0;}
/*+----------------------------------------------------------------+Slideshow+----------------------------------------------------------------+*/
.slider{margin:0 auto;width:990px}
.slider-container{height:425px;margin:0 auto 20px;overflow:hidden;position:relative;width:990px;}
.slider-container .slider-wrapper{left:0;overflow:hidden;position:absolute;top:0;width:5000em;/*Fix for prevent display errors*/
-webkit-transition:all 800ms ease;-moz-transition:all 800ms ease;-o-transition:all 800ms ease;transition:all 800ms ease;}
.slider-container .slide{float:left;height:425px;overflow:hidden;position:relative;width:990px;}
.slider-nav{text-align:center;width:990px;}
.slider-nav li{display:inline;padding:3px;}
.slider-nav .bullet{background-color:#59baa8;border-radius:50%;display:inline-block;text-indent:-9000px;overflow:hidden;height:16px;width:16px;}
.slider-nav .active{background-color:#e7433b}
.slider-nav .prev,.slider-nav .next{background:url('img/sprite.png') no-repeat;display:inline-block;text-indent:-9000px;overflow:hidden;height:16px;width:16px;}
.slider-nav .next{background-position:-15px top}

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