2 ycn5202005 ycn5202005 于 2016.03.05 16:04 提问

jsp 页面图片自动切换代码 100C

要求:
1、支持跨浏览器(常用的几种),IE需要支持低版本(IE6-IE8);
2、支持手机浏览(苹果IOS和android系统);
3、图片数量及切换的窗口大小可以自己设置(不要多处修改);
4、图片从有到左滚动,鼠标放上面,图片停止滚动,点击图片可以跳转到指定页面。

可以用jquery,多页面可以调用(只需修改图片参数即可)。

效果类似下面网页:
http://www.bj969.com/news/201601.xml

测试好了再回答,谢谢。

2个回答

showbo
showbo   Ds   Rxr 2016.03.05 19:54

直接扣下来就好了,这种效果大把


<style type="text/css">
#owl-demo{position:relative;width:800px;height:533px;margin:20px auto 0 auto;}
#owl-demo .item{ position:relative;display:block;}
#owl-demo img{display:block;width:800px;height:533px;}
#owl-demo b{position:absolute;left:0;bottom:0;width:100%;height:78px;background-color:#000;opacity:.5;filter:alpha(opacity=50);}
#owl-demo span{position:absolute;left:0;bottom:37px;width:100%;font:18px/32px "微软雅黑","黑体";color:#fff;text-align:center;}
.owl-pagination{position:absolute;left:0;bottom:10px;width:100%;height:22px;text-align:center;}
.owl-page{display:inline-block;width:10px;height:10px;margin:0 5px;background-image:url(http://www.bj969.com/news/images/bg15.png);*display:inline;*zoom:1;}
.owl-pagination .active{width:25px;background-image:url(http://www.bj969.com/news/images/bg16.png);}
.owl-buttons{display:none;}
.owl-buttons div{position:absolute;top:50%;width:40px;height:80px;margin-top:-40px;text-indent:-9999px;}
.owl-prev{left:0;background-image:url(http://www.bj969.com/news/images/bg17.png);}
.owl-next{right:0;background-image:url(http://www.bj969.com/news/images/bg18.png);}
.owl-prev:hover{background-image:url(http://www.bj969.com/news/images/bg19.png);}
.owl-next:hover{background-image:url(http://www.bj969.com/news/images/bg20.png);}
body{font-family: Microsoft Yahei;margin-top: 2em;background-color: #fcfcfc;}
.div-title,.div-content{width:800px;text-align: left;}
.div-title i{color: gray;}
.div-title p{font-size:13px;line-height: 25px;}         
.div-content p{font-size:13px;line-height: 25px;text-indent: 2em;}
a{font-size:13px;color: blue;text-decoration: none;}
a:HOVER{color: red;}
</style>
<link rel="stylesheet" href="http://www.bj969.com/news/css/owl.carousel.css">
<script type="text/javascript" src="http://www.bj969.com/news/js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="http://www.bj969.com/news/js/owl.carousel.js"></script>
<script>
    $(function () {
        $('#owl-demo').owlCarousel({
            items: 1,
            navigation: true,
            navigationText: ["上一个", "下一个"],
            autoPlay: true,
            stopOnHover: true
        }).hover(function () {
            $('.owl-buttons').show();
        }, function () {
            $('.owl-buttons').hide();
        });
    });
</script>
<div id="owl-demo" class="owl-carousel">
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-1.jpg" /><b></b><span></span></a>
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-2.jpg" /><b></b><span></span></a>
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-3.jpg" /><b></b><span></span></a>
    <a class="item" href="#"><img src="http://www.bj969.com/news/images/201601-4.jpg" /><b></b><span></span></a>
</div>

javascript水平方向手风琴焦点图
jquery焦点图代码,幻灯过渡特效,仿IE特效滤镜
jquery水平方向平铺焦点图

模仿淘宝,拍拍图片效果

showbo
showbo 回复ycn5202005: http://www.w3dev.cn/article/20141127/jquery-horizontal-photo-gallery.aspx个支持,你只需要控制容器的宽度,焦点图会自动平铺容器宽度,不过是显示部分而不是等比缩放图片,你结了我给你下一个。
2 年多之前 回复
ycn5202005
ycn5202005 这个手机上不行。网站是我做的
2 年多之前 回复
WinsenJiansbomber
WinsenJiansbomber   2016.03.05 22:13

直接榨代码就搞下来了,要不然直接搜插件用呀

Csdn user default icon
上传中...
上传图片
插入图片
准确详细的回答,更有利于被提问者采纳,从而获得C币。复制、灌水、广告等回答会被删除,是时候展现真正的技术了!
其他相关推荐
javascript实现首页图片自动切换【HTML/JSP】
现在访问网站主页的时候,吸引我们眼球的已经不是那些古板的文字 排版,而是华丽且实用的动图效果,如下图所示:               通过动图,我们可以看到本站的最新活动,最新新闻等等,这些图片往往几秒钟切换一次,显示更新,点击图片即可看到详细内容。         我们在做网页设计的时候,也可以拿来借鉴。          下面介绍一下 效果的实现 :javascript 。我
java servlet+jsp实现点击图片进行图片上传,还有图片切换,并在客户端上传图片保存在服务器上
搜了好多网上的实例,总是感觉差点什么,结合前辈的经验,终于写了一个小例子,分享出来,供大家参考ccc.jsp&amp;lt;%@page import=&quot;java.sql.DriverManager&quot;%&amp;gt;&amp;lt;%@ page language=&quot;java&quot; contentType=&quot;text/html; charset=UTF-8&quot; pageEncoding=&quot;UTF-8&quot;%&amp;gt;&amp;lt
在网页上定时自动更换图片(含图片说明)
在网页上定时自动更换图片,图片文件名称从1开始(如1.gif、2.gif、3.gif),当然,你也可以稍微修改一下,改成其他的,比如abc.gif aaa.gif 等,看了我相信你就明白了。 其实,是用jsp循环实现的。 开始调用图片,在<body onload这里开始
js实现图片自动切换
*{margin:0;padding:0;list-style-type:none;} body{font:12px/180% Arial, Helvetica, sans-serif, "宋体";color:#333;background:#f0f0f0;} a,img{border:0;} /* demo */ .demo{width:780px;margin:0 auto;} .demo h
JSP+JavaScript实现图片切换
使用jsp+JavaScript实现图片切换。 思路:通过JavaScript设置图片是否显示实现来实现切换的效果。 下面给出三幅图片,每幅图片下面附带有文字说明,切换图片的时候,文字也切换。                                                                                          
jsp+css实现图片自动轮换
jsp文件(片段) /images/picture/2011050903.jpg'  alt="" /> /images/picture/2011050901.jpg'  alt="" /> /images/picture/meinv/wangruoyi(2).jpg'  alt="" /> /images/picture/2011050902.jpg'  alt="" /
JQuery中图片自动切换和手动切换
先看网页代码:<body> <div id="content"> <div id="top"> <ul> <li class="top1"><a href="#" id="tianmao" class="a_link">天猫</a>精选</li> <li class="top2"> <div>1吃货节<span style="color:#ccc">sdfsfsfdsfsd</span></div>
一段非常简单的让图片自动切换js代码
1javascript > 2var curIndex=0; 3//时间间隔 单位毫秒 4var timeInterval=1000; 5var arr=new Array(); 6arr[0]="1.jpg"; 7arr[1]="2.jpg"; 8arr[2]="3.jpg"; 9arr[3]="4.jpg";10arr[4]="5.jpg";11arr[5]="6.jpg";12arr[6]=
每三秒图片自动切换,不是轮播
布局: ImageView android:id="@+id/faxian_img" android:layout_width="match_parent" android:layout_height="200dp" /> =====================代码=========================== public c
HTML中如何自动切换页面背景图片
附js主要代码: 一、切换body图片   var curIndex = 0; //时间间隔(单位毫秒),每秒钟显示一张,数组共有3张图片放在img文件夹下 var timeInterval = 1000;                         //定义一个存放照片位置的数组,可以放任意个,在这里放3个 var arr = new Array(); arr[0] = "i