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

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

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

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

测试好了再回答,谢谢。

0

2个回答

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


<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水平方向平铺焦点图

模仿淘宝,拍拍图片效果

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

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

0
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
求图片自动切换代码~~~
最好用C# JS也可以
自动切换图片web代码
自动切换图片的web简单代码,可以提供简单的参考,希望提供帮助
JS图片自动切换代码
JS图片自动切换代码 以不同效果变换图片
自动切换图片
实现图片的自动播放,播放时自动播放背景音乐等,但没有图片切换的效果,调用API函数没有做成功,若有做成功的高手赐教,不胜感激
图片自动切换
此案例为图片自动切换,兼容ie6,谷歌、火狐等浏览器
图片自动切换???
我想实现让几张图片每隔一段时间就切换一下,rn如每隔10秒钟就显示下一张,然后循环rn图片的路径存在数据库里面rn有点像幻灯片的效果rn,用asp实现,或者谁有更好的方法?高分重赏!
jQuery鼠标悬停图片手风琴自动切换代码.zip
js代码 [removed][removed] [removed] $(document).ready(function(){ $(".accordion").accordion(); }); [removed] 一款简单实用的jQuery鼠标悬停图片手风琴自动切换代码,鼠标经过焦点图图片自动切换特效
多组图片选项卡自动切换代码.zip
多组图片选项卡自动切换代码基于JS实现,鼠标经过数字按钮选项卡,图片进行自动切换。
求类似论坛中图片自动切换的代码
论坛都有的一个模块rnrn[color=#FF0000]图片会自动切换!且图片是从 最新的 5篇 带图片的 文章中获取rn点击图片会 链接到 有此图片的文章rn在图片上显示 该篇文章的 标题[/color]rnrn大家帮个忙!rnrn有解了 一定结账
JS图片banner自动切换效果代码
JS图片banner自动切换效果代码 文字显示在图片上的
背景自动切换的登录注册页面
可自动切换背景的登录和注册页面,页面代码完整切美观
自动切换页面问题
上次的问题还有点疑问,结帖过早了一点,再麻烦大家:我想实现一个能在程序里自由调用的函数实现显示提示信息后自动切换到其他指定asp页面,我只想在我的代码中加上一个调用就ok了,当然是多次调用(简单的条件判断不ok)谢谢!!!
自动切换轮询页面
征服微信小程序视频教程n微信小程序是一种不需要下载安装即可使用的应用,它实现了应用“触手可及”的梦想,用户扫一扫或搜一下即可打开应用。学员通过该视频课程,可以完全了解小程序的开发方法,并可以独立开发完整的小程序。
ViewPager切换图片及自动切换图片
ViewPager很好的切换图片及自动切换图片,在项目中运用过,挺好的,值得学习。
【页面切换】ViewFlipper页面自动切换
1、为ViewFlipper加入View (1) 静态导入:在layout布局文件中直接导入(不灵活),在ViewFlipper控件中加入一个一个的ImageView. (2) 动态导入:flipper.addView(getImageView(R.drawable.pic)); 2、实现页面自动切换功能flipper.setInAnimation(this,R.anim.left_in);
ASP.NET FLASH自动切换,web FLASH自动切换,flash自动切换图片
ASP.NET FLASH自动切换,web FLASH自动切换,flash自动切换图片
图片自动切换JS特效
简单的图片向左 向右转动代码 纵向滚动 希望对大家有帮助
js实现图片自动切换
说明:通过计时器使得图片每间隔几秒可以自动切换,也可以通过鼠标的点击控制播放的图片。 html代码:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>图片自动切换</title> <link rel="stylesheet" type="t
Android 图片自动切换
Android 图片自动切换 效果图: 思路: 利用 android.support.v4.view.ViewPager 和线程实现图片切换。 1. 首先把图片放入分别放入不同的 ImageView 2.然后重写一下 ViewPager 的 适配器 PagerAdapter 3.然后重写一个实现更新界面等操作 4:在onStart里面切换图片 配置文件代码如下: <R
javascript图片自动切换效果
javascript图片自动切换效果 javascript图片自动切换效果
Javascript图片自动切换实例
这里包含了3个经常在网上出现的图片切换的例子,希望对大家有用
jquery实现图片自动切换
这是用jquery实现的图片自动切换效果,包括用鼠标划过时图片切换,自动切换等效果的实现。
js自动切换图片
js自动切换图片
淘宝图片自动切换
淘宝网图片自动切换滚动代码,实用直接粘贴就可以!
网站首页图片自动切换
请各位大侠帮忙啊 急用!rn本人刚进公司上班分到一个项目,那边客户要求 首页的图片(图片都是从数据图一张一张循环取出来的)要一组一组自动切换,每一组是四张,切换的间隔是3-5秒。 rn本人到网上找了很多Jquery插件 可都不不是自动的都是点击一下它才会换下一组。所以特请各位帮忙啊 !rnrn就要优酷网首页(http://movie.youku.com/)那个效果 唯一不同的是它一组是三张我需要的是四张...rnrn感谢各位了
js图片自动切换的源码
请问网页上那种图片自动翻页的flash怎么搞得?比如csdn首页,中间偏上的图片,从第一张自动切换到第六张?谁给个源码啊?我要换图片。。。谢谢啊
如何实现图片自动切换???
请问像CSDN主页的自动切换图片是如何实现的?????rnrnrn谢谢
Jquery实现图片自动切换
这是一个 Jquery实现图片自动切换的Demo,共大家参考。
android自动切换图片
基于android的一个图片自动切换器,自己写的,供参考。。。嘿嘿
js广告图片自动切换
广告列表中,可以实现图片的自动切换,下面有对应的图片编号,点击编号可以实现图片的链接
图片自动切换js代码
一段非常简单的让图片自动切换js代码 一段非常简单的让图片自动切换js代码
图片自动切换效果ViewPager
public class MainActivity extends ActionBarActivity{ private int imageIds[]; private String[] titles; private ArrayList images; private ArrayList dots; private TextView title;
android--图片的水平自动切换
实现该功能用到了Gallery组件,该组件能够水平方向显示图片内容,并可以拖动; 主要属性: <Gallery android:layout_width="match_parent" android:layout_height="wrap_content" android:animationDuration="1000"//用于列表项切
js手动自动切换图片
js轮换图片,横向的自动手动切换图片,详细请下载
jquery 图片自动切换
基于jQuery淡入淡出可自动切换的幻灯插件 Posted by Mr.Think on 08/20/2010 分类于@jQuery &amp;lt;!--&amp;lt;span id=&quot;addcomment&quot;&amp;gt;&amp;lt;a href=&quot;#respond&quot; rel=&quot;nofollow&quot; title=&quot;Leave a comment ?&quot;&amp;gt;Leave a comment&amp;lt;/a
Android自动切换图片
Android自动切换图片 友友们我会更新更多的源码和大家分享 希望大家喜欢.
js实现图片的自动切换
1.用到的插件script src="${lib.jsPath}/swiper.min.js">script> div class="swiper-container"> div class="swiper-wrapper"> div class="swiper-slide banner_slide">img src="${fsUrl}${goods.preview1!'
图片层叠自动切换
图片层叠自动切换,效果还不错,完整可用。喜欢的可以下载哦
相关热词 c#串口测试应用程序 c# 匹配 正则表达式 c#防止窗体重绘 c#读写txt文件 c#挖地雷源代码 c#弹框选项 c# 移除 队列 c# 密码写入配置文件 c# 获取可用内存大小 c# 嵌入excel编辑