经验分享程序开发文档资料数据资源其它资源

js滚动产品图片代码

版权：原创 更新时间：1年以上
[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 js滚动产品图片代码 的示例演示效果:

当前平台(PC电脑)
  • 平台:
整屏预览

部分效果截图:

js滚动产品图片代码

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>js滚动产品图片代码</title>

<style type="text/css">
*{margin:0;padding:0;list-style-type:none;}
a,img{border:0;}
body{font:12px/180% Arial, Helvetica, sans-serif, "新宋体";}

.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-table}
*html .clearfix{height:1%}
.clearfix{display:block}
*+html .clearfix{min-height:1%}
</style>

<link rel="stylesheet" type="text/css" href="css/style.css">

<script type="text/javascript" src="js/jquery1.7.min.js"></script>
<script type="text/javascript" src="js/scroll.1.3.js"></script>

</head>

<body>

<div class="wc960 row rowE">

	<div class="hd clearfix">
		<div class="fl">
			<h2 class="title">热门推荐</h2>
		</div>
		<div class="fr">
			<ul id="tabT04" class="tab-T-3 mt20 clearfix">
				<li class="cur"></li>
				<li></li>
				<li></li>
			</ul>
		</div>
	</div>
	
	<div class="bd mt20">
		<div id="sca1" class="warp-pic-list">
			<div id="wrapBox1" class="wrapBox">
				<ul id="count1" class="count clearfix">
					<li>
						<a href="#2685" class="img_wrap"><img src="./images/95962653.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>通用雪佛兰-赛欧</p>
							<p>威佳福盛4S店</p>
							<p>Tel：<span class="p-num">123727788-3396 </span></p>
						</div>
					</li>
					<li>
						<a href="#2624" class="img_wrap"><img src="./images/95961068.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>进口三菱帕杰罗</p>
							<p>泰菱进口三菱4S店</p>
							<p>Tel：<span class="p-num">123727788-3457 </span></p>
						</div>
					</li>
					<li>
						<a href="#2760" class="img_wrap"><img src="./images/95961317.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>E5</p>
							<p>百达贸易</p>
							<p>Tel：<span class="p-num">123727788-3322</span></p>
						</div>
					</li>
					<li>
						<a href="#2690" class="img_wrap"><img src="./images/95907859.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>POLO</p>
							<p>裕华上联4S店</p>
							<p>Tel：<span class="p-num">123727788-3391</span></p>
						</div>
					</li>
					<li>
						<a href="#2664" class="img_wrap"><img src="./images/95961473.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>中华V5</p>
							<p>河南嘉力4S店</p>
							<p>Tel：<span class="p-num">123727788-3417</span></p>
						</div>
					</li>
					<li>
						<a href="#2853" class="img_wrap"><img src="./images/95961788.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>K3</p>
							<p>河南新裕隆4S店</p>
							<p>Tel：<span class="p-num">123727788-3298</span></p>
						</div>
					</li>
					<li>
						<a href="#2684" class="img_wrap"><img src="./images/95908192.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>全新锐志</p>
							<p>丰田4S店</p>
							<p>Tel：<span class="p-num">123727788-3397 </span></p>
						</div>
					</li>
					<li>
						<a href="#2777" class="img_wrap"><img src="./images/95908315.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>B90</p>
							<p><a href="#">内容</a></p>
							<p>Tel：<span class="p-num">123727788-3305</span></p>
						</div>
					</li>
					<li>
						<a href="#2773" class="img_wrap"><img src="./images/95962049.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>思域</p>
							<p><a href="#">内容</a></p>
							<p>Tel：<span class="p-num">12345678900000</span></p>
						</div>
					</li>
					<li>
						<a href="#2744" class="img_wrap"><img src="./images/95962283.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>索纳塔八</p>
							<p><a href="#">内容</a></p>
							<p>Tel：<span class="p-num">123727788-3336</span></p>
						</div>
					</li>
					<li>
						<a href="#2705" class="img_wrap"><img src="./images/95908659.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>陆丰X8</p>
							<p><a href="#">内容</a></p>
							<p>Tel：<span class="p-num">123727788-3375 </span></p>
						</div>
					</li>
					<li>
						<a href="#2673" class="img_wrap"><img src="./images/95961564.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>荣威550</p>
							<p><a href="#">内容</a></p>
							<p>Tel：<span class="p-num">123727788-3408</span></p>
						</div>
					</li>
					<li>
						<a href="#2753" class="img_wrap"><img src="./images/95908803.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>标致207</p>
							<p><a href="#">内容</a></p>
							<p>Tel：<span class="p-num">123727788-3326 </span></p>
						</div>
					</li>
					<li>
						<a href="#2725" class="img_wrap"><img src="./images/95908850.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>雪铁龙C4L</p>
							<p><a href="#">站长导航</a></p>
							<p>Tel：<span class="p-num">123727788-3355 </span></p>
						</div>
					</li>
					<li>
						<a href="#2696" class="img_wrap"><img src="./images/95908985.jpg" width="176" height="135" border="0"></a>
						<div class="text-area">
							<p>全球鹰GX7</p>
							<p><a href="#">站长导航</a></p>
							<p>Tel：<span class="p-num">123727788-3385 </span></p>
						</div>
					</li>
				</ul>
			</div>
			<a id="right1" class="prev icon btn"></a>
			<a id="left1" class="next icon btn"></a>
		</div>
	</div>
