CSS+JS自动循环滚动的多图片幻灯切换展示效果

最新推荐文章于 2024-05-30 10:50:01 发布
最新推荐文章于 2024-05-30 10:50:01 发布
阅读量149 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/csr04/archive/2012/08/24/2653665.html
版权
<!DOCTYPE html PUBLIC  " -//W3C//DTD XHTML 1.0 Transitional//EN "  " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= " http://www.w3.org/1999/xhtml ">
<head>
<title>CSS+JS自动循环滚动的多图片幻灯切换展示效果丨芯晴网页特效丨CsrCode.CN</title>
<meta http-equiv= " content-type " content= " text/html;charset=gb2312 ">
<!--把下面代码加到<head>与</head>之间-->
<style type= " text/css ">
UL {
 PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
LI {
 PADDING-BOTTOM: 0px; LIST-STYLE-TYPE: none; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; LIST-STYLE-IMAGE: none; PADDING-TOP: 0px
}
A:hover IMG {
 BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; BORDER-TOP: medium none; BORDER-RIGHT: medium none
}
IMG {
 BORDER-BOTTOM: medium none; BORDER-LEFT: medium none; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-LEFT: 0px; PADDING-RIGHT: 0px; BORDER-TOP: medium none; BORDER-RIGHT: medium none; PADDING-TOP: 0px
}
#banner_images {
 POSITION: relative; MARGIN: 10px auto; WIDTH: 960px; BACKGROUND: #2d2d2d
}
#banner_images .focus {
 PADDING-BOTTOM: 10px; MARGIN: 0px auto; WIDTH: 848px; OVERFLOW: hidden
}
#banner_images .focus .wrapper {
 Z-INDEX:  9; POSITION: relative; WIDTH: 5000px; HEIGHT: 251px
}
#banner_images .focus .page {
 PADDING-BOTTOM: 8px; PADDING-LEFT: 0px; PADDING-RIGHT: 8px; FLOAT: left; OVERFLOW: hidden; PADDING-TOP: 12px
}
#banner_images .focus .page LI {
 MARGIN-LEFT: 8px
}
#banner_images .focus IMG {
 WIDTH: 160px; FLOAT: left; HEIGHT: 230px
}
#banner_images .focus A {
 WIDTH: 160px; FLOAT: left; HEIGHT: 230px
}
#banner_images .focus .nth- 1 {
 WIDTH: 160px; FLOAT: left; HEIGHT: 230px
}
#banner_images .focus .nth- 2 {
 WIDTH: 160px; FLOAT: left; HEIGHT: 230px
}
#banner_images .focus .nth- 3 {
 WIDTH: 160px; FLOAT: left; HEIGHT: 230px
}
#banner_images .focus .nth- 4 {
 WIDTH: 160px; FLOAT: left; HEIGHT: 230px
}
#banner_images .focus .nth- 5 {
 WIDTH: 160px; FLOAT: left; HEIGHT: 230px
}
#banner_images .focus .poster3 .nth- 1 {
 WIDTH: 496px
}
#banner_images .focus .poster3 .nth- 1 IMG {
 WIDTH: 496px
}
#banner_images .focus .poster3 .nth- 1 SPAN.cover {
 WIDTH: 494px
}
#banner_images .focus .poster3 .nth- 1 A:hover SPAN.cover {
 WIDTH: 492px
}
#banner_images .focus .poster1 .nth- 1 {
 WIDTH: 832px
}
#banner_images .focus .poster1 .nth- 1 IMG {
 WIDTH: 832px
}
#banner_images .focus .poster1 .nth- 1 SPAN.cover {
 WIDTH: 830px
}
#banner_images .focus .poster1 .nth- 1 A:hover SPAN.cover {
 WIDTH: 828px
}
#banner_images .focus A {
 POSITION: relative
}
#banner_images .focus A SPAN.cover {
 BORDER-BOTTOM: #3e3e3e 1px solid; POSITION: absolute; BORDER-LEFT: #3e3e3e 1px solid; WIDTH: 158px; DISPLAY: block; HEIGHT: 228px; BORDER-TOP: #3e3e3e 1px solid; TOP: 0px; BORDER-RIGHT: #3e3e3e 1px solid; LEFT: 0px
}
#banner_images .focus A:hover SPAN.cover {
 BORDER-BOTTOM: # 797979 2px solid; BORDER-LEFT: # 797979 2px solid; WIDTH: 156px; HEIGHT: 226px; BORDER-TOP: # 797979 2px solid; BORDER-RIGHT: # 797979 2px solid
}
#banner_images B SPAN.left {
 POSITION: absolute; WIDTH: 32px; DISPLAY: block; BACKGROUND: url(http: // www.csrcode.cn/imagesforcode/201208/movie-home-spr-8.png) 0px 0px; HEIGHT: 64px; TOP: 96px; CURSOR: pointer; LEFT: 18px
}
#banner_images B.hover SPAN.left {
 BACKGROUND-POSITION: 0px -65px
}
#banner_images B:hover SPAN.left {
 BACKGROUND-POSITION: 0px -65px
}
#banner_images B SPAN.right {
 POSITION: absolute; WIDTH: 32px; DISPLAY: block; BACKGROUND: url(http: // www.csrcode.cn/imagesforcode/201208/movie-home-spr-8.png) -39px 0px; HEIGHT: 64px; TOP: 96px; CURSOR: pointer; RIGHT: 18px
}
#banner_images B.hover SPAN.right {
 BACKGROUND-POSITION: -39px -65px
}
#banner_images B:hover SPAN.right {
 BACKGROUND-POSITION: -39px -65px
}
#banner_images .switcher {
 TEXT-ALIGN: center; LINE-HEIGHT: 10px; HEIGHT: 10px
}
#banner_images .switcher .button {
 LINE-HEIGHT: 10px; BACKGROUND-COLOR: #9aa594; MARGIN: 0px 3px; WIDTH: 45px; DISPLAY: inline-block; HEIGHT: 10px; FONT-SIZE: 0px; CURSOR: pointer
}
#banner_images .switcher .cur .button {
 BACKGROUND: url(http: // www.csrcode.cn/imagesforcode/201208/movie-home-spr-8.png) -80px -32px
}
#banner_images .filter {
 BACKGROUND: url(http: // www.csrcode.cn/imagesforcode/201208/movie-home-v-spr-8.png) 0px 0px; HEIGHT: 96px
}
#banner_images .sort_link {
 PADDING-BOTTOM: 0px; PADDING-LEFT: 13px; WIDTH: 84px; PADDING-RIGHT: 19px; FLOAT: left; HEIGHT: 72px; PADDING-TOP: 24px
}
#banner_images .sort_link A {
 PADDING-BOTTOM: 0px; LINE-HEIGHT: 26px; PADDING-LEFT: 8px; PADDING-RIGHT: 0px; DISPLAY: block; MARGIN-BOTTOM: 6px; BACKGROUND: url(http: // www.csrcode.cn/imagesforcode/201208/movie-home-v-spr-8.png) 0px -100px; HEIGHT: 26px; COLOR: #333; FONT-SIZE: 12px; FONT-WEIGHT: bold; PADDING-TOP: 0px
}
#banner_images .v_spl {
 WIDTH: 1px; BACKGROUND: url(http: // www.csrcode.cn/imagesforcode/201208/movie-home-spr-8.png) 0px -144px; FLOAT: left; HEIGHT: 96px; FONT-SIZE: 0px; OVERFLOW: hidden
}
#banner_images .filter .container {
 PADDING-BOTTOM: 0px; PADDING-LEFT: 14px; PADDING-RIGHT: 10px; FLOAT: left; PADDING-TOP: 10px
}
#banner_images .filter_plot {
 WIDTH: 288px
}
#banner_images .filter_year {
 WIDTH: 240px
}
#banner_images .filter_district {
 WIDTH: 240px
}
#banner_images .filter .container H2 {
 PADDING-BOTTOM: 3px; PADDING-LEFT: 5px; WIDTH: 39px; PADDING-RIGHT: 0px; FONT: 12px/18px  " SIMSUN ", Arial, monospace; BACKGROUND: url(http: // www.csrcode.cn/imagesforcode/201208/movie-home-spr-8.png) -80px -2px; HEIGHT: 18px; COLOR: #ddd; PADDING-TOP: 3px
}
#banner_images .filter {
 FONT-SIZE: 12px
}
#banner_images .filter .items {
 LINE-HEIGHT: 25px; MARGIN-LEFT: -3px; MARGIN-RIGHT: -3px; PADDING-TOP: 3px
}
#banner_images .filter .items .item {
 PADDING-BOTTOM: 3px; LINE-HEIGHT: 12px; PADDING-LEFT: 4px; PADDING-RIGHT: 4px; DISPLAY: inline-block; FONT-FAMILY: tahoma,  " simsun "; LETTER-SPACING: 1px; COLOR: # 999; MARGIN-RIGHT: 2px; PADDING-TOP: 5px; -moz-font-family:  " simsun "; _margin: 2px  0
}
#banner_images .filter .items .item:hover {
 BACKGROUND: #15a50d; LETTER-SPACING: 0px; COLOR: #fff; FONT-WEIGHT: bolder; TEXT-DECORATION: none
}
#banner_images .filter .items A.hilight {
 COLOR: #eee
}
#banner_images .focus .page LI {
    display: inline
}
#banner_images {
 overflow: hidden
}
#banner_images .focus .wrapper {
    overflow: hidden
}
#banner_images B SPAN {
 z-index:  99; overflow: hidden
}
#banner_images B SPAN.left {}
#banner_images B SPAN a {
 text-indent: -9999px
}
#banner_images B SPAN.left a {
    display: block;
    height: 64px;
    left: 18px;
    top: 96px;
    width: 32px;
 background: url( " http://www.csrcode.cn/imagesforcode/201208/movie-home-spr-8.png ") repeat scroll  0  0 transparent
}
#banner_images B SPAN.left a:hover {
 background-position:  0 -65px
}
#banner_images B SPAN.right a { 
    display: block;
    height: 64px;
    left: 18px;
    top: 96px;
    width: 32px;
 background: url( " http://www.csrcode.cn/imagesforcode/201208/movie-home-spr-8.png ") repeat scroll -39px  0 transparent
}
#banner_images B SPAN.right a:hover {
 background-position: -39px -65px
}
#banner_images .focus {
 position: relative
}
</style>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<div id= " banner_images "><b  class= " scroll_button "><span  class= " left "><a href= " javascript:void(0) ">left</a></span></b><b  class= " scroll_button "><span  class= " right "><a href= " javascript:void(0) ">right</a></span></b>
  <div  class= " focus " id= " poster_focus ">
    <div  class= " wrapper ">
      <ul  class= " page poster3 ">
        <li  class= " nth-1 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m01.jpg " width= " 496px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-2 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m02.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-3 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m03.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
      </ul>
      <ul  class= " page poster5 " style= " display:none ">
        <li  class= " nth-1 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m04.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-2 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m05.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-3 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m06.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-4 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m07.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-5 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m08.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
      </ul>
      <ul  class= " page poster5 " style= " display:none ">
        <li  class= " nth-1 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m01.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-2 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m02.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-3 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m03.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-4 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m04.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-5 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m05.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
      </ul>
      <ul  class= " page poster5 " style= " display:none ">
        <li  class= " nth-1 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m06.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-2 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m07.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-3 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m08.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-4 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m09.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-5 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m10.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
      </ul>
      <ul  class= " page poster5 " style= " display:none ">
        <li  class= " nth-1 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m01.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-2 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m04.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-3 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m05.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-4 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m07.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
        <li  class= " nth-5 "><a title= "" href= " #nogo "><img src= " http://www.csrcode.cn/images/m09.jpg " width= " 160px " height= " 230px "><span  class= " cover "></span></a></li>
      </ul>
    </div>
    <div  class= " switcher "> <b  class= " switcher-button cur " pg= " 0 "><span  class= " button "></span></b><b  class= " switcher-button " pg= " 1 "><span  class= " button "></span></b><b  class= " switcher-button " pg= " 2 "><span  class= " button "></span></b><b  class= " switcher-button " pg= " 3 "><span  class= " button "></span></b><b  class= " switcher-button " pg= " 4 "><span  class= " button "></span></b></div>
  </div>
