图片轮放例子，图片新闻，图片幻灯片 jquery 实现

最新推荐文章于 2024-05-06 21:49:54 发布

hacker5077

最新推荐文章于 2024-05-06 21:49:54 发布

阅读量166

点赞数

分类专栏： web前端文章标签： css jquery UI JavaScript ViewUI

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本例子是仿照京东网首页图片样式，然后自己加了jquery控制

mycss.css
附件

index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>My JSP 'MyJsp.jsp' starting page</title>
		<link rel="stylesheet" type="text/css" href="mycss.css">
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
	</head>

	<body>

	<div id='img_side'>
		<div class="m" id="slide" 
			style="position: relative;">
			<ul id='ss' style="position: absolute; left: 0px; top: 0px;">
				<li>
					<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284255152.jpg" width="766"
							height="120"> </a>
				</li>
				<li>
					<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284255548.jpg" width="766"
							height="120"> </a>
				</li>
				<li>
					<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284256914.jpg" width="766"
							height="120"> </a>
				</li>
				<li>
					<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284257523.jpg" width="766"
							height="120"> </a>
				</li>
				<li>
					<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/13228425771.gif" width="766"
							height="120"> </a>
				</li>
				<li>
					<a href="#" target="_blank"><img src="http://img18.wal8.com/img18/222015_20111203001440/132284257952.jpg" width="766"
							height="120"> </a>
				</li>
			</ul>
			<div id='numbers'>
				<span class="curr"><a
					href="# "
					target="_blank">1</a> </span>
				<span class=""><a
					href="# "
					target="_blank">2</a> </span>
				<span class=""><a
					href="# "
					target="_blank">3</a> </span>
				<span class=""><a
					href="# "
					target="_blank">4</a> </span>
				<span class=""><a
					href="# "
					target="_blank">5</a> </span>
				<span class=""><a
					href="# "
					target="_blank">6</a> </span>
			</div>
		</div>


		</div>


		<script type="text/javascript">

	(function($) {

	  $.fn.slideImg = function(settings) {

        settings = jQuery.extend({
            speed: "normal",
            timer: 1000
        }, settings);
        return this.each(function() {
            $.fn.slideImg.scllor($(this), settings);
        });
    };

	   $.fn.slideImg.scllor = function($this, settings) {

        var index = 0;
        var scllorer=$(".m li",$this);
        var size=scllorer.size();
        var slideH=scllorer.outerHeight();
        var li = $("#numbers span",$this);
        var showBox = $(".img-box",$this);
        var intervalTime=null;
        li.hover(function() {
            var that=this;
             index = li.index(that);
            if (intervalTime) {
                clearInterval(intervalTime);
            }
            intervalTime = setTimeout(function() {
                index = li.index(that);
                ShowAD(index);
            }, 200);
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        showBox.hover(function() {
            if (intervalTime) {
                clearInterval(intervalTime);
            }
        }, function() {
            clearInterval(intervalTime);
            interval();
        });
        function interval(){
            intervalTime = setInterval(function() {
                ShowAD(index);
                index++;
                if (index == size) {
                    index = 0;
                }
            }, settings.timer);
        }
        interval();
        var ShowAD = function(i) {
            $("#ss").animate({ "top": -i * slideH}, settings.speed);
           li.eq(i).addClass("curr").siblings().removeClass("curr");
        };
    };
	  // var li = $(".numbers a",$this);
     $("#img_side").slideImg({
                speed: "normal",
                timer: 3000
            });
	})(jQuery);
	</script>		
	</body>
</html>

hacker5077

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
图片轮放例子，图片新闻，图片幻灯片 jquery 实现

本例子是仿照京东网首页图片样式，然后自己加了jquery控制mycss.css 附件index.jsp[code="java"] My JSP 'MyJsp.jsp' starting page ...
复制链接

扫一扫