</div>



<script type="text/javascript">
$(document).ready(function(){
	$("#count1").dayuwscroll({
		parent_ele:'#wrapBox1',
		list_btn:'#tabT04',
		pre_btn:'#left1',
		next_btn:'#right1',
		path: 'left',
		auto:true,
		time:3000,
		num:5,
		gd_num:5,
		waite_time:1000
	});
});
</script>
</body>
</html>

JS代码(scroll.1.3.js):

(function($){
	$.fn.dayuwscroll = function(param){
	var o = $.extend({
	parent_ele:'#t1',list_btn:'#tabT04',pre_btn:'#left',next_btn:'#right',path:'left',auto:true,time:5000,num:1,gd_num:1,waite_time:1000}
,param);
	var target_ele = $(this).selector;
	var $left = $(o.pre_btn);
	var $right = $(o.next_btn);
	var $con = $(target_ele).find('li');
	var curr = 0;
	var len = $con.length;
	var count_page = Math.ceil(len / o.gd_num);
	var out_width = $con.outerWidth(true);
	var out_height = $con.outerHeight(true);
	var clear_time = null;
	var wait_time = null;
	var first_click = true;
	var wrapbox_w = out_width * o.num;
	var scrollbox_w = wrapbox_w * count_page;
	//$con.clone().appendTo(target_ele);
	function init(){
	$(o.parent_ele).css({
	'width':wrapbox_w+'px','height':out_height+'px','overflow':'hidden'}
);
	$(target_ele).css({
	'width':scrollbox_w+'px','height':out_height+'px'}
);
	if(o.auto){
	auto_play();
}
scroll_mousehover();
}
function auto_play(){
	switch(o.path){
	case 'left':clear_time = window.setInterval(function(){
	left__click();
}
,o.time);
	break;
	case 'right':clear_time = window.setInterval(function(){
	right_click();
}
,o.time);
	break;
	default:clear_time = window.setInterval(function(){
	left__click();
}
,o.time);
	break;
}
}
function list_btn_style(i){
	$(o.list_btn+' li').removeClass('cur');
	$(o.list_btn+' li').eq(i).addClass('cur');
}
function goto_curr(page){
	if(page > count_page){
	curr = 0;
	$(o.parent_ele).scrollLeft(0);
	$(o.parent_ele).animate({
	scrollLeft:wrapbox_w}
,500);
}
else{
	var sp = (page + 1) * wrapbox_w;
	if($(o.parent_ele).is(':animated')){
	$(o.parent_ele).stop();
	$(o.parent_ele).animate({
	scrollLeft:sp}
,500);
}
else{
	$(o.parent_ele).animate({
	scrollLeft:sp}
,500);
}
curr = page + 1;
}
}
$(o.list_btn+' li').click(function(){
	var curLiIndex = $(this).index();
	list_btn_style(curLiIndex);
	curr = curLiIndex -1;
	goto_curr(curr);
}
)function left__click(){
	window.clearInterval(clear_time);
	window.clearTimeout(wait_time);
	curr++;
	if(curr >= count_page ){
	curr = 0;
}
var curLiIndex = curr;
	list_btn_style(curLiIndex);
	if (first_click){
	curr = curLiIndex - 1;
	first_click = false;
}
else{
	curr = curLiIndex - 1;
}
goto_curr(curr);
	if(o.auto){
	wait_time = setTimeout(function(){
	auto_play()}
,o.waite_time);
}
}
$left.bind('click',left__click)function right_click(){
	window.clearInterval(clear_time);
	window.clearTimeout(wait_time);
	curr--;
	if(curr < 0 ){
	curr = count_page - 1;
}
else if ( curr == (count_page- 1)){
	curr = 0;
}
var curLiIndex = curr;
	list_btn_style(curLiIndex);
	curr = curLiIndex -1;
	goto_curr(curr);
	if(o.auto){
	wait_time = setTimeout(function(){
	auto_play()}
,o.waite_time);
}
}
function scroll_mousehover(){
	$con.mouseover(function(){
	window.clearInterval(clear_time);
	window.clearTimeout(wait_time);
}
);
	$con.mouseout(function(){
	if(o.auto){
	wait_time = setTimeout(function(){
	auto_play()}
,o.waite_time);
}
}
)}
$right.bind('click',right_click);
	return init();
}
}
)(jQuery)

