简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > HTML Tutorial > body text

Picture scrolling effects

高洛峰
Release： 2017-02-08 10:16:50
Original
2904 people have browsed it

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>SuperSlide - 图片滚动特效-左</title>
<script type="text/javascript" src="../jquery1.42.min.js"></script>
<script type="text/javascript" src="../jquery.SuperSlide.2.1.1.js"></script>
</head>

<body>



		<style type="text/css">
		/* css 重置 */
		*{margin:0; padding:0; list-style:none; }
		body{ background:#fff; font:normal 12px/22px 宋体;  }
		img{ border:0;  }
		a{ text-decoration:none; color:#333;  }

		/* 本例子css */
		.picScroll-left{ width:450px;  overflow:hidden; position:relative;  border:1px solid #ccc;   }
		.picScroll-left .hd{ overflow:hidden;  height:30px; background:#f4f4f4; padding:0 10px;  }
		.picScroll-left .hd .prev,.picScroll-left .hd .next{ display:block;  width:5px; height:9px; float:right; margin-right:5px; margin-top:10px;  overflow:hidden;
			 cursor:pointer; background:url("images/arrow.png") no-repeat;}
		.picScroll-left .hd .next{ background-position:0 -50px;  }
		.picScroll-left .hd .prevStop{ background-position:-60px 0; }
		.picScroll-left .hd .nextStop{ background-position:-60px -50px; }
		.picScroll-left .hd ul{ float:right; overflow:hidden; zoom:1; margin-top:10px; zoom:1; }
		.picScroll-left .hd ul li{ float:left;  width:9px; height:9px; overflow:hidden; margin-right:5px; text-indent:-999px; cursor:pointer; background:url("images/icoCircle.gif") 0 -9px no-repeat; }
		.picScroll-left .hd ul li.on{ background-position:0 0; }
		.picScroll-left .bd{ padding:10px;   }
		.picScroll-left .bd ul{ overflow:hidden; zoom:1; }
		.picScroll-left .bd ul li{ margin:0 8px; float:left; _display:inline; overflow:hidden; text-align:center;  }
		.picScroll-left .bd ul li .pic{ text-align:center; }
		.picScroll-left .bd ul li .pic img{ width:120px; height:90px; display:block;  padding:2px; border:1px solid #ccc; }
		.picScroll-left .bd ul li .pic a:hover img{ border-color:#999;  }
		.picScroll-left .bd ul li .title{ line-height:24px;   }

		</style>

		<div class="picScroll-left">
			<div class="hd">
				<a class="next"></a>
				<a class="prev"></a>
			</div>
			<div class="bd">
				<ul class="picList">
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic1.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图1</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic2.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图2</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic3.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图3</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic4.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图4</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic5.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图5</a></div>
					</li>
					<li>
						<div class="pic"><a href="http://www.SuperSlide2.com" target="_blank"><img src="images/pic6.jpg" /></a></div>
						<div class="title"><a href="http://www.SuperSlide2.com" target="_blank">效果图6</a></div>
					</li>
				</ul>
			</div>
		</div>

		<script type="text/javascript">
		jQuery(".picScroll-left").slide({titCell:".hd ul",mainCell:".bd ul",autoPage:true,effect:"left",autoPlay:true,vis:3,trigger:"click"});
		</script>



</body>
</html>
Copy after login

For more articles related to picture scrolling effects, please pay attention to the PHP Chinese website!

Related labels：
滚动 HTML
source：php.cn
Previous article：Differences between tag and SVG and VML Next article：html+css|Floating and positioning of elements
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
How can I set the height of an outer div to always be equal to the height of a specific inner div? I have an outer div that contains three inner divs. I want the leftmost inner div to alway...
From 2023-11-07 13:59:30
0
2
314
How to prevent the page from scrolling after route changes in Nuxt? I have a Nuxt project. When I change the route from http://localhost:3000/catalog/postery ...
From 2023-11-06 18:56:58
0
1
266
Create custom buttons for slide navigation in Swiper using Vue.js I need to remove the default navigation (nextEl, prevEl) and make the button with the text...
From 2023-11-02 14:42:51
0
1
174
Div captures mouse scroll I currently have a page of the form <divid="content"><divid="conte...
From 2023-11-01 18:57:05
0
2
268
What is the default width of `<body>` margins? What is the default margin that HTML sets for its tags? I noticed there is some auto margi...
From 2023-10-19 21:54:40
0
2
200
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！