jquery仿360shop网店系统首页带缩略小图的宽屏焦点图片滚动



118 469 157



特效描述:jquery仿360 shop网店系统 首页带缩略小图 宽屏焦点图滚动,带左右箭头的图片滚动效果

代码结构

1. 引入CSS

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

2. 引入JS

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/script.js"></script>

3. HTML代码

<div class="gw_zzsc">
	<ul class="fix_flash">
        <li imglink="images/banner_05.jpg">
        	<a style="background:url(images/banner_05.jpg) center top no-repeat" href="http://www.dijiuzhanzhang.com/"></a>
        </li>
		<li imglink="images/banner_08.jpg">
        	<a style="background:url(images/banner_08.jpg) center top no-repeat" href="http://www.dijiuzhanzhang.com/"></a>
        </li>
		<li imglink="images/banner_06.jpg">
        	<a style="background:url(images/banner_06.jpg) center top no-repeat" href="http://www.dijiuzhanzhang.com/"></a>
        </li>
    </ul>
    <div class="gw_zzsc_center">
    	<div class="gw_zzsc_flash_v">
        	<div style="width:96px; height:54px; overflow:hidden;">
            	<img src="images/banner_05.jpg">
            </div>
		</div>
    	<div class="gw_zzsc_flash_s"></div>
	</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
	$(".gw_zzsc li").css("width",$("body").width()+"px");
	$(".gw_zzsc li").css("cursor","pointer");
	$(".gw_zzsc ul").css("width","999999px");
	var str = "";
	for(i=0;i<$(".fix_flash li").length;i++){
		str += "<div class='gw_zzsc_sele' number="+i+" onclick='GW_FIX_scroll(this)'></div>"
		}
	$(".gw_zzsc_center").css("left",$("body").width()*0.5+250+"px")
	$(".gw_zzsc_flash_s").html(str);
	$(".gw_zzsc_sele").eq(0).addClass("gw_zzsc_over");
})
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动 滚动切换 滑动选项卡切换 flash焦点图 自动滚动图片轮播 选项卡切换 滑动手风琴 焦点图 幻灯片 图片轮播 滚动切换 带缩略图的幻灯片 图片滚动 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到