全屏带动画和触摸效果的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" />
<meta name="keywords" content="JS代码,焦点图,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为全屏带动画和触摸效果的jquery图片轮播插件" />
<title>全屏带动画、触摸效果的jquery图片轮播插件</title>
<link href="css/public.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<!--[if IE 7]><link rel="stylesheet" href="css/ie7.css" /><![endif]-->
<!--[if IE 8]><link rel="stylesheet" href="css/ie8.css" /><![endif]-->
<!--[if IE]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
<script type="text/javascript" src="js/iview.js"></script>
<script type="text/javascript" src="js/jquery.plugins-min.js"></script>
<script type="text/javascript" src="js/scripts-bottom-min.js"></script>
</head>
<body>
<!-- 代码 开始 -->
<div class="header">
  <div id="onebyone_slider">
    <div class="oneByOne_item">
		<span class="ob1_title">漫画原创时间日期Jquery插件</span>
		<span class="ob1_description">1、可以灵活设计响应事件（Event） 2、层显示的位置（Left，Top）3、年月日之的连接符号 4、自由控制是否显示时间（isTime）5、年份下列列表的开始值与结束值。</span>
		<span class="ob1_button"><a href="#" target="_blank" class="default_button">查看详情</a></span>
		<img src="images/header/2.png" class="ob1_img_device1" alt="漫画原创时间日期Jquery插件" />
	</div>
   <div class="oneByOne_item">
		<span class="ob1_title">jcDate原创时间Jquery插件</span>
		<span class="ob1_description">可支持：1、图标样式名称;2、响应的事件;3、出现的速度;4、靠左的位置;5、靠上的位置;6、日期连接字符;7、关闭时间。</span>
		<span class="ob1_button"><a href="#" target="_blank" class="default_button">查看详情</a></span>
		<img src="images/header/2.png" class="ob1_img_device1" alt="jcDate原创时间Jquery插件" />
	</div>
	<div class="oneByOne_item">
		<span class="ob1_title">漫画原创弹出内容提示Jquery插件</span>
		<span class="ob1_description">可支持响应的事件、提示层显示的时间、显示的消息、滑动速度、提示类型（1、success 2、error 3、warning）等参数的灵活设置，具体请查看详细介绍。。。</span>
		<span class="ob1_button"><a href="#" target="_blank" class="default_button">查看详情</a></span>
		<img src="images/header/2.png" class="ob1_img_device1" alt="漫画原创弹出内容提示Jquery插件" />
	</div>
	<div class="oneByOne_item">
		<span class="ob1_title">BubbleTips气泡提示Jquery插件</span>
		<span class="ob1_description">漫画就将此功能封装成一个通用的插件，代码很简洁，代码总共加起来了40多行，最适合网友学习用，主要实现了上、下、左、右四个方位的显示，带有可关闭操作。</span>
		<span class="ob1_button"><a href="#" target="_blank" class="default_button">查看详情</a></span>
		<img src="images/header/2.png" class="ob1_img_device1" alt="BubbleTips气泡提示Jquery插件" />
	</div>
  </div>
</div>
</body>
</html>

JS代码(Side.links.color.js):

// JavaScript Document$(document).ready(function(){
	var url = location.href;
	var arr = new Array();
	var nav = new Array();
	$("div .content_r_list ul li a").each(function(i,u){
	arr[i] = u;
	if(arr[i] == url){
	$(this).css({
	"color":"#09F"}
);
}
}
);
}
);

CSS代码(iview.css):

/* The slider */
.iviewSlider{overflow:hidden;}
/* The timer in the Slider */
#iview-timer{position:absolute;z-index:100;border-radius:5px;cursor:pointer;}
#iview-timer div{border-radius:3px;}
/* The Preloader in the Slider */
#iview-preloader{position:absolute;z-index:1000;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;border:#000 1px solid;padding:1px;width:100px;height:3px;}
#iview-preloader div{float:left;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;height:3px;background:#000;width:0px;}
/* The strips and boxes in the Slider */
.iview-strip{display:block;position:absolute;z-index:5;}
.iview-block{display:block;position:absolute;z-index:5;}
/* Direction nav styles (e.g. Next & Prev) */
.iview-directionNav a{position:absolute;top:45%;z-index:9;cursor:pointer;}
.iview-prevNav{left:0px;}
.iview-nextNav{right:0px;}
/* Control nav styles (e.g. 1,2,3...) */
.iview-controlNav{position:absolute;z-index:9;}
.iview-controlNav a{z-index:9;cursor:pointer;}
.iview-controlNav a.active{font-weight:bold;}
.iview-controlNav .iview-items ul{list-style:none;}
.iview-controlNav .iview-items ul li{display:inline;position:relative;}
.iview-controlNav .iview-tooltip{position:absolute;}
/* The captions in the Slider */
.iview-caption{position:absolute;z-index:4;overflow:hidden;cursor:default;}
/* The video show in the Slider */
.iview-video-show{background:#000;position:absolute;width:100%;height:100%;z-index:101;}
.iview-video-show .iview-video-container{position:relative;width:100%;height:100%;}
.iview-video-show .iview-video-container a.iview-video-close{position:absolute;right:10px;top:10px;background:#222;color:#FFF;height:20px;width:20px;text-align:center;line-height:29px;font-size:22px;font-weight:bold;overflow:hidden;-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;}
.iview-video-show .iview-video-container a.iview-video-close:hover{background:#444;}

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