CSS代码(style.css):

/*��������*/
.wc960{margin:0 auto;width:960px;}
.fl{float:left;}
.fr{float:right;}
.mt20{margin-top:20px;}
.icon{background:url(../images/icon.png) no-repeat 0 0;}
.warp-pic-list li{float:left;display:inline;}
.warp-pic-list .img_wrap{display:block;font-size:0;overflow:hidden;}
.warp-pic-list .text-area{background-color:#f2f2f2;line-height:24px;}
/*ȫ�ְ��*/
.row .hd{background:url(../images/hd-line_01.jpg) no-repeat 0 50px;height:55px;}
.row .hd .title{font:26px/40px "΢���ź�","Microsoft YaHei","����","SimHei";}
/*ȫ��ҳǩ*/
.tab-T-3{width:66px;}
.tab-T-3 li{width:12px;height:12px;font-size:0;background-color:#dfdfdf;float:left;margin-left:10px;cursor:pointer;display:inline;}
.tab-T-3 li.cur{background-color:#d81c1b;}
/*���ų���*/
.rowE .warp-pic-list{position:relative;width:960px;height:230px;overflow:hidden;}
.rowE .count li{margin-right:20px;width:176px;height:228px;}
.rowE .count .img_wrap{width:176px;height:135px;}
.rowE .count li .text-area{padding:10px 0 10px 15px;}
.rowE .count li .text-area p{line-height:24px;height:24px;}
.rowE .count li:hover .text-area,.rowE .count li.hover .text-area{background-color:#d81c1b;color:#fff;}
.rowE .count .p-num{font-family:"Tahoma";font-weight:bold;}
.rowE .btn{display:block;height:55px;position:absolute;top:78px;width:35px;z-index:200;cursor:pointer;}
.rowE .prev{background-position:0 -88px;left:0;}
.rowE .prev:hover{background-position:0 -144px;}
.rowE .next{background-position:0 -200px;right:0;}
.rowE .next:hover{background-position:0 -256px;}
附件:下载该文件资源,减少时间成本(增值服务)
File Source
.rar
144.90 KB
立即下载(CNY 2.9￥)
打赏 收藏
分享
分享到QQ 分享到微博 微信扫一扫
留言
该资源可下载
File Source
.rar
144.90 KB
立即下载
庄莉爽燕
了解
打赏作者 鼓励作者
Html Js 滚动条
最新结算
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jquery虚拟键盘中文打字效果js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
HTML5实现CSS滤镜图片切换特效代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery头像裁剪插件cropbox js代码
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 2.31￥ 状态: 待结算 详细>
CSS3制作3D图片立方体旋转特效
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
jQuery+css3实现信封效果
类型: .rar 金额: CNY 0.29￥ 状态: 待结算 详细>
我们力求给您提供有用的文章,再此基础上,会附加营收资源,不做任何广告,让平台可以更好发展 若您发现您的权利被侵害，或使用了您的版权，请发邮件联系 sunlifel@foxmail.com ggbig觉得 : 不提供源码的文章不是好文章
合作伙伴
帮助中心
联系我们
  • QQ：21499807
  • 邮箱：sunlifel@foxmail.com
  • QQ扫一扫加QQ
    QQ扫一扫
Copyright 2023-2024 ggbig.com·皖ICP备2023004211号-1
打赏文章