问题描述
- jsp 页面图片自动切换代码
-
要求:
1、支持跨浏览器(常用的几种),IE需要支持低版本(IE6-IE8);
2、支持手机浏览(苹果IOS和android系统);
3、图片数量及切换的窗口大小可以自己设置(不要多处修改);
4、图片从有到左滚动,鼠标放上面,图片停止滚动,点击图片可以跳转到指定页面。可以用jquery,多页面可以调用(只需修改图片参数即可)。
效果类似下面网页:
http://www.bj969.com/news/201601.xml测试好了再回答,谢谢。
解决方案
直接扣下来就好了,这种效果大把
<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水平方向平铺焦点图
解决方案二:
直接榨代码就搞下来了,要不然直接搜插件用呀
时间: 2024-12-02 02:17:59