</div>
<script src= " http://www.csrcode.cn/imagesforcode/201208/g.js "></script> 
<script src= " http://www.csrcode.cn/imagesforcode/201208/movie-home.js "></script>
</body>
</html>

<br>如果不显示预览效果，请刷新一下本页面先~~<br>所需js文件：<a href= " http://www.csrcode.cn/imagesforcode/201208/g.js ">g.js</a>、<a href= " http://www.csrcode.cn/imagesforcode/201208/movie-home.js ">movie-home.js</a><hr><p align= " center "><font color=black>本特效由 <a href= " http://www.CsrCode.cn " target= " _blank ">芯晴网页特效</a>丨CsrCode.Cn 收集于互联网，只为兴趣与学习交流，不作商业用途。</font></p>

转载于:https://www.cnblogs.com/csr04/archive/2012/08/24/2653665.html

dfsfdsds5241
关注
移动端事件（二）—— 移动端滑屏切换的幻灯片
小白菜的博客
04-03 397
经过昨天对移动端基础的了解，今天就来用原生JS实现一下我们的幻灯片。 因为是用原生实现，所以本文篇幅较长，各位看官只需理解思路即可，代码部分可以粗略看看。 毕竟我们有better-scroll这样封装好的框架能更快速实现效果。b（￣▽￣）d 首先根据我们昨天的滑屏操作，先将幻灯片的滑屏效果做出来。这里大家将照片地址更换成自己的就能得到效果。 案例要在客户端才有效果哦，如果在PC端，网页中右键点审查...
多图滚动切换
u011848617的专栏
04-27 891
写在前面的话 之前写多图切换时有童鞋建议多写写动画效果，也想和大家多多分享的，怎奈想象力不足，一直没找到合适的效果。最近在网上无意看到了一个多图滚动切换的效果，感觉看起来不错，遂写下来和大家分享一下。 思路 动画效果技术上严格依赖于以下几点，请大家熟练掌握，然后看下文就比较好理解了 transform 属性 animation 属性 @keyframes 自定义动画规则 本文...
纯css实现幻灯片轮播效果
u012637258的博客
12-14 2339
CSS实现简单的幻灯片效果             img {             display: none;             width: 600px;             height: 600px;         }         input:checked + img {             display: block;
CSS：纯CSS3全屏背景图片幻灯片轮播
b14562的博客
10-17 351
纯CSS3全屏背景图片幻灯片轮播
html+css实现幻灯片自动轮番代码
不定时分享最优质的网络技术与教程，满满的干货。
12-02 285
源码下载地址：html+css实现幻灯片自动轮播代码-其它文档类资源-点击下载
jQuery+swiper.js幻灯片图片视差滚动轮播特效
06-09
"jQuery + Swiper.js 幻灯片图片视差滚动轮播特效"就是一种常用的技术，它结合了jQuery库的便捷性和Swiper.js组件的强大功能，为用户提供了一种富有层次感和动态视觉效果的图片展示方式。 首先，我们来了解一下**...
js循环滚动切换首页幻灯片.zip
11-24
综上所述，"js循环滚动切换首页幻灯片"涉及HTML5的结构、CSS的布局和动画效果，以及JavaScript（尤其是jQuery）的动态交互。这个功能的实现需要熟练掌握前端开发的基本技能，并考虑各种设备和浏览器的兼容性。通过...
js实现的循环滚动切换首页幻灯片特效源码.zip
11-19
【标题】"js实现的循环滚动切换首页幻灯片特效源码"主要涉及JavaScript编程语言在网页设计中的应用，特别是创建动态、交互式的首页幻灯片效果。这种效果常见于网站的首页，用来展示一系列图片或内容，通过自动或用户...
HTML+CSS+JavaScript实现轮播图
weixin_43396749的博客
11-24 2881
HTML+CSS+JavaScript实现轮播图
用iScroll5实现幻灯片效果
z的博客
12-17 2157
这里讲解的是一个简单的幻灯片效果，先贴上代码，后面讲解   幻灯片 * { margin: 0; padding: 0; } .wraper { width: 400px; margin: auto; overflow: hidden; margin-top: 100px; }
html图片闪现循环效果,CSS实现图片无缝无限循环展示效果
weixin_42512246的博客
06-03 1860
只是想练练手，看看能不能实现在页面上放置一个能无限循环滚动的图片横幅。事实证明，这并不是很难。先看实际效果：无限循环滚动的关键是确定宽图片的位置首先，这个图片的设计需要有一点技巧，就是它的首位部分是相同重复的，上面的演示里使用的图片是下面这幅：滚动的过程是变换图片的left位置，直到图片完整的展示一个循环(事实上是移动到看起来是一个循环)，然后立刻将left值调整到最初的位置，开始下一次循环。我们...
使用CSS实现圆环流水灯、跑马灯、加载渐变动画效果
最新发布
weixin_52231116的博客
05-30 2695
本文主要使用CSS实现圆环流水灯、跑马灯、加载动画效果，以及介绍了常见的几种 transform 的变形函数
原生JS和CSS实现滚动轮播图的实现思路(附带指示器)
qq_37580940的博客
09-16 1029
滚动轮播图，原生JS，CSS，实现思路，原理，指示器，
用CSS实现图片幻灯片式的切换（所有图片轮流显示，每次显示一张）
JiangLittleBai的博客
04-10 7073
HTML 部分&lt;div id="img-wrap"&gt; &lt;img src="img/1.jpg"&gt; &lt;img src="img/2.jpg"&gt; &lt;img src="img/3.jpg"&gt; &lt;img src="img/4.jpg"&gt; &
带你使用css过渡加原生js轻轻松松手撕轮播图
qq_61233877的博客
05-26 272
带你使用css过渡加原生js轻轻松松手撕轮播图
js、css实现三个图片循环播放的效果(图片带有阴影效果)
qq_46225867的博客
01-20 1654
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Do
html+css使图片在页面中循环滚动
aiguan9054的博客
06-21 3667
我们先通过html创建一个div盒子的框架，方便后续以及实际使用中调整位置。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>滚动播放</title>...
CSS3_图片连续无缝滚动
Martin 的博客
07-18 6033
效果图： 传不上来。。。   在线预览地址：地址 代码 &lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;图片滚动&lt;/title&gt; &lt;meta name="keywords" content=&quot
CSS实现图片无限循环无缝滚动
热门推荐
k464746的博客
10-26 1万+
实现代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * {
自写实现JS幻灯片循环播放+滚动导航与平滑旋转示例
总结来说，这篇教程向读者展示了如何通过结合HTML、CSS和JavaScript，创建一个交互式的、可循环播放且具有平滑旋转和滚动导航功能的幻灯片。对于前端开发人员来说，这是一个实践JavaScript动画和交互设计的好例子。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值