响应式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=gb2312" />
    <title>响应式jQuery图片轮播插件</title>
    <script src="js/jquery.1.7.2.min.js"></script>
    <script src="js/jquery.img_silder.js"></script>
    <script>
        $(function () {
            $('#silder').imgSilder({
                s_width: '100%', //容器宽度
                s_height: 450, //容器高度
                is_showTit: true, // 是否显示图片标题 false :不显示，true :显示
                s_times: 3000, //设置滚动时间
                css_link: 'css/style.css'
            });
        });
    </script>
</head>
<body>
    <div class="silder" id="silder">
        <ul class="silder_list" id="silder_list">
            <li> <img src="images/1.jpg" border="0" alt="我是好吃的1" /> </li>
            <li> <img src="images/2.jpg" border="0" alt="我是好吃的2" /> </li>
            <li> <img src="images/3.jpg" border="0" alt="我是好吃的3" /> </li>
            <li> <img src="images/4.jpg" border="0" alt="我是好吃的4" /> </li>
        </ul>
    </div>
</body>
</html>

JS代码(jquery.img_silder.js):

/** * 图片切换插件 * Powered By Mr Zhou * QQ 627266138 * E-mail 627266138qq.com * Date 2013-012-24 * Dependence jquery-1.7.2.min.js **/
(function ($){
	//调用方式 $('#silder').imgSilder({
	s_width:564,s_height:293,is_showTit:true,s_times:3000,css_link:'css/style.css'}
);
	容器必须加入 id silder_list or class silder_list /*参考结构<div class="silder" id="silder"><ul class="silder_list" id="silder_list"><li><img src="css/img/1.jpg" border="0" alt="刘淇同志参观北京市志愿者之家"></li><li><img src="css/img/2.jpg" border="0" alt="刘淇同志与志愿者合影"></li><li><img src="css/img/3.jpg" border="0" alt="刘淇同志到北京大学人民医院调研"></li><li><img src="css/img/4.jpg" border="0" alt="2013中国志愿服务国际交流大会在京举行"></li></ul></div> */
 $.fn.silderDefaults ={
	//默认参数 s_width:500,//容器宽度s_height:500,//容器高度is_showTit:true,// 是否显示图片标题 false:不显示，true:显示s_times:3000,//设置滚动时间css_link:'css/style.css'}
;
	$.extendSilder = function (obj,opt){
	//obj 元素对象，opt 参数对象 var g ={
	//公共方法， 外部可调用 //初始化init:function (){
	var wh ={
	width:opt.s_width,height:opt.s_height}
;
	var pagesize=0;
	//页码var silderList = $('#silder_list',g.obj);
	var silderList_li = $('#silder_list li',g.obj);
	g.LoadCSS(opt.css_link);
	//样式文件导入g.obj.css(wh);
	silderList.css(wh);
	silderList_li.find('img').css(wh);
	//设置宽高属性var currHtml = "";
	//加入播放页码 及文字描述if(opt.is_showTit){
	//判断是否显示标题currHtml += "<div class='silder_desc' id='silder_desc'></div>";
}
img_size = silderList_li.size();
	//图片个数currHtml += "<ul class='silder_page' id='silder_page'>";
	//分页码代码注入for(var i=0;
	i < img_size;
	i++){
	currHtml += "<li>"+ parseInt((1 + i),10) +"</li>";
}
currHtml +="</ul>";
	silderList_li.eq(0).show().siblings().hide();
	//初始化隐藏其他图片g.obj.append(currHtml);
	//注入分页码var silderPage = $('#silder_page',g.obj);
	var silderPage_li =$('#silder_page li',g.obj);
	silderPage_li.eq(0).addClass('current');
	if(opt.is_showTit){
	//初始化图片描述$('#silder_desc').text(silderList_li.eq(0).find('img').attr('alt'));
}
silderPage_li.on('click',function(){
	pagesize = $(this).index();
	silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);
	$(this).addClass('current').siblings().removeClass('current');
	if(opt.is_showTit){
	$('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));
}
}
);
	var t;
	silderList.hover(function(){
	window.clearInterval(t);
	return;
}
,function(){
	t = window.setInterval(function(){
	if(pagesize < img_size && pagesize >= 0){
	silderList_li.eq(pagesize).fadeIn(1000).siblings().fadeOut(100);
	silderPage_li.eq(pagesize).addClass('current').siblings().removeClass('current');
	if(opt.is_showTit){
	$('#silder_desc').text(silderList_li.eq(pagesize).find('img').attr('alt'));
}
pagesize++;
	if(pagesize >= img_size){
	pagesize = 0;
}
}
}
,opt.s_times);
}
).trigger("mouseout");
	//悬浮时 停止自动动画,trigger 起默认触发作用}
,LoadCSS:function(url){
	//新建cssvar s = document.createElement("LINK");
	s.rel = "stylesheet";
	s.type = "text/css";
	s.href = url;
	document.getElementsByTagName("HEAD")[0].appendChild(s);
}
}
;
	g.obj = $(obj);
	g.init();
	return g;
}
$.fn.imgSilder = function (options){
	if (this.length == 0) return;
	//判断对象是否存在 this.each(function (){
	if (this.usedSilder) return;
	var opt = $.extend({
}
,$.fn.silderDefaults,options);
	//合并已赋值参数 this.usedSilder = $.extendSilder(this,opt);
}
);
}
}
)(jQuery);

CSS代码(style.css):

/* 初始化css */
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}
body{font:12px '宋体','Microsoft YaHei',Arial,Helvetica,sans-serif,'Arial Narrow',HELVETICA;background:#fff;-webkit-text-size-adjust:100%;}
a{color:#000;text-decoration:none;display:inline-block;}
a:hover{color:#3468F1;text-decoration:none}
em{font-style:normal}
li{list-style:none}
img{border:0;vertical-align:middle}
table{border-collapse:collapse;border-spacing:0}
p{word-wrap:break-word}
/*轮播*/
.silder{width:100%;height:200px;overflow:hidden;text-align:center;margin:0 auto;position:relative;float:left;}
.silder .silder_list{height:200px;overflow:hidden;position:relative;}
.silder .silder_list a{position:absolute;top:0;left:0;}
.silder .silder_list a,.silder .silder_list img{display:inline-block;float:left;}
.silder .silder_page{height:42px;text-align:right;margin:0 auto;right:1px;overflow:hidden;position:absolute;bottom:1px;}
.silder .silder_page li{width:16px;font-size:12px;float:left;height:16px;line-height:16px;margin:15px 10px 0 0;background:#F1F1F1;display:inline-block;text-align:center;color:#000;}
.silder .silder_page li.current{background:#C70B31;color:#fff;}
.silder_desc{color:#fff;background:url(tit_bg.png) repeat 0 0;float:left;line-height:42px;height:42px;width:100%;overflow:hidden;position:absolute;left:0;bottom:0;text-align:left;text-indent:10px;}
.silder .silder_page li:hover{cursor:pointer;}

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