论坛首页 Web前端技术论坛

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

浏览 9120 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2011-12-03  
本例子是仿照京东网首页图片样式,然后自己加了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>


   发表时间:2011-12-03  
抓狂,怎么把java放进来了
0 请登录后投票
   发表时间:2011-12-07  
xieye 写道
抓狂,怎么把java放进来了

java 负责吧图片路径输出来就行了啊!
0 请登录后投票
   发表时间:2011-12-07  
来个截图行不行呀,我懒得部署了,不想运行了
0 请登录后投票
   发表时间:2011-12-08  
怎么还java工程,跟java有关系吗
0 请登录后投票
   发表时间:2011-12-08  
其实楼主写得这个不用部署都能够运行的,大家只需要把index.jsp文件改名为index.html文件即可。
0 请登录后投票
   发表时间:2011-12-08  
说实话 我都懒得去下  截图有没有?
0 请登录后投票
   发表时间:2011-12-08  
xiaoxihai123 写道
其实楼主写得这个不用部署都能够运行的,大家只需要把index.jsp文件改名为index.html文件即可。

确实不用部署,直接改文件后缀就OK了
0 请登录后投票
   发表时间:2011-12-08  
chenzhou123520 写道
xiaoxihai123 写道
其实楼主写得这个不用部署都能够运行的,大家只需要把index.jsp文件改名为index.html文件即可。

确实不用部署,直接改文件后缀就OK了

可能习惯了在myeclipse中开发了,不想打开dw开发,呵呵,项目不用部署,就改后缀名称就可以运行了!
0 请登录后投票
   发表时间:2011-12-08  
keer2345 写道
来个截图行不行呀,我懒得部署了,不想运行了


http://www.360buy.com/  京东网主要那个图片轮放的,图片不是很会弄,等以后学会了,以后发帖带图!
0 请登录后投票
论坛首页 Web前端技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics