`
wangking717
  • 浏览: 263178 次
  • 性别: Icon_minigender_2
  • 来自: 成都
社区版块
存档分类
最新评论

jquery bxslider幻灯片样式改造

 
阅读更多

找了很多jquery的幻灯片,都觉得不是很好,最后发现bxslider兼容性最好,移动设备支持手动翻动。

 

但是官方提供的显示效果真的很难看,让人难以接受。最后只能自己DIY了。

 

bxslider官方样式:



 

改造后的样式:



 

 第一步:引入bxslider

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="/js/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="/lib/jquery.bxslider.css" rel="stylesheet" />

 

第二步:加入bxslider html代码

<div id="slider_block">
		<ul class="bxslider">
		  <foreach name="slideList" item="obj">
		  <li><a href="{$obj.link_addr}" target="_blank"><img src="__APP__{$obj.slide_img_addr}" width='990' height='245'/></a></li>
		  </foreach>
		</ul>
		<div id="slider-pager">
		  <foreach name="slideList" item="obj" key="i">
		  <a data-slide-index="{$i}" href="" class="pager-link">{$i}</a>
		  </foreach>
		</div>
	</div>

 

原版官方的html代码是这样的:

<ul class="bxslider">
  <li><img src="/images/pic1.jpg" /></li>
  <li><img src="/images/pic2.jpg" /></li>
  <li><img src="/images/pic3.jpg" /></li>
  <li><img src="/images/pic4.jpg" /></li>
</ul>

 

 

在此基础上创建了一个slider_block的父层DIV,设置position为relative,主要是为子层slider-pager的绝对定位翻页“1,2,3”。

 

第三步:修改CSS jquery.bxslider.css,增加slider-pager的CSS样式优化

/** custorm by 企业网站CMS系统:www.4jcms.com **/
#slider_block{position: relative;margin: 0 auto;height: 245px;margin-top:10px;overflow:hidden;}
#slider-pager{position: absolute;bottom: 10px;right: 10px;z-index: 999;font-size: 0px;}
#slider-pager .pager-link {float: left;width: 15px;height: 15px;line-height: 15px;text-align: center;margin: 0 0 0 10px;background: #FC0;color: #930;}
#slider-pager .active {background: #0C3;color: #fff;}

/*去掉阴影效果,浏览器不兼容 by 4jcms */
/*.bx-wrapper .bx-viewport {
	-moz-box-shadow: 0 0 5px #ccc;
	-webkit-box-shadow: 0 0 5px #ccc;
	box-shadow: 0 0 5px #ccc;
	border: solid #fff 5px;
	left: -5px;
	background: #fff;
}

*/

 

最后改造完毕。。。
  • 大小: 21.5 KB
  • 大小: 65.3 KB
分享到:
评论

相关推荐

    jquery幻灯片插件bxslider样式改进实例

    9. 通过CSS控制幻灯片样式: 改进后的bxslider样式很可能需要通过自定义CSS来实现,这包括改变幻灯片的布局、背景、动画过渡效果、分页器样式等。 综上所述,我们了解到jQuery幻灯片插件bxslider提供了灵活的API和...

    jquery.bxSlider

    3. **内容切换**:除了图片,`bxSlider`还可以用于切换各种内容,如幻灯片、产品列表、新闻等,通过滑动、淡入淡出等动画效果进行平滑过渡。 ### 二、核心特性 1. **参数设置**:`bxSlider`提供了丰富的配置选项,...

    JQuery实现的功能最强大的幻灯片相册

    5. **插件利用**:有许多现成的jQuery幻灯片插件,如`bxSlider`、`flexSlider`和`Slick`,它们提供了丰富的选项和自定义功能。只需引入相应的JS和CSS文件,根据需求配置参数,即可快速构建专业级的幻灯片。 6. **...

    jQuery动画幻灯片特效.zip

    4. **幻灯片插件**:有时候,开发者可能会使用现有的jQuery幻灯片插件,如Slick、bxSlider或swiper,这些插件提供了许多预设的动画效果和配置选项,帮助快速构建幻灯片。 5. **自定义设置**:开发者可以根据需求...

    jquery.bxSlider响应式滑动插件

    4. **触控支持**:对于触摸设备,bxSlider提供了手势控制功能,用户可以通过滑动来切换幻灯片。 5. **回调函数**:插件提供了一系列的回调函数,如`onSlideBefore`、`onSlideAfter`等,方便开发者在滑动前后执行特定...

    jQuery多功能幻灯片 jQuery多功能网页特效幻灯片.zip

    1. 选择合适的幻灯片插件:jQuery有众多优秀的幻灯片插件,如Slick、FlexSlider、bxSlider等,它们提供了丰富的选项和自定义设置,可以满足不同场景的需求。开发者可以根据项目需求选择适合的插件,或者从源码学习并...

    jquery 幻灯片插件

    此外,市面上有许多现成的jQuery幻灯片插件可供选择,如Slick、FlexSlider、bxSlider等,它们提供了丰富的选项和API,方便开发者进行二次开发。 在压缩包中的"Jquery 幻灯片"文件可能包含了实现以上功能的代码文件...

    jQuery简约幻灯片相册特效源码.zip

    7. **插件开发**:jQuery社区提供了许多插件,如`bxSlider`, `swiper`等,可以快速实现幻灯片效果。如果源码包含自定义插件,那么可能涉及到插件的编写和调用规则。 8. **AJAX加载**:在大型项目中,图片可能会通过...

    jquery bxsilter 幻灯 特效

    jQuery bxSlider是一款流行的JavaScript幻灯片插件,它允许开发者轻松创建各种动态、响应式的滑动效果。在网页设计中,幻灯片组件通常用于展示图片、内容或产品,为用户提供一个互动且吸引人的界面。bxSlider因其轻...

    超宽屏jquery焦点幻灯轮换代码

    2. **CSS3样式**:为了实现超宽屏效果,需要设置幻灯片容器的宽度,使其适应屏幕宽度。使用百分比宽度或者媒体查询(`media queries`)来实现响应式布局,保证在不同屏幕尺寸下都有良好的显示效果。 3. **jQuery动画*...

    jquery幻灯片图片轮播带进度条幻灯片图片切换

    "jquery幻灯片图片轮播带进度条幻灯片图片切换"是jQuery实现的一种常见功能,通常用于网站的首页或者产品展示区,能够吸引用户的注意力并提供良好的用户体验。下面我们将深入探讨这一主题。 首先,jQuery幻灯片图片...

    jQuery幻灯片图片展示 图片例子效果.rar

    4. **插件系统**:jQuery有丰富的第三方插件,如`jQuery.cycle()`或`bxSlider`,这些插件提供了现成的幻灯片解决方案,简化开发流程。只需引入相关插件的JS文件,并根据文档配置选项,即可快速创建幻灯片。 在...

    jquery幻灯片图片展示.zip

    《jQuery幻灯片图片展示详解》 在网页设计与开发中,动态的图片展示效果能够极大地提升用户体验,吸引用户注意力。jQuery作为一种强大的JavaScript库,因其简洁的API和丰富的插件库,成为实现这类效果的首选工具。...

    仿迅雷影音官网的全屏大图jQuery幻灯片代码.zip

    5. **jQuery插件**:虽然未明确提到,但实现全屏幻灯片效果可能涉及使用jQuery插件,如Slick、FlexSlider或者bxSlider等。这些插件提供了预设的幻灯片功能,可以快速集成到项目中,减少开发时间。 6. **事件监听和...

    jQuery自适应浏览器宽度幻灯片.zip

    4. **jQuery插件**:虽然可以手动编写JavaScript代码实现幻灯片,但也可以使用现成的jQuery插件,如`bxSlider`、`Slick`或`swiper`等,它们提供了丰富的配置选项和预设效果,大大简化了开发过程。 在实际应用中,你...

    jQuery新闻组图幻灯片相册代码.zip

    【jQuery新闻组图幻灯片相册代码】是一个基于JavaScript库jQuery实现的动态展示新闻或图片的交互式组件。这个组件通常用于网站的首页或者新闻页面,以吸引用户的注意力并提供流畅的浏览体验。通过幻灯片的形式,它...

    jQuery带左侧缩略图图片幻灯片自动切换特效.zip

    虽然这个项目没有明确提及使用jQuery插件,但实现类似功能时,开发者可能会利用现有的jQuery插件,如Slick、FlexSlider或 bxSlider,它们提供了现成的幻灯片解决方案,只需简单配置即可使用。如果项目没有使用插件...

    jQuery网格点击放大为幻灯片切换特效.zip

    这些插件通常是已经封装好的功能模块,例如“bxSlider”或“slick”等,可以轻松地实现幻灯片效果。在这个项目中,可能有一个类似的插件被集成到`js`目录下的某个文件中。 5. **资源组织**:根据提供的文件名列表,...

    图片幻灯片

    7. **CSS样式**: CSS在幻灯片中起到关键作用,控制图片的布局、尺寸、位置,以及过渡效果。例如,可以使用 `transition` 属性来实现CSS3的平滑过渡。 8. **插件化开发**: 为了方便重用和维护,许多开发者会将这种...

Global site tag (gtag.js) - Google Analytics