网趣商城

>-- 知识库 > --

实用的广告切换大图特效代码

分类

搜索推广 ( 878 )

开店经验 ( 771 )

知识库 ( 436 )

软件教程 ( 413 )

购物系统相关

Shop7z终极版限时特惠进行中...

如何选择我需要的版本

购买正式版与使用免费版的区别

特惠云主机优惠促销中...

常见问题

知识库

实用的广告切换大图特效代码

来源：本站类别：知识库日期： 2016/7/1

<!doctype html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>pic_jq</title>
    <style>
        *{ padding:0; margin:0; list-style:none; }
        .pic_js{ width:500px; margin:0 auto; overflow:hidden; border:1px solid #0066CC; position:relative; }
        .pic{ width:2000px; z-index:1; }
        .pic img{ display:block; width:500px; height:376px; cursor:pointer; }
        .pic li{ width:500px; height:376px; float:left; }
        .pic_nav{ position:absolute; bottom:3px; right:0px; z-index:100; }
        .pic_nav li{ float:left; cursor:pointer; width:40px; height:40px; line-height:40px; border:1px solid #069; margin-right:5px; text-align:center; background:#ff0; }
        .pic_nav li img{ width:100%; height:100%; }
        .pic_nav .current{ background:#03C; color:#FFF; border:1px solid #F90;}
    </style>
    <script type="text/javascript" src="http://lib.sinaapp.com/jquery/1.10.2/jquery-1.10.2.min.js"></script>
</head>

<body>
<div id="pic" class="pic_js">
    <ul id="big" class="pic">
        <li><img src="http://dummyimage.com/500x376/ccc&text=1"/></li>
        <li><img src="http://dummyimage.com/500x376/eee&text=2"/></li>
        <li><img src="http://dummyimage.com/500x376/999&text=3"/></li>
        <li><img src="http://dummyimage.com/500x376/666&text=4"/></li>
    </ul>
    <ul id="icon" class="pic_nav">
        <li class="current"></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>
<script>
    var picNum = 0;
    var picWidth = 500;//图片的宽度
    var picSpeed = 1000;//图片切换速度
    var autoSpeed = 4000;//自动播放时间 3000毫秒（3秒）
    var big = $('#big');
    var li = $('#big li');
    var len = li.length;
    var icon = $('#icon li');
    var now = 0;
    var on = 'current';
    var timer